Advanced data visualization with R Workshop Day 2

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;">
 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-session3.pdf>PDF </a>. 
</div>

.white[Push the **right arrow key** to see the next slide.]

---

count: false
background-image: url(images/d2bg4.jpg)
background-size: cover
class: hide-slide-number title-slide

.item.center[

# Advanced data visualization with R Workshop Day 2

]

.center.shade_black.animated.bounceInUp.slower[
 
## Lesson 3: Web apps to deliver effective data visualisation

Presented by Di Cook

Department of Econometrics and Business Statistics

<img src="images/monash-one-line-reversed.png" style="width:500px"> 
 dicook@monash.edu
 @visnut

.bottom_abs.width100.bg-black[
8-9th Dec 2021 @ Statistical Society of Australia | Zoom
]

]

</div>

---
class: transition middle

# Outline

Mapping out an app

Choices in packages for apps

Building a shiny app

---
# learningtower: PISA Scores

.s500[.font_small[

```r
load(here::here("data/student.rda"))
student %>% glimpse()
```

```
## Rows: 2,929,621
## Columns: 22
## $ year <fct> 2000, 2000, 2000, 2000, 2000, 2000, 2000, 2000, 2000, 2000…
## $ country <fct> ALB, ALB, ALB, ALB, ALB, ALB, ALB, ALB, ALB, ALB, ALB, ALB…
## $ school_id <fct> 1001, 1001, 1001, 1001, 1001, 1001, 1001, 1001, 1001, 1001…
## $ student_id <fct> 1, 3, 6, 8, 11, 12, 17, 20, 21, 22, 24, 27, 28, 29, 30, 32…
## $ mother_educ <fct> NA, NA, NA, NA, NA, NA, NA, NA, NA, NA, NA, NA, NA, NA, NA…
## $ father_educ <fct> NA, NA, NA, NA, NA, NA, NA, NA, NA, NA, NA, NA, NA, NA, NA…
## $ gender <fct> female, female, male, female, female, female, male, female…
## $ computer <fct> NA, NA, NA, NA, NA, NA, NA, NA, NA, NA, NA, NA, NA, NA, NA…
## $ internet <fct> no, no, no, no, no, no, yes, no, no, no, no, no, no, no, n…
## $ math <dbl> 324.35, NA, NA, 235.79, NA, 290.74, NA, 266.31, NA, NA, 29…
## $ read <dbl> 397.87, 368.41, 294.17, 241.49, 287.16, 307.84, 181.73, 33…
## $ science <dbl> 345.66, 385.83, 327.94, 341.09, 307.15, 277.04, 279.19, 46…
## $ stu_wgt <dbl> 2.1600, 2.1600, 2.1600, 2.1600, 2.1600, 2.1600, 2.1600, 2.…
## $ desk <fct> yes, yes, yes, yes, yes, yes, NA, yes, yes, yes, yes, yes,…
## $ room <fct> no, yes, yes, yes, yes, yes, yes, no, yes, yes, yes, yes, …
## $ dishwasher <fct> no, no, no, no, no, yes, no, yes, no, no, no, no, no, no, …
## $ television <fct> 1, 2, 2, 1, 2, 1, 1, 1, 1, 2, 1, 1, 1, 1, 2, 1, 1, 3+, 2, …
## $ computer_n <fct> 3+, 0, 0, 1, 0, NA, 0, 0, NA, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1…
## $ car <fct> 1, 0, 0, 0, 1, 3+, 0, NA, NA, 0, 0, 0, 0, 0, 0, 1, 0, 1, 0…
## $ book <fct> 11-50, 1-10, 1-10, 11-50, 11-50, 11-50, 1-10, 1-10, 51-100…
## $ wealth <dbl> -0.60, -1.84, -1.46, -1.46, -1.13, -0.40, -1.84, -1.57, -1…
## $ escs <dbl> 0.10575583, -1.42404458, -1.30668386, -0.46246393, -1.2816…
```
]]

---
# Mapping out an app

Your goal is to make the .monash-orange2[analysis easy] for someone without coding skills.

