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-session2.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/d2bg3.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 2: Digging deeper into reactive elements in shiny</span> --> ] .center.shade_black.animated.bounceInUp.slower[ <br><br> ## Lesson 2: Digging deeper into reactive elements in shiny <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> --- class: transition middle # Outline Animation<br> Linking between plots<br> Using a `key` variable to link between plots --- class: transition middle # Animation --- .pull-left[ .monash-orange2[Animation] allows for controlled changes in a plot. It can provide more information to be displayed than is possible within a single plot. It can also .monash-orange2[draw attention] to specific parts of the plot. Human perception is fleeting, though, and prone to .monash-orange2[forgetting] what was just displayed. Keeping some elements persistent, possibly faint, or light coloured, can be useful for perceiving patterns of change. Think about what part of a plot would lend itself to animation, eg a time variable, or possibly a categorical variable. ] .pull-right[ Primary tools: `plotly`, `gganimate` <br><br> ```r # Schema for animation ggplot %>% animation %>% options (transition, speed, fade) ``` ] --- # ABS and Election data .font_small[
] <div class="tag center animated rubberBand" style="position:absolute;top:2%;left:12%;transform:rotate(-3deg);"> demo data for animation </div> .footnote[From the eechidna package, https://github.com/jforbes14/eechidna/] --- # Animation with plotly .left-code[ .font_small[ ```r abs_p <- ggplot(abs, aes( x=Mortgage, y=Owned, colour=State)) + * geom_point(aes(frame=year, * ids=UniqueID)) + scale_colour_brewer("", palette = "Dark2") *ggplotly(abs_p) ``` ]] .right-plot[
] --- # Animation with plotly .left-code[ .font_small[ ```r abs_p <- ggplot(abs, aes( x=Mortgage, y=Owned, colour=State)) + geom_point(aes(frame=year, ids=UniqueID)) + scale_colour_brewer("", palette = "Dark2") ggplotly(abs_p) %>% * animation_opts(transition=0) ``` ]] .right-plot[
] --- # Animation with plotly .left-code[ .font_small[ ```r abs_p <- ggplot(abs, aes( x=Mortgage, y=Owned, colour=State)) + geom_point(aes(frame=year, ids=UniqueID)) + scale_colour_brewer("", palette = "Dark2") ggplotly(abs_p) %>% * animation_opts(frame=1000, * transition=950, * easing="cubic") ``` ]] .right-plot[
] --- # Animation with plotly .left-code[ .font_small[ ```r abs_p2 <- ggplot(abs, aes( x=Mortgage, y=Owned, colour=State)) + * geom_point(aes(frame=year)) + scale_colour_brewer("", palette = "Dark2") ggplotly(abs_p2) %>% animation_opts(frame=1000, transition=950) ``` ] The `ids` match up the points from one frame to another. If they aren't set the transition can look chaotic. ] .right-plot[
] --- # Animation with plotly .left-code[ .font_small[ ```r abs_p <- ggplot(abs, aes( x=Mortgage, y=Owned, colour=State)) + geom_point(aes(frame=year, ids=UniqueID)) + scale_colour_brewer("", palette = "Dark2") ggplotly(abs_p) %>% * animation_slider(hide=TRUE) ``` ]] .right-plot[
] --- # Saving your animation .left-code[ .font_small[ ```r library(htmlwidgets) abs_ply <- ggplotly(abs_p, width=500, height=500) %>% animation_slider(hide=TRUE) *saveWidget(abs_ply, "abs_ply.html", * selfcontained = F) ``` ] <br><br> To embed it in the html document: `<iframe src="images/abs_ply.html" width="100%" height="500" </iframe>` ] .right-plot[ <iframe src="images/abs_ply.html" width="100%" height="500" </iframe> ] --- # Animation with gganimate <br><br> The `gganimate` package is recommended for more control of an animation. There are more choices for different transitions, easing, traces from previous position. <br> Construction follows the same as for `plotly`: generate your ggplot, specify the animation, add options. --- class: transition middle # Linking between plots --- # Using crosstalk to link information between plots Crosstalk extends htmlwidgets with a set of classes, functions, and conventions for implementing cross-widget interactions (currently, .monash-orange2[linked brushing] and .monash-orange2[filtering]). .pull-left[ .font_small[ ```r # Wrap data frame in SharedData sd <- SharedData$new( quakes[sample(nrow(quakes), * 100),]) # Use SharedData like a dataframe with Crosstalk-enabled widgets bscols( leaflet(sd) %>% addTiles() %>% addMarkers(), datatable(sd, class="compact", width="200")) ``` ]] .pull-right[ .font_small[
] ] --- # Mapping out the data analysis: ABS .font_small[
] --- # Mapping out the data analysis: ABS <br> <br> Think about the questions that might be answered with the data - Is the percentage of home ownership changing over the time period? - What is the relationship between home ownership and having a mortgage? - Is home ownership lower where there is higher unemployment? - Is there a difference across states in percentage of renters? --- # Trends over time .left-code[ .font_small[ ```r abs_long <- abs %>% pivot_longer("Mortgage":"Unemployed", names_to ="Statistic", values_to = "Percentage") ggplot(abs_long, aes(x=year, y=Percentage)) + geom_line(aes(group=UniqueID), alpha=0.5) + facet_wrap(~Statistic, scales="free_y") ``` ]] .right-plot[ <img src="images/day2-session1/unnamed-chunk-13-1.png" width="100%" style="display: block; margin: auto;" /> ] --- # Trends over time and linking .left-code[ .font_small[ ```r *abs_key <- highlight_key(abs_long, * ~UniqueID) *abs_p2 <- ggplot(abs_key, aes(x=year, y=Percentage)) + geom_line(aes(group=UniqueID), alpha=0.5) + facet_wrap(~Statistic, scales="free_y") abs_gg2 <- ggplotly(abs_p2, height = 600, width = 500) *highlight(abs_gg2) ``` ] <div align="right">
Click on a line
</div> ] .right-plot[
] --- # Linking control `highlight_key()` is an implementation of `crosstalk::SharedData()` `highlight()` controls the options for selection. --- # Trends over time and linking .left-code[ .font_small[ ```r abs_key2<- highlight_key(abs_long, * ~State) abs_p3 <- ggplot(abs_key2, aes(x=year, y=Percentage, * text=State)) + geom_line(aes(group=UniqueID), alpha=0.5) + facet_wrap(~Statistic, scales="free_y") abs_gg3 <- ggplotly(abs_p3, height = 600, width = 500) highlight(abs_gg3) ``` ] <div align="right">
Click on a line
</div> ] .right-plot[
] --- # Exploration vs explanation <center> .top10-color-box[These two displays were in support of exploration.] </center> <br><br><br><br> We didn't know a lot about the data. <br><br>Based on the data description we identified several questions of interest. <br><br>The linked plots assisted in answering the question about temporal trend, and also relative to state. <!-- Exercise: Make scatterplot of two variables and link the two plots using point to point linking --> --- # Special purpose linked plots .s500[ .font_small[ ```r library(tsibble) library(tsibbletalk) ## ---- tourism-shared tourism_shared <- tourism_monthly %>% as_shared_tsibble( spec = (State / Region) * Purpose) ## ---- plotly-key-tree p_l <- plotly_key_tree(tourism_shared, height = 1100, width = 800) ## ---- tourism-series p_tr <- tourism_shared %>% ggplot(aes(x = Month, y = Trips)) + geom_line(aes(group = Region), alpha = .5, size = .4) + facet_wrap(~ Purpose, scales = "free_y") + scale_x_yearmonth(date_breaks = "5 years", date_labels = "%Y") ## ---- tourism-scatter library(feasts) tourism_feat <- tourism_shared %>% features(Trips, feat_stl) p_br <- tourism_feat %>% ggplot(aes(x = trend_strength, y = seasonal_strength_year)) + geom_point(aes(group = Region), alpha = .8, size = 2) ## ---- tourism-multi subplot(p_l, subplot( ggplotly(p_tr, tooltip = "Region", width = 700, height = 800), ggplotly(p_br, tooltip = "Region", width = 700, height = 800), nrows = 2), widths = c(.4, .6)) %>% highlight(dynamic = TRUE) ``` ]] <div class="tag center animated rubberBand" style="position:absolute;top:2%;left:12%;transform:rotate(-3deg);"> demo </div> --- class: exercise middle hide-slide-number <i class="fas fa-users"></i> # <i class="fas fa-code"></i> Open `day2-exercise-02.Rmd` <center>
15
:
00
</center> --- # Learning more - Sievert (2019) [Interactive web-based data visualization with R, plotly, and shiny](https://plotly-r.com) - [RStudio's htmlwidgets gallery](http://gallery.htmlwidgets.org) - [RStudio's crosstalk guide](https://rstudio.github.io/crosstalk/) - [tsibbletalk](https://github.com/earowang/tsibbletalk) --- 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] ## anytime 0.3.9 2020-08-27 [1] ## assertthat 0.2.1 2019-03-21 [1] ## backports 1.2.1 2020-12-09 [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] ## 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] ## dendextend 1.15.1 2021-05-08 [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] ## distributional 0.2.2 2021-02-02 [1] ## dplyr * 1.0.7.9000 2021-11-30 [1] ## DT * 0.20 2021-11-15 [1] ## ellipsis 0.3.2 2021-04-29 [1] ## evaluate 0.14 2019-05-28 [1] ## fabletools * 0.3.1 2021-03-16 [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] ## feasts * 0.2.2 2021-06-03 [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] ## gganimate * 1.0.7 2020-10-15 [1] ## ggplot2 * 3.3.5 2021-06-25 [1] ## gifski 1.4.3-1 2021-05-02 [1] ## glue 1.5.0 2021-11-07 [1] ## gridExtra 2.3 2017-09-09 [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] ## httpuv 1.6.3 2021-09-09 [1] ## httr 1.4.2 2020-07-20 [1] ## icon 0.1.0 2021-07-14 [1] ## jquerylib 0.1.4 2021-04-26 [1] ## jsonlite 1.7.2 2020-12-09 [1] ## knitr 1.36 2021-09-29 [1] ## labeling 0.4.2 2020-10-20 [1] ## later 1.3.0 2021-08-18 [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] ## mime 0.12 2021-09-28 [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] ## prettyunits 1.1.1 2020-01-24 [1] ## processx 3.5.2 2021-04-30 [1] ## progress 1.2.2 2019-05-16 [1] ## promises 1.2.0.1 2021-02-11 [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] ## 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] ## 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] ## shiny 1.7.1 2021-10-02 [1] ## stringi 1.7.6 2021-11-29 [1] ## stringr * 1.4.0 2019-02-10 [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] ## tsibble * 1.0.1 2021-04-12 [1] ## tsibbletalk * 0.1.0 2020-10-02 [1] ## tweenr 1.0.2 2021-03-23 [1] ## tzdb 0.2.0 2021-10-27 [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] ## viridis 0.6.1 2021-05-11 [1] ## viridisLite 0.4.0 2021-04-13 [1] ## whisker 0.4 2019-08-28 [1] ## withr 2.4.2 2021-04-18 [1] ## xaringan 0.22 2021-06-23 [1] ## xfun 0.28 2021-11-04 [1] ## xml2 1.3.2 2020-04-23 [1] ## xtable 1.8-4 2019-04-21 [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) ## 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) ## 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) ## 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) ## 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) ## 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>