class: center, middle, inverse, title-slide .title[ # Building interactive documents with Rmarkdown tools, learnr, flexdashboard ] .subtitle[ ## SISBID 2024 <br> <a href="https://github.com/dicook/SISBID" class="uri">https://github.com/dicook/SISBID</a> ] .author[ ### Di Cook (<a href="mailto:dicook@monash.edu" class="email">dicook@monash.edu</a>) <br> Heike Hofmann (<a href="mailto:hhhofmann4@unl.edu" class="email">hhhofmann4@unl.edu</a>) <br> Susan Vanderplas (<a href="mailto:susan.vanderplas@unl.edu" class="email">susan.vanderplas@unl.edu</a>) ] .date[ ### 08/14-16/2024 ] --- class: inverse middle # Data dashboard A `flexdashboard` is an Rmarkdown format shiny app. It adds more control over plot elements and is more focused on the data analysis than on a study or instructional materials. --- # Data dashboard .pull-left[ A `flexdashboard` allows you to create an interactive interface to a data set, that allows communicating a lot of information visually and numerically, and the flexibility for the user to explore their own choice of aspects of the data. To get started, make sure you have the `flexdashboard` package installed on your computer. ``` install.packages("flexdashboard") ``` ] .pull-right[ Then create a "New R Markdown" document, "From Template", "Interactive Tutorial". <img src="images/flexdashboard.png" width="80%" /> ] --- # Basic dashboard - Check that the document compiles, by clicking `Knit` - Modify the title and author ``` --- title: "TB incidence around the globe" author: "by Di Cook" output: flexdashboard::flex_dashboard: orientation: columns vertical_layout: fill --- ``` --- # Components This creates a box or a pane for a plot or results ``` ### Chart 1 ``` This sets up columns ``` Column {data-width=600} ------------------------------------- ``` --- class:inverse ## Your turn! - Change the default layout in your flexdashboard to have two plots in the left column. - Make each column equal width - Pick four countries and create the interactive chart of temporal trend. (We used India in the learnr tutorial. You can copy this code, and choose another three.) - Change the tab titles to reflect what country is displayed. - Add several sentences on each pane about the data, and some things they should learn about TB incidence in that country. --- # Adding pages and tabs A new page (tab) can be added using ``` Page 1 ===================================== ``` Add a second page to your flexdashboard that focuses on one country and has - a data table showing counts for year, age, sex - a facetted barchart of counts by year, by age and sex --- class: inverse middle # Upload your dashboard to your shiny.apps.io account --- class: inverse middle # Interactive tutorial A set of notes with interactive plots, quizzes, and coding exercises. --- # `learnr` interactive tutorial .pull-left[ This is a really simple way to build your plots into an online document. It has some great features like interactive multiple choice quizzes, coding exercises, and can incorporate interactive shiny elements like scrollbars on plots. 🛑 To get started, make sure you have the `learnr` package installed on your computer. ``` install.packages("learnr") ``` ✅ Then create a "New R Markdown" document, "From Template", "Interactive Tutorial". ] .pull-right[ <img src="images/learnr.png" width="100%" /> ] --- # Basic tutorial 🛑 Check that the document compiles, by clicking `Run Document` <br> <br> ✅ Modify the title and author ``` --- title: "TB Incidence Around the Globe" author: "Di Cook" output: learnr::tutorial runtime: shiny_prerendered --- ``` <br> <br> 🛑 Check that the document compiles, by clicking `Run Document` --- # Write the first section ✅ Set the first section to be a description of the data ``` ## Data description This is current tuberculosis data taken from [WHO](http://www.who.int/tb/country/data/download/en/), the case notifications table. The data looks like this: ``` 🛑 Check that the document compiles, by clicking `Run Document` <br> <br> ✅ Create a `data` directory in your tutorial folder, and add the `TB_notifications_2019-07-01.csv` data into this. --- ✅ Next, add a block of R code to read the data, and display the data in the page. This is the same code we have used earlier for working with the TB data, with the exception of using the `DT` package to display the data in the output html. ``` library(tidyverse) library(DT) tb <- read_csv(here::here("data/TB_notifications_2019-07-01.csv")) %>% dplyr::select(country, iso3, year, new_sp_m04:new_sp_fu) %>% pivot_longer(cols=new_sp_m04:new_sp_fu, names_to="sexage", values_to="count") %>% mutate(sexage = str_replace(sexage, "new_sp_", "")) %>% mutate(sex=substr(sexage, 1, 1), age=substr(sexage, 2, length(sexage))) %>% dplyr::select(-sexage) %>% filter(country == "United States of America") %>% filter(!(age %in% c("04", "014", "514", "u"))) %>% filter(year > 1996, year < 2013) datatable(tb) ``` <br> <br> 🛑 Check that the document compiles, by clicking `Run Document` --- # Add a plot ✅ Make a separate section titled "Incidence", and add the code to make a plot, like the following ``` ggplot(tb, aes(x=year)) + geom_bar(aes(weight = count)) ``` 🛑 Check that the document compiles, by clicking `Run Document` --- # Polishing the data description Loading the libraries generates some messages and warnings on the page. This is good interactively, but it is distracting in the web page. ``` ## ── Attaching packages ──────────────────────────────────────────── tidyverse 1.2.1 ── ## ✔ ggplot2 3.2.0 ✔ purrr 0.3.2 ## ✔ tibble 2.1.3 ✔ dplyr 0.8.3 ... ## Google's Terms of Service: https://cloud.google.com/maps-platform/terms/. ## Please cite ggmap if you use it! See citation("ggmap") for details. ## Warning: Removed 619 rows containing missing values (geom_point). ``` We need to change the setup chunk options to turn these off: ``` library(learnr) knitr::opts_chunk$set( echo = FALSE, message = FALSE, warning = FALSE, error = FALSE) ``` 🛑 Check that the document compiles, by clicking `Run Document` --- # Building quizzes An example quiz is provided in the template. Note that the format of the R code is - `quiz()` wraps a set of questions. - `question()` contains the text of the question, and is coupled with multiple `answer()` elements with possible choices. - At least one of the answers needs to be noted as correct with `, correct = TRUE`. There can be more than one correct answer. ``` quiz( question("Which package contains functions for installing other R packages?", answer("base"), answer("tools"), answer("utils", correct = TRUE), answer("codetools") ) ) ``` <span class=" faa-flash animated-hover " style=" color:#FA700A; display: -moz-inline-stack; display: inline-block; transform: rotate(0deg);">Try making a question about the TB data on the Incidence tab.</span> 🛑 Check that the document compiles, by clicking `Run Document` --- # Exercises in coding Adding `exercise = TRUE` on a code chunk provides an R console window where readers can type R code, and check for correctness. The template provides several example exercises. 1. Move these into a second section of the document. 2. Add a coding challenge that asks the reader to make a filter for the data to select just a single year. Click the "Run document" to make sure it works 3. Add a hint, "you want to use the filter function" 4. Change the hint to a solution, that provides the correct code 🛑 Check that the document compiles, by clicking `Run Document` --- # Adding a shiny element Because this is an html document, interactive graphics can be incorporated. We'll add a section to use interactive plots to examine the temporal trend in TB incidence. ``` library(plotly) p <- tb %>% group_by(year, age) %>% summarise(p_males = count[sex=="m"]/sum(count)) %>% ggplot() + geom_point(aes(x=age, y=p_males, frame=year)) ggplotly(p) ``` 🛑 Check that the document compiles, by clicking `Run Document` --- # Styling and cuteness Use your emoji and anicon skills to add some friendly elements to the notes. ``` set.seed(20190709) emo::ji("fantasy") emo::ji("clock") ``` ``` anicon::nia("You've got 30 seconds!", colour="#FA700A", anitype="hover") anicon::faa("hand-paper", animate="spin", grow=20, color="#B78ED2", position=c(0,0,0,200)) ``` 🛑 Check that the document compiles, by clicking `Run Document` --- class: inverse middle # Upload your tutorial to your shiny.apps.io account --- # Resources - [Introducing learnr, Garret Grolemund](https://blog.rstudio.com/2017/07/11/introducing-learnr/) - [flexdashboard: Easy interactive dashboards for R](https://rmarkdown.rstudio.com/flexdashboard/) - [R Markdown](https://rmarkdown.rstudio.com/) - [Interactive web-based data visualization with R, plotly, and shiny, Carson Sievert](https://plotly-r.com/index.html) --- # Share and share alike <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png" /></a><br />This work is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License</a>.