Decide on what key insights might be made, and .monash-orange2[structure the app] around these, eg

- How do scores vary between countries?
- Is there a difference between genders?
- Are there trends in scores over time?

Keep in mind that an app needs to be .monash-orange2[responsive]. Users need the change to happen very quickly.

---
# Web apps with R

There are many options for making web apps using R, including:

- shiny 
- learnr 
- flexdashboard 
- shinydashboard

---
# shiny is...

.flex[
.item[
<img src="https://swag.rstudio.com/uploads/1/3/1/3/131335021/s815253891256106552_p7_i2_w660.png?width=1200" style="width:200px">
]
.item[
- an R package that makes it easy to build interactive web apps straight from R. 
- You can also extend your Shiny apps with CSS themes, htmlwidgets, and JavaScript actions.
- It can be used to build dashboards.

]]

---
# learnr is...
.flex[
.item[
<img src="https://rstudio.github.io/learnr/logo.png" style="width:200px">
]
.item[
- an R package that makes it easy to turn any R Markdown document into an interactive tutorial.
- Tutorials consist of content along with interactive components for checking and reinforcing understanding. 
- Tutorials can include any or all of the following:
 - Narrative, figures, illustrations, and equations.
 - Code exercises (R code chunks that users can edit and execute directly).
 - Quiz questions.
 - Videos (supported services include YouTube and Vimeo).
 - Interactive Shiny components.
]]

---
# flexdashboard is...

.flex[
.item[
<img src="https://pkgs.rstudio.com/flexdashboard/reference/figures/logo.png" style="width:200px">
]
.item[

- Rmarkdown based, allows multi-page tabbed layouts
- Static dashboards, but can use `shiny` with `runtime: shiny` in the YAML.
- Easy to customise, like writing a regular `html_document`
- Easy to deploy
]]

---
# shinydashboard is...

- `shiny` based but introduces dashboard visual motifs
- Interactive or static dashboards but requires you to know how to set up a `shiny` app
- Harder to customise but could be used to build fully fledged web apps

---
class: transition middle

# Start with shiny

---
# Single file: app.r

.left-code[
Create a new directory, and a R script file called `app1.r`, with these contents:

.font_small[

```r
library(shiny)
ui <- fluidPage(
 "Exploring PISA Test scores"
)
server <- function(input, 
 output, 
 session) {
}
shinyApp(ui, server)
```
]

]

.right-plot[

.monash-blue2[This app simply writes "Exploring PISA Test scores" into a new window.]

Alternatively, using the RStudio window, you can create a new app from template.

Or, you can start from an app that mostly has the features you want for your own app.

]

---
background-color: #008A25
class: no-header-strip middle

# 🔧 YOUR TURN

In your R Studio window, open `app1.r` file, and click `Run App`.

---
# App structure

There are two main parts of a shiny app:

- What we see and interact with: 
 - .monash-orange2[user interface (ui)]: layout with user input and (plot) output 
- What is going on underneath: 
 - .monash-orange2[the server]: glue between user input and output

---

# Shiny inputs

