class: center, middle, title-slide # Interactive plots ### Claus O. Wilke ### last updated: 2021-09-23 --- ## Interactivity can make a plot more informative .center[
] .absolute-bottom-right.small-font[ hover over the data points ] ??? Figure redrawn from [Claus O. Wilke. Fundamentals of Data Visualization. O'Reilly, 2019.](https://clauswilke.com/dataviz) --- ## You probably want to highlight the selected points ... .center[
] .absolute-bottom-right.small-font[ hover over the data points ] ??? Figure redrawn from [Claus O. Wilke. Fundamentals of Data Visualization. O'Reilly, 2019.](https://clauswilke.com/dataviz) --- ## ... and/or de-emphasize all others .center[
] .absolute-bottom-right.small-font[ hover over the data points ] ??? Figure redrawn from [Claus O. Wilke. Fundamentals of Data Visualization. O'Reilly, 2019.](https://clauswilke.com/dataviz) --- ## You can combine interactivity with explicit labels .center[
] .absolute-bottom-right.small-font[ hover over the data points ] ??? Figure redrawn from [Claus O. Wilke. Fundamentals of Data Visualization. O'Reilly, 2019.](https://clauswilke.com/dataviz) --- ## Also consider linking to further info .center[
] .absolute-bottom-right.small-font[ click on one of the states ] --- ## Highlight across two plots for added context .center[
] [//]: # "segment ends here" --- class: center middle ## Interactive plots in R --- ## We can make plots interactive with the **ggiraph** package .tiny-font.pull-left.width-50[ ```r # iris_scatter <- ggplot(iris) + aes( Sepal.Length, Sepal.Width, color = Species ) + geom_point() iris_scatter ``` ] .pull-right.move-up-1em[ ![](interactive-plots_files/figure-html/iris-no-girafe-demo-out-1.svg)<!-- --> .small-font[ regular **ggplot2** plot: hovering does nothing ] ] --- ## We can make plots interactive with the **ggiraph** package .tiny-font.pull-left.width-50[ ```r *library(ggiraph) iris_scatter <- ggplot(iris) + aes( Sepal.Length, Sepal.Width, color = Species ) + * geom_point_interactive( * aes(tooltip = Species) ) *girafe( * ggobj = iris_scatter, * width_svg = 6, * height_svg = 6*0.618 *) ``` ] .pull-right[
.small-font[ **ggiraph** version: hovering displays species names ] ] --- ## Styling happens via Cascading Style Sheets (CSS) .tiny-font.pull-left.width-50[ ```r library(ggiraph) iris_scatter <- ggplot(iris) + aes( Sepal.Length, Sepal.Width, color = Species ) + geom_point_interactive( aes(tooltip = Species) ) girafe( ggobj = iris_scatter, width_svg = 6, height_svg = 6*0.618, * options = list( * opts_tooltip( *css = "background: #F5F5F5; color: #191970;" * ) * ) ) ``` ] .pull-right[
.small-font[ **ggiraph** version: hovering displays species names ] ] --- ## Select multiple points at once with `data_id` aesthetic .tiny-font.pull-left.width-50[ ```r library(ggiraph) iris_scatter <- ggplot(iris) + aes( Sepal.Length, Sepal.Width, color = Species ) + geom_point_interactive( * aes(data_id = Species), size = 2 ) girafe( ggobj = iris_scatter, width_svg = 6, height_svg = 6*0.618 ) ``` ] .pull-right[
] --- ## Select multiple points at once with `data_id` aesthetic .tiny-font.pull-left.width-50[ ```r library(ggiraph) iris_scatter <- ggplot(iris) + aes( Sepal.Length, Sepal.Width, color = Species ) + geom_point_interactive( aes(data_id = Species), size = 2 ) girafe( ggobj = iris_scatter, width_svg = 6, height_svg = 6*0.618, options = list( * opts_hover(css = "fill: #202020;"), * opts_hover_inv(css = "opacity: 0.2;") ) ) ``` ] .pull-right[
Again, styling via CSS ] --- ## Interactive map example .tiny-font[ ```r # load data US_states <- readRDS(url("https://wilkelab.org/SDS375/datasets/US_states.rds")) ``` ] --- ## Interactive map example .tiny-font[ ```r # load data US_states <- readRDS(url("https://wilkelab.org/SDS375/datasets/US_states.rds")) # print US_states ``` ``` Simple feature collection with 51 features and 3 fields Geometry type: MULTIPOLYGON Dimension: XY Bounding box: xmin: -3683715 ymin: -2839538 xmax: 2258154 ymax: 1558935 CRS: +proj=aea +lat_1=29.5 +lat_2=45.5 +lat_0=37.5 +lon_0=-96 +x_0=0 +y_0=0 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs First 10 features: GEOID name state_code geometry 1 01 Alabama AL MULTIPOLYGON (((1032679 -63... 2 04 Arizona AZ MULTIPOLYGON (((-1216674 -4... 3 05 Arkansas AR MULTIPOLYGON (((462619.4 -3... 4 06 California CA MULTIPOLYGON (((-2077630 -2... 5 08 Colorado CO MULTIPOLYGON (((-527710.6 3... 6 09 Connecticut CT MULTIPOLYGON (((1841099 622... 7 10 Delaware DE MULTIPOLYGON (((1762798 354... 8 11 District of Columbia DC MULTIPOLYGON (((1610777 321... 9 12 Florida FL MULTIPOLYGON (((1431218 -13... 10 13 Georgia GA MULTIPOLYGON (((1339965 -64... ``` ] --- ## Interactive map example .tiny-font.pull-left.width-50[ ```r US_map <- US_states %>% ggplot() + * geom_sf_interactive( * aes(data_id = name, tooltip = name) * ) + theme_void() girafe( ggobj = US_map, width_svg = 6, height_svg = 6*0.618 ) ``` ] .pull-right.width-50[
] --- ## Interactive map example .tiny-font.pull-left.width-50[ ```r US_map <- US_states %>% mutate( # JavaScript call to open website * onclick = glue::glue( 'window.open( "https://en.wikipedia.org/wiki/{name}")') ) %>% ggplot() + geom_sf_interactive( aes( data_id = name, tooltip = name, * onclick = onclick ) ) + theme_void() girafe( ggobj = US_map, width_svg = 6, height_svg = 6*0.618 ) ``` ] .pull-right.width-50[
.small-font[ <br> Click to open a state's wikipedia page ] ] [//]: # "segment ends here" --- class: center middle ## A (very) brief intro to CSS --- ## A (very) brief intro to CSS -- CSS is the language used to style web pages -- Many online tutorials, e.g.: https://www.w3schools.com/css/default.asp [//]: # "segment ends here" --- ## Further reading - **ggiraph** documentation: [Using **ggiraph**](https://davidgohel.github.io/ggiraph/articles/offcran/using_ggiraph.html) - **ggiraph** documentation: [Function reference](https://davidgohel.github.io/ggiraph/reference/index.html) - MDN Web Docs: [Learn to style HTML using CSS ](https://developer.mozilla.org/en-US/docs/Learn/CSS) - w3schools.com: [CSS Tutorial](https://www.w3schools.com/css/default.asp)