class: monash-bg-blue center middle hide-slide-number <div class="bg-black white" style="width:45%;right:0;bottom:0;padding-left:5px;border: solid 4px white;margin: auto;"> <i class="fas fa-exclamation-circle"></i> These slides are viewed best by Chrome and occasionally need to be refreshed if elements did not load properly. See here for <a href=day2-session1.pdf>PDF <i class="fas fa-file-pdf"></i></a>. </div> .white[Push the **right arrow key** to see the next slide.] --- count: false background-image: url(images/d2bg2.jpg) background-size: cover class: hide-slide-number title-slide <div class="grid-row" style="grid: 1fr / 2fr;"> .item.center[ # <span style="text-shadow: 2px 2px 30px white;">Advanced data visualization with R <br> Workshop Day 2</span> <!-- ## <span style="color:yellow;text-shadow: 2px 2px 30px black;">Lesson 1: Overview of tools for interactive plots</span> --> ] .center.shade_black.animated.bounceInUp.slower[ <br><br> ## Lesson 1: Overview of tools for interactive plots <br> Presented by Di Cook Department of Econometrics and Business Statistics <img src="images/monash-one-line-reversed.png" style="width:500px"><br>
<i class="fas fa-envelope faa-float animated "></i>
dicook@monash.edu
<i class="fab fa-twitter faa-float animated faa-fast "></i>
@visnut .bottom_abs.width100.bg-black[ 8-9th Dec 2021 @ Statistical Society of Australia | Zoom ] ] </div> --- # Click me: https://ebsmonash.shinyapps.io/VICfire/ <iframe src="https://ebsmonash.shinyapps.io/VICfire/?showcase=0" width="100%" height="550px" data-external="1"></iframe> --- # Landscape of interactive plotting packages <img src="images/day2-session1/landscape-1.png" width="90%" style="display: block; margin: auto;" /> --- # Applying interactivity .top10-color-box[The purpose of interactivity is to display more than can be achieved with persistent plot elements, and to invite the reader to engage with the plot.] -- <br><br><br><br> .pull-left[ - .monash-blue2[Mouse-over] labels .monash-blue2[de-clutters] a plot
EASY
- .monash-blue2[Pan/zoom] allows .monash-blue2[re-focusing] attention
EASY
- .monash-blue2[Selection] allows .monash-blue2[focusing] attention
MODERATE
- .monash-blue2[Linking] connects elements from multiple plots
DIFFICULT
] .pull-right[ - .monash-blue2[Sorting] .monash-blue2[re-orders elements], most useful for tables
EASY
- .monash-blue2[Transforming] may be changing bin sizes in a histogram, or applying a log scale, or using a "fish eye lens"
DIFFICULT & RARE
] --- # Direct manipulation vs GUI .pull-left[ ## Direct manipulation When these actions - .monash-blue2[Mouse-over] - .monash-blue2[Pan/zoom] - .monash-blue2[Selection] - .monash-blue2[Linking] - .monash-blue2[Sorting] - .monash-blue2[Transforming] are taken by the user .monash-orange2[directly on the plot] itself. ] .pull-right[ ## Graphical User Interface Elements of the plot changes are made using GUI items like sliders, checkboxes, menus <center> <img src="images/gui.png" width="40%" > </center> ] --- class: transition middle # Getting hands-on with plotly --- # What is plotly? `plotly.js` is a javascript plotting library. `plotly` is an R package with a key function `ggplotly()` that converts ggplot objects into a JSON object to be rendered in a web browser by `plotly.js`. <center> <img src="https://plotly-r.com/images/printing.svg" width="50%" alt = "Figure 2.5 from https://plotly-r.com/"> </center> .footnote[Figure 2.5 from Sievert (2019)] --- class: font_smaller # Palmer penguins .font_small[
] <div class="tag center animated rubberBand" style="position:absolute;top:2%;left:12%;transform:rotate(-3deg);"> demo data for today </div> --- # Layering interactivity to a ggplot <br> .left-code[ .font_small[ ```r p <- ggplot(penguins, aes(x = bill_length_mm, y = bill_depth_mm, color = species)) + geom_point() *ggplotly(p) ``` ] ] .right-plot[
] --- # Aspect ratio, and remove legend <br> .left-code[ .font_small[ ```r p2 <- ggplot(penguins, aes(x = bill_length_mm, y = bill_depth_mm, color = species)) + geom_point() + * theme(legend.position="none", * aspect.ratio=1) ggplotly(p2) ``` ] ] .right-plot[
] --- # Fix aspect ratio with ggplotly argument <br> .left-code[ .font_small[ ```r p3 <- ggplot(penguins, aes(x = bill_length_mm, y = bill_depth_mm, color = species)) + geom_point() + theme(legend.position="none", aspect.ratio=1) *ggplotly(p3, width=500, height=500) ``` ] ] .right-plot[
] --- # plotly features <br> .pull-left[
] .pull-right[ <center> <br><br> pan/zoom <br> <br> legend click <br> <br> brush </center> ] --- # Most but not all ggplot features are supported .left-code[ .font_small[ ```r p5 <- p3 + * facet_wrap(~species) ggplotly(p5, width=550, height=250) ``` <br><br><br><br><br><br> ```r p6 <- p3 + scale_color_brewer( * palette = "Dark2") + * theme_bw() ggplotly(p6, width=400, height=300) ``` ] ] .right-plot[
] --- # Most ggplot2 extensions mostly work .left-code[ .font_small[ ```r library(GGally) penguins_l <- penguins %>% rename(bl = bill_length_mm, bd = bill_depth_mm, fl = flipper_length_mm, bm = body_mass_g) *splom <- ggpairs(penguins_l, columns = 3:6, aes(color = species)) + theme(axis.text = element_blank()) ggplotly(splom, width=500, height=500) ``` ] ] .right-plot[
] --- # Multiple plotly plots with subplot A layout of different plots <br> .left-code[ .font_small[ ```r p_h <- ggplot(penguins, aes(x = body_mass_g)) + geom_histogram() gp_h <- ggplotly(p_h) gp_s <- ggplotly(p3) *subplot(gp_h, gp_s, titleX = TRUE, titleY = TRUE, * margin=c(0.06, 0.06, 0, 0), nrows = 1) ``` ] ] .right-plot[
] --- # Tooltips can be customised .pull-left[ Custom tooltips, from the ggplot .font_small[ ```r p_tooltip <- p3 + * geom_point(aes(text = island)) ggplotly(p_tooltip, width=300, height=300) ```
]] .pull-right[ or in ggplotly, either aesthetics or column name in plot data .font_small[ ```r ggplotly(p_tooltip, * tooltip = "text", width=300, height=300) ```
]] --- # Events can be turned off .pull-left[ .font_small[ ```r ggplotly(p3, width=400, height=400) %>% * style(hoverinfo = "none") ```
]] --- # Events can be propagated .pull-left[ Using the `highlight` function with `plotly_selected` shares the selection across views. <br><br> .font_small[ ```r ggplotly(splom, width=500, height=500) %>% * highlight(on = "plotly_selected") ``` ] <br> This is also a first example of .monash-blue2[linking between plots]. ] .pull-right[
.font_small[Brush to see how selected points are highlighted in all panels.] ] --- # How linking works here <center> <img src="images/linking.png" width="80%"> </center> --- class: transition middle # Interactive maps --- # Tips for mapping .top10-color-box[For data analysis, maps are a set of points, connected correctly to generate polygons.] -- <br><br><br><br> Note: It is important when converting spatial objects from a mapping software to a data analysis project is .monash-blue2["thinning" the map] to make it smaller and efficient to work with. See the `rmapshapr` package to help with this. --- # Maps operate with tooltips, too .left-code[ .font_small[ ```r library(sugarbag) library(ggthemes) tas_tb <- fortify_sfc(tas_sa2) tas_map <- ggplot(tas_tb, mapping = aes(x=long, lat, group = interaction(SA2_5DIG16, polygon), fill = AREASQKM16), colour="white") + geom_polygon(aes(text = SA2_NAME16)) + scale_fill_distiller("", palette="YlGnBu", direction=1) + theme_map() ``` ]] .right-plot[ <img src="images/day2-session1/unnamed-chunk-13-1.png" width="100%" style="display: block; margin: auto;" /> ] --- .left-code[ .font_small[ ```r ggplotly(tas_map + theme(legend.position="none"), tooltip = "text") ```
]] .right-plot[ .font_small[ ```r ggplotly(tas_map + theme(legend.position="none"), tooltip = c("text", "fill")) ```
]] --- # Maps with leaflet .left-code[ .font_small[ ```r library(leaflet) leaflet(tas_sa2) %>% * addPolygons(color = "#444444", weight = 1, smoothFactor = 0.5, opacity = 1.0, fillOpacity = 0.5, fillColor = ~colorQuantile("YlGnBu", c(0, max(AREASQKM16)))(AREASQKM16), * highlightOptions = highlightOptions( color = "white", weight = 2, bringToFront = TRUE)) ``` ] ] .right-plot[
] --- .left-code[ .font_small[ ```r tas_labels <- sprintf( "<strong>%s</strong><br/>%g km<sup>2</sup>", tas_sa2$SA2_NAME16, tas_sa2$AREASQKM16 ) %>% lapply(htmltools::HTML) leaflet(tas_sa2) %>% addPolygons(color = "#444444", weight = 1, smoothFactor = 0.5, opacity = 1.0, fillOpacity = 0.5, fillColor = ~colorQuantile("YlGnBu", c(0, max(AREASQKM16)))(AREASQKM16), highlightOptions = highlightOptions( color = "white", weight = 2, bringToFront = TRUE), * label = tas_labels, labelOptions = labelOptions( style = list("font-weight" = "normal", padding = "3px 8px"), textsize = "15px", direction = "auto")) ``` ]] .right-plot[ <br><br><br>
] --- # Reflection on leaflet <br> <br> .pull-left[ ## Advantages fast, scalable, reliable many map formats ] -- .pull-right[ ## Disadvantages specialist syntax limited capabilities map is fast but overlays, like polygons are slow ] --- # Maps as background: leaflet .left-code[ .font_small[ ```r load(here::here("data/platypus.rda")) platypus <- platypus %>% filter(year(eventDate) > 2018) platypus %>% leaflet() %>% * addTiles() %>% * addCircleMarkers( radius = 1, opacity = 0.5, color = "orange", * label = ~eventDate, * lat = ~Latitude, lng = ~Longitude) ``` ] ] .right-plot[
] --- # Maps as background: ggmap/plotly .left-code[ .font_small[ ```r # Use ggmap::get_map() to download an OSM load(here::here("data/oz_map.rda")) p <- ggmap(oz_map) + geom_point(data = platypus, aes(x = Longitude, y = Latitude, label=eventDate), alpha = 0.5, colour = "orange") + theme_map() *ggplotly(p, tooltip = "label") ``` ] ] .right-plot[
] --- class: transition middle # Interactive tables --- class: font_smaller # Tables with DT .font_small[ ```r penguins %>% DT::datatable(width=1150, height=100) ```
] --- class: font_smaller # Tables with reactable .font_small[
] --- class: middle More details of `reactable` can be found at https://glin.github.io/reactable/index.html The appearance and display elements in the tables can be modified extensively. --- class: transition middle # Summary We've learned basics of interactive plots, primarily using `plotly`. Keep in mind the variety in types of interactions. --- # Think about Interactive plots can be for two very different purposes. .pull-left[ # Exploratory We are yet to understand what the data says. Make available as much of the data as possible, and range of interactions. ] .pull-right[ # Explanatory We understand the data, and we have identified the key findings that can be communicated to the audience. Here you can optimise the choice of interactions for the best communication. ] --- class: exercise middle hide-slide-number <i class="fas fa-users"></i> # <i class="fas fa-code"></i> Open `day2-exercise-01.Rmd` <center>
15
:
00
</center> --- # Learning more - Sievert (2019) [Interactive web-based data visualization with R, plotly, and shiny](https://plotly-r.com) - Fidan (2020) [Guide to Creating Interactive Maps in R](https://bookdown.org/eneminef/DRR_Bookdown/) - [RStudio's htmlwidgets gallery](http://gallery.htmlwidgets.org) - [RStudio's crosstalk guide](https://rstudio.github.io/crosstalk/) - R interface to javascript library DataTables, [DT](https://rstudio.github.io/DT/) - Interactive data tables for R, based on React, [reactable](https://glin.github.io/reactable/index.html) --- class: font_smaller background-color: #e5e5e5 # Session Information .overflow-scroll.h-80[ ```r devtools::session_info() ``` ``` ## ─ Session info ─────────────────────────────────────────────────────────────── ## setting value ## version R version 4.1.0 (2021-05-18) ## os macOS Big Sur 10.16 ## system x86_64, darwin17.0 ## ui X11 ## language (EN) ## collate en_AU.UTF-8 ## ctype en_AU.UTF-8 ## tz Australia/Melbourne ## date 2021-12-09 ## ## ─ Packages ─────────────────────────────────────────────────────────────────── ## package * version date lib ## anicon 0.1.0 2021-07-14 [1] ## assertthat 0.2.1 2019-03-21 [1] ## backports 1.2.1 2020-12-09 [1] ## base64enc 0.1-3 2015-07-28 [1] ## bitops 1.0-7 2021-04-24 [1] ## broom 0.7.9 2021-07-27 [1] ## bslib 0.3.1 2021-10-06 [1] ## cachem 1.0.6 2021-08-19 [1] ## callr 3.7.0 2021-04-20 [1] ## cellranger 1.1.0 2016-07-27 [1] ## class 7.3-19 2021-05-03 [1] ## classInt 0.4-3 2020-04-07 [1] ## cli 3.1.0 2021-10-27 [1] ## colorspace 2.0-2 2021-06-24 [1] ## countdown 0.3.5 2021-07-14 [1] ## crayon 1.4.2 2021-10-29 [1] ## crosstalk * 1.2.0 2021-11-04 [1] ## data.table 1.14.2 2021-09-27 [1] ## DBI 1.1.1 2021-01-15 [1] ## dbplyr 2.1.1 2021-04-06 [1] ## desc 1.4.0 2021-09-28 [1] ## devtools 2.4.2 2021-06-07 [1] ## digest 0.6.28 2021-09-23 [1] ## dplyr * 1.0.7.9000 2021-11-30 [1] ## DT * 0.20 2021-11-15 [1] ## e1071 1.7-9 2021-09-16 [1] ## ellipsis 0.3.2 2021-04-29 [1] ## evaluate 0.14 2019-05-28 [1] ## fansi 0.5.0 2021-05-25 [1] ## farver 2.1.0 2021-02-28 [1] ## fastmap 1.1.0 2021-01-25 [1] ## forcats * 0.5.1 2021-01-27 [1] ## fs 1.5.0 2020-07-31 [1] ## generics 0.1.1 2021-10-25 [1] ## geosphere 1.5-10 2019-05-26 [1] ## GGally * 2.1.2 2021-06-21 [1] ## ggmap * 3.0.0 2019-02-05 [1] ## ggplot2 * 3.3.5 2021-06-25 [1] ## ggthemes * 4.2.4 2021-01-20 [1] ## glue 1.5.0 2021-11-07 [1] ## gtable 0.3.0 2019-03-25 [1] ## haven 2.4.1 2021-04-23 [1] ## here 1.0.1 2020-12-13 [1] ## highr 0.9 2021-04-16 [1] ## hms 1.1.1 2021-09-26 [1] ## htmltools 0.5.2 2021-08-25 [1] ## htmlwidgets 1.5.4 2021-09-08 [1] ## httr 1.4.2 2020-07-20 [1] ## icon 0.1.0 2021-07-14 [1] ## jpeg 0.1-9 2021-07-24 [1] ## jquerylib 0.1.4 2021-04-26 [1] ## jsonlite 1.7.2 2020-12-09 [1] ## KernSmooth 2.23-20 2021-05-03 [1] ## knitr 1.36 2021-09-29 [1] ## labeling 0.4.2 2020-10-20 [1] ## lattice 0.20-44 2021-05-02 [1] ## lazyeval 0.2.2 2019-03-15 [1] ## leaflet * 2.0.4.1 2021-01-07 [1] ## lifecycle 1.0.1 2021-09-24 [1] ## lubridate * 1.8.0 2021-10-07 [1] ## magrittr 2.0.1 2020-11-17 [1] ## memoise 2.0.1 2021-11-26 [1] ## modelr 0.1.8 2020-05-19 [1] ## munsell 0.5.0 2018-06-12 [1] ## palmerpenguins * 0.1.0 2020-07-23 [1] ## pillar 1.6.4 2021-10-18 [1] ## pkgbuild 1.2.0 2020-12-15 [1] ## pkgconfig 2.0.3 2019-09-22 [1] ## pkgload 1.2.1 2021-04-06 [1] ## plotly * 4.10.0 2021-10-09 [1] ## plyr 1.8.6 2020-03-03 [1] ## png 0.1-7 2013-12-03 [1] ## prettyunits 1.1.1 2020-01-24 [1] ## processx 3.5.2 2021-04-30 [1] ## progress 1.2.2 2019-05-16 [1] ## proxy 0.4-26 2021-06-07 [1] ## ps 1.6.0 2021-02-28 [1] ## purrr * 0.3.4 2020-04-17 [1] ## R6 2.5.1 2021-08-19 [1] ## RColorBrewer * 1.1-2 2014-12-07 [1] ## Rcpp 1.0.7 2021-07-07 [1] ## reactable * 0.2.3 2020-10-04 [1] ## reactR 0.4.4 2021-02-22 [1] ## readr * 2.1.0 2021-11-11 [1] ## readxl 1.3.1 2019-03-13 [1] ## remotes 2.4.0 2021-06-02 [1] ## reprex 2.0.0 2021-04-02 [1] ## reshape 0.8.8 2018-10-23 [1] ## RgoogleMaps 1.4.5.3 2020-02-12 [1] ## rjson 0.2.20 2018-06-08 [1] ## rlang 0.99.0.9001 2021-11-30 [1] ## rmarkdown 2.11.3 2021-10-18 [1] ## rprojroot 2.0.2 2020-11-15 [1] ## rstudioapi 0.13 2020-11-12 [1] ## rvest 1.0.1 2021-07-26 [1] ## sass 0.4.0 2021-05-12 [1] ## scales 1.1.1 2020-05-11 [1] ## sessioninfo 1.1.1 2018-11-05 [1] ## sf 1.0-4 2021-11-14 [1] ## sp 1.4-6 2021-11-14 [1] ## stringi 1.7.6 2021-11-29 [1] ## stringr * 1.4.0 2019-02-10 [1] ## sugarbag * 0.1.3 2020-10-26 [1] ## testthat 3.0.4 2021-07-01 [1] ## tibble * 3.1.6 2021-11-07 [1] ## tidyr * 1.1.4 2021-09-27 [1] ## tidyselect 1.1.1 2021-04-30 [1] ## tidyverse * 1.3.1 2021-04-15 [1] ## tzdb 0.2.0 2021-10-27 [1] ## units 0.7-2 2021-06-08 [1] ## usethis 2.1.0 2021-10-16 [1] ## utf8 1.2.2 2021-07-24 [1] ## vctrs 0.3.8 2021-04-29 [1] ## viridisLite 0.4.0 2021-04-13 [1] ## whisker 0.4 2019-08-28 [1] ## withr 2.4.2 2021-04-18 [1] ## wordcloud * 2.6 2018-08-24 [1] ## xaringan 0.22 2021-06-23 [1] ## xfun 0.28 2021-11-04 [1] ## xml2 1.3.2 2020-04-23 [1] ## yaml 2.2.1 2020-02-01 [1] ## source ## Github (emitanaka/anicon@0b756df) ## CRAN (R 4.1.0) ## CRAN (R 4.1.0) ## CRAN (R 4.1.0) ## CRAN (R 4.1.0) ## CRAN (R 4.1.0) ## CRAN (R 4.1.0) ## CRAN (R 4.1.0) ## CRAN (R 4.1.0) ## CRAN (R 4.1.0) ## CRAN (R 4.1.0) ## CRAN (R 4.1.0) ## CRAN (R 4.1.0) ## CRAN (R 4.1.0) ## Github (gadenbuie/countdown@a544fa4) ## CRAN (R 4.1.0) ## CRAN (R 4.1.0) ## CRAN (R 4.1.0) ## CRAN (R 4.1.0) ## CRAN (R 4.1.0) ## CRAN (R 4.1.0) ## CRAN (R 4.1.0) ## CRAN (R 4.1.0) ## Github (tidyverse/dplyr@3d61d99) ## CRAN (R 4.1.0) ## CRAN (R 4.1.0) ## CRAN (R 4.1.0) ## CRAN (R 4.1.0) ## CRAN (R 4.1.0) ## CRAN (R 4.1.0) ## CRAN (R 4.1.0) ## CRAN (R 4.1.0) ## CRAN (R 4.1.0) ## CRAN (R 4.1.0) ## CRAN (R 4.1.0) ## CRAN (R 4.1.0) ## CRAN (R 4.1.0) ## CRAN (R 4.1.0) ## CRAN (R 4.1.0) ## CRAN (R 4.1.0) ## CRAN (R 4.1.0) ## CRAN (R 4.1.0) ## CRAN (R 4.1.0) ## CRAN (R 4.1.0) ## CRAN (R 4.1.0) ## CRAN (R 4.1.0) ## CRAN (R 4.1.0) ## CRAN (R 4.1.0) ## Github (emitanaka/icon@8458546) ## CRAN (R 4.1.0) ## CRAN (R 4.1.0) ## CRAN (R 4.1.0) ## CRAN (R 4.1.0) ## CRAN (R 4.1.0) ## CRAN (R 4.1.0) ## CRAN (R 4.1.0) ## CRAN (R 4.1.0) ## CRAN (R 4.1.0) ## CRAN (R 4.1.0) ## CRAN (R 4.1.0) ## CRAN (R 4.1.0) ## CRAN (R 4.1.0) ## CRAN (R 4.1.0) ## CRAN (R 4.1.0) ## CRAN (R 4.1.0) ## CRAN (R 4.1.0) ## CRAN (R 4.1.0) ## CRAN (R 4.1.0) ## CRAN (R 4.1.0) ## CRAN (R 4.1.0) ## CRAN (R 4.1.0) ## CRAN (R 4.1.0) ## CRAN (R 4.1.0) ## CRAN (R 4.1.0) ## CRAN (R 4.1.0) ## CRAN (R 4.1.0) ## CRAN (R 4.1.0) ## CRAN (R 4.1.0) ## CRAN (R 4.1.0) ## CRAN (R 4.1.0) ## CRAN (R 4.1.0) ## CRAN (R 4.1.0) ## CRAN (R 4.1.0) ## CRAN (R 4.1.0) ## CRAN (R 4.1.0) ## CRAN (R 4.1.0) ## CRAN (R 4.1.0) ## CRAN (R 4.1.0) ## CRAN (R 4.1.0) ## CRAN (R 4.1.0) ## Github (r-lib/rlang@5aefc4a) ## Github (rstudio/rmarkdown@ebf0d09) ## CRAN (R 4.1.0) ## CRAN (R 4.1.0) ## CRAN (R 4.1.0) ## CRAN (R 4.1.0) ## CRAN (R 4.1.0) ## CRAN (R 4.1.0) ## CRAN (R 4.1.0) ## CRAN (R 4.1.0) ## CRAN (R 4.1.0) ## CRAN (R 4.1.0) ## CRAN (R 4.1.0) ## CRAN (R 4.1.0) ## CRAN (R 4.1.0) ## CRAN (R 4.1.0) ## CRAN (R 4.1.0) ## CRAN (R 4.1.0) ## CRAN (R 4.1.0) ## CRAN (R 4.1.0) ## CRAN (R 4.1.0) ## CRAN (R 4.1.0) ## CRAN (R 4.1.0) ## CRAN (R 4.1.0) ## CRAN (R 4.1.0) ## CRAN (R 4.1.0) ## CRAN (R 4.1.0) ## CRAN (R 4.1.0) ## CRAN (R 4.1.0) ## CRAN (R 4.1.0) ## CRAN (R 4.1.0) ## ## [1] /Library/Frameworks/R.framework/Versions/4.1/Resources/library ``` ] These slides are licensed under <br><center><a href="https://creativecommons.org/licenses/by-sa/3.0/au/"><img src="images/cc.svg" style="height:2em;"/><img src="images/by.svg" style="height:2em;"/><img src="images/sa.svg" style="height:2em;"/></a></center>