Shiny has many different input options, see the [widget gallery](https://shiny.rstudio.com/gallery/widget-gallery.html):

- `actionButton()` - creates a clickable button
- `selectInput()` create a select list 
- `checkboxInput()` and `checkboxGroupInput()`
- `dateInput()` - calendar to select a date
- `dateRangeInput()` - select a range of dates
- `fileInput()` - upload a file
- `numericInput()` - input a numeric value
- `radioButtons()` - select one or more items
- `sliderInput()` - slide along a range of values
- `textInput()` - input a string

---
# Shiny outputs

These are what is drawn, written or shown in your app:

- `renderDataTable()` - outputs an interactive, sortable data table
- `htmlOutput()` - output html elements
- `plotlyOutput()` - output with .monash-blue2[plotly] elements
- `renderPlot()` - output an R plot
- `renderPlotly()` - output .monash-blue2[plotly] interactive plot
- `renderPrint()` - output text from print() in R
- `renderTable()` - output an HTML table
- `renderText()` - output text from R
- `renderUI()` - output a custom part of the user interface
- `renderImage()` - print an image to the page

---
# PISA scores app

.pull-left[
Our app will have these elements:

- .monash-blue2[Purpose]: Compare temporal trend in scores across countries
- .monash-blue2[UI]: 
    - Menu to choose subject: math, read, science
    - Text entry/menu to select country to highlight
- .monash-blue2[Output (server)]: time plots of scores for each country
]

.pull-right[
.monash-orange2[Pre-process data] prior to making app, to have smaller, focused data to help with .monash-orange2[responsiveness].

.font_small[

```r
data(countrycode)
student_app <- student %>%
 group_by(year, country) %>%
 summarise(math = weighted.mean(math,
 w=stu_wgt, na.rm=TRUE),
 read = weighted.mean(read,
 w=stu_wgt, na.rm=TRUE),
 science = weighted.mean(science,
 w=stu_wgt, na.rm=TRUE),
 .groups = "drop") %>%
 left_join(countrycode) %>%
 select(year, country_name, math, science, read) %>%
 rename(country = country_name) %>%
 mutate(year = as.numeric(as.character(year)))
save(student_app, file=here::here("data/student_app.rda"))
```
]]

---
background-color: #008A25
class: no-header-strip middle

# 🔧 YOUR TURN

1. In your RStudio Window open and run the `pisa_app`
2. Change the highlight colour and re-run
3. ADVANCED: Change the output to be an interactive plotly

---
# Trouble-shooting

.pull-left[

Tracebacks printed into the Console are your friend. These will pinpoint the location where the code is failing.

```
Error in *: non-numeric argument to binary operator
 169: g [app.R#4]
 168: f [app.R#3]
 167: renderPlot [app.R#13]
 165: func
 125: drawPlot
 111: <reactive:plotObj>
 95: drawReactive
 82: renderFunc
 81: output$plot
 1: runApp
```
]

.pull-right[
Alternatively, you can add `browser()` to any part of the code. This stops at that point and allows you to step through line by line, and check what values are being created.

```
if (input$value == "a") {
 browser()
}
# Or maybe
if (my_reactive() < 0) {
 browser()
}
```
]

---
background-color: #008A25
class: no-header-strip middle

# 🔧 YOUR TURN

1. We are going to trouble shoot an error. Change the `selectInput` on line 13 to `menuInput`. 
2. Run the app, and watch the Console window. You should see an error, pointing to line 13.

---
# Customising with themes and css

A range of pre-made themes is available, and can be viewed [here](https://bootswatch.com/). THese can be applied to your app in the `ui` setup:

```r
ui <- fluidPage(
 theme = 
* bslib::bs_theme(bootswatch = "sandstone"),
 titlePanel("Exploring PISA Test scores"),
```

Full control over the design can be done using `css` and a good place to start is [Nick Strayer's RStudio post](https://shiny.rstudio.com/articles/css.html).

---
# Deploying your app

- Sign up for an account on [https://www.shinyapps.io/](https://www.shinyapps.io/)
- Authenticate your account
- You may need to do some setup in your session, e.g. install the library `rsconnect`

---
background-color: #008A25
class: no-header-strip middle

# 🔧 YOUR TURN

Have a go at deploying the `pisa_app`

---
# Embedding apps in websites, slides

A .monash-blue2[shiny app] can be embedded into a presentation slide or report using:

```r
knitr::include_app(
  "https://ebsmonash.shinyapps.io/VICfire/", 
  height = "550px") 
```

A .monash-blue2[standalone interactive graphic] saved to a file can be embedded into a presenation or report using:

`<iframe 
src="images/abs_ply.html" 
width="100%" height="500" 
</iframe>`

Note: The supporting `lib` directory needs to be in the same location as the main file.

---
# Learning more

* https://rmarkdown.rstudio.com/flexdashboard/
* https://rstudio.github.io/shinydashboard/get_started.html
* https://mastering-shiny.org/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-08                  
## 
## ─ Packages ───────────────────────────────────────────────────────────────────
##  package       * version     date       lib source                            
##  anicon          0.1.0       2021-07-14 [1] Github (emitanaka/anicon@0b756df) 
##  assertthat      0.2.1       2019-03-21 [1] CRAN (R 4.1.0)                    
##  backports       1.2.1       2020-12-09 [1] CRAN (R 4.1.0)                    
##  broom           0.7.9       2021-07-27 [1] CRAN (R 4.1.0)                    
##  bslib           0.3.1       2021-10-06 [1] CRAN (R 4.1.0)                    
##  cachem          1.0.6       2021-08-19 [1] CRAN (R 4.1.0)                    
##  callr           3.7.0       2021-04-20 [1] CRAN (R 4.1.0)                    
##  cellranger      1.1.0       2016-07-27 [1] CRAN (R 4.1.0)                    
##  cli             3.1.0       2021-10-27 [1] CRAN (R 4.1.0)                    
##  colorspace      2.0-2       2021-06-24 [1] CRAN (R 4.1.0)                    
##  crayon          1.4.2       2021-10-29 [1] CRAN (R 4.1.0)                    
##  DBI             1.1.1       2021-01-15 [1] CRAN (R 4.1.0)                    
##  dbplyr          2.1.1       2021-04-06 [1] CRAN (R 4.1.0)                    
##  desc            1.4.0       2021-09-28 [1] CRAN (R 4.1.0)                    
##  devtools        2.4.2       2021-06-07 [1] CRAN (R 4.1.0)                    
##  digest          0.6.28      2021-09-23 [1] CRAN (R 4.1.0)                    
##  dplyr         * 1.0.7.9000  2021-11-30 [1] Github (tidyverse/dplyr@3d61d99)  
##  ellipsis        0.3.2       2021-04-29 [1] CRAN (R 4.1.0)                    
##  emo             0.0.0.9000  2021-07-14 [1] Github (hadley/emo@3f03b11)       
##  evaluate        0.14        2019-05-28 [1] CRAN (R 4.1.0)                    
##  fansi           0.5.0       2021-05-25 [1] CRAN (R 4.1.0)                    
##  fastmap         1.1.0       2021-01-25 [1] CRAN (R 4.1.0)                    
##  forcats       * 0.5.1       2021-01-27 [1] CRAN (R 4.1.0)                    
##  fs              1.5.0       2020-07-31 [1] CRAN (R 4.1.0)                    
##  generics        0.1.1       2021-10-25 [1] CRAN (R 4.1.0)                    
##  ggplot2       * 3.3.5       2021-06-25 [1] CRAN (R 4.1.0)                    
##  glue            1.5.0       2021-11-07 [1] CRAN (R 4.1.0)                    
##  gtable          0.3.0       2019-03-25 [1] CRAN (R 4.1.0)                    
##  haven           2.4.1       2021-04-23 [1] CRAN (R 4.1.0)                    
##  here            1.0.1       2020-12-13 [1] CRAN (R 4.1.0)                    
##  hms             1.1.1       2021-09-26 [1] CRAN (R 4.1.0)                    
##  htmltools       0.5.2       2021-08-25 [1] CRAN (R 4.1.0)                    
##  httr            1.4.2       2020-07-20 [1] CRAN (R 4.1.0)                    
##  icon            0.1.0       2021-07-14 [1] Github (emitanaka/icon@8458546)   
##  jquerylib       0.1.4       2021-04-26 [1] CRAN (R 4.1.0)                    
##  jsonlite        1.7.2       2020-12-09 [1] CRAN (R 4.1.0)                    
##  knitr           1.36        2021-09-29 [1] CRAN (R 4.1.0)                    
##  learningtower * 1.0.0       2021-09-06 [1] CRAN (R 4.1.0)                    
##  lifecycle       1.0.1       2021-09-24 [1] CRAN (R 4.1.0)                    
##  lubridate       1.8.0       2021-10-07 [1] CRAN (R 4.1.0)                    
##  magrittr        2.0.1       2020-11-17 [1] CRAN (R 4.1.0)                    
##  memoise         2.0.1       2021-11-26 [1] CRAN (R 4.1.0)                    
##  modelr          0.1.8       2020-05-19 [1] CRAN (R 4.1.0)                    
##  munsell         0.5.0       2018-06-12 [1] CRAN (R 4.1.0)                    
##  pillar          1.6.4       2021-10-18 [1] CRAN (R 4.1.0)                    
##  pkgbuild        1.2.0       2020-12-15 [1] CRAN (R 4.1.0)                    
##  pkgconfig       2.0.3       2019-09-22 [1] CRAN (R 4.1.0)                    
##  pkgload         1.2.1       2021-04-06 [1] CRAN (R 4.1.0)                    
##  prettyunits     1.1.1       2020-01-24 [1] CRAN (R 4.1.0)                    
##  processx        3.5.2       2021-04-30 [1] CRAN (R 4.1.0)                    
##  ps              1.6.0       2021-02-28 [1] CRAN (R 4.1.0)                    
##  purrr         * 0.3.4       2020-04-17 [1] CRAN (R 4.1.0)                    
##  R6              2.5.1       2021-08-19 [1] CRAN (R 4.1.0)                    
##  Rcpp            1.0.7       2021-07-07 [1] CRAN (R 4.1.0)                    
##  readr         * 2.1.0       2021-11-11 [1] CRAN (R 4.1.0)                    
##  readxl          1.3.1       2019-03-13 [1] CRAN (R 4.1.0)                    
##  remotes         2.4.0       2021-06-02 [1] CRAN (R 4.1.0)                    
##  reprex          2.0.0       2021-04-02 [1] CRAN (R 4.1.0)                    
##  rlang           0.99.0.9001 2021-11-30 [1] Github (r-lib/rlang@5aefc4a)      
##  rmarkdown       2.11.3      2021-10-18 [1] Github (rstudio/rmarkdown@ebf0d09)
##  rprojroot       2.0.2       2020-11-15 [1] CRAN (R 4.1.0)                    
##  rstudioapi      0.13        2020-11-12 [1] CRAN (R 4.1.0)                    
##  rvest           1.0.1       2021-07-26 [1] CRAN (R 4.1.0)                    
##  sass            0.4.0       2021-05-12 [1] CRAN (R 4.1.0)                    
##  scales          1.1.1       2020-05-11 [1] CRAN (R 4.1.0)                    
##  sessioninfo     1.1.1       2018-11-05 [1] CRAN (R 4.1.0)                    
##  stringi         1.7.6       2021-11-29 [1] CRAN (R 4.1.0)                    
##  stringr       * 1.4.0       2019-02-10 [1] CRAN (R 4.1.0)                    
##  testthat        3.0.4       2021-07-01 [1] CRAN (R 4.1.0)                    
##  tibble        * 3.1.6       2021-11-07 [1] CRAN (R 4.1.0)                    
##  tidyr         * 1.1.4       2021-09-27 [1] CRAN (R 4.1.0)                    
##  tidyselect      1.1.1       2021-04-30 [1] CRAN (R 4.1.0)                    
##  tidyverse     * 1.3.1       2021-04-15 [1] CRAN (R 4.1.0)                    
##  tzdb            0.2.0       2021-10-27 [1] CRAN (R 4.1.0)                    
##  usethis         2.1.0       2021-10-16 [1] CRAN (R 4.1.0)                    
##  utf8            1.2.2       2021-07-24 [1] CRAN (R 4.1.0)                    
##  vctrs           0.3.8       2021-04-29 [1] CRAN (R 4.1.0)                    
##  withr           2.4.2       2021-04-18 [1] CRAN (R 4.1.0)                    
##  xaringan        0.22        2021-06-23 [1] CRAN (R 4.1.0)                    
##  xfun            0.28        2021-11-04 [1] CRAN (R 4.1.0)                    
##  xml2            1.3.2       2020-04-23 [1] CRAN (R 4.1.0)                    
##  yaml            2.2.1       2020-02-01 [1] CRAN (R 4.1.0)                    
## 
## [1] /Library/Frameworks/R.framework/Versions/4.1/Resources/library
```
]

These slides are licensed under <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>