Introduction to Dashboards

class: center, middle, inverse, title-slide

# Introduction to Dashboards
## bmRn CSM: Building dashboards with R Markdown
### Martin Frigaard
### 2020-12-13

---

class: inverse, center, top
background-image: url(img/flexdashboard.png)
background-position: 50% 70%
background-size: 35%

# `flexdashboard` = Dashboards using R Markdown (and Shiny)

---
class: left, top
background-image: url(img/flexdashboard.png)
background-position: 95% 8%
background-size: 8%

# Load the packages

```r
install.packages(c("tidyverse", "inspectdf", 
                   "flexdashboard", "reactable"))
library(tidyverse)
library(inspectdf)
library(flexdashboard)
library(reactable)
```

---
class: left, top
background-image: url(img/flexdashboard.png)
background-position: 95% 8%
background-size: 8%

# Outline (1)

###  Recap `rmarkdown`

### *What belongs in a dashboard*?

### Layouts

- *Sidebars, Columns, and Rows*  
  - *Multiple Pages, Tabs*

### Themes

- *Bootstrap themes*

---
class: left, top
background-image: url(img/flexdashboard.png)
background-position: 95% 8%
background-size: 8%

# Outline (2)

### `inspectdf` package

- *graphs, syntax*

### `reactable` package

- *table displays*

### Examples with `shiny`

- *shiny reactivity*

---
class: left, top
background-image: url(img/flexdashboard.png)
background-position: 95% 8%
background-size: 8%

# Materials

## Slides

https://mjfrigaard.github.io/intro-to-dashboards/Index.html

## Exercises

## RStudio Project

https://rstudio.cloud/project/2000287

---
class: inverse, center, top
background-image: url(img/rmarkdown.png)
background-position: 50% 70%
background-size: 35%

# `rmarkdown` = `YAML` + Markdown + R (or other languages)

---
class: left, top
background-image: url(img/rmarkdown.png)
background-position: 93% 10%
background-size: 8%

# *What is RMarkdown?*

## Three technologies:

### 1) Markdown is a plain text markup language for capturing *human-readable* prose

### 2) Data manipulation/graphing/statistical language engines for computing *machine-readable* code

### 3) Multiple *output options* for creating PDFs, Word docs, PowerPoints, HTML, etc.

---
class: left, top
background-image: url(img/rmarkdown.png)
background-position: 95% 8%
background-size: 8%

## Your Turn 1

### Open a new R Markdown file

*file > New File > R Markdown > From Template > `flexdashboard`*

---
class: left, top
background-image: url(img/rmarkdown.png)
background-position: 95% 8%
background-size: 8%

## Your Turn 2

### Add title and save R Markdown file

---
class: left, top
background-image: url(img/rmarkdown.png)
background-position: 95% 8%
background-size: 8%

## Your Turn 3

### knit!

---
class: center, top
background-image: url(img/flexdashboard.png)
background-position: 5% 98%
background-size: 10%

# What belongs in a dashboard?

> Dashboards are particularly common in **business-style reports**. They can be used to **highlight brief and key summaries of a report**. The layout of a dashboard is often grid-based, with components arranged in boxes of various sizes.

---
class: left, top
background-image: url(img/flexdashboard.png)
background-position: 95% 8%
background-size: 8%

## Dashboard Anatomy

### The YAML header setting creates the dashboard:

```yaml
output: 
  flexdashboard::flex_dashboard:
```

### The layout is determined by the `orientation` and `vertical_layout` options.

```yaml
    orientation: columns
    vertical_layout: fill
```

---
class: left, top
background-image: url(img/flexdashboard.png)
background-position: 95% 8%
background-size: 8%

## Column Widths

### Column Widths must add up to `1000`

---
class: left, top
background-image: url(img/flexdashboard.png)
background-position: 95% 8%
background-size: 8%

## Sidebars

.pull-left[

Include a sidebar with `{.sidebar data-width=200}`

<img src="img/input-sidebar.png" width="100%" height="100%" style="display: block; margin: auto;" />
]

.pull-right[

Adjust the column widths (set both to `{data-width=400}`)

]

### Knit!

---
class: left, top
background-image: url(img/flexdashboard.png)
background-position: 95% 8%
background-size: 8%

## Sidebars

Sidebars are typically used for data inputs and user-interface controls

---
class: left, top
background-image: url(img/flexdashboard.png)
background-position: 95% 8%
background-size: 8%

## Row Layout

### We can also orient by rows

Change the `orientation` of the dashboard

```yaml
output: 
  flexdashboard::flex_dashboard:
      orientation: columns
```

### Re-knit!

---
class: left, top
background-image: url(img/flexdashboard.png)
background-position: 95% 8%
background-size: 8%

## Rows Layout

---
class: left, top
background-image: url(img/flexdashboard.png)
background-position: 95% 8%
background-size: 8%

## Scrolling

Change the `YAML` header back to `orientation: columns` and `vertical_layout: scroll`

```yaml
    orientation: columns
    vertical_layout: scroll
```

### Re-knit!

---
class: left, top
background-image: url(img/flexdashboard.png)
background-position: 95% 8%
background-size: 8%

## Scrolling

Now we can scroll past the end of the column.

---
class: left, top
background-image: url(img/flexdashboard.png)
background-position: 95% 8%
background-size: 8%

## Tabsets

### Add tabsets with `{.tabset}`

---
class: left, top
background-image: url(img/flexdashboard.png)
background-position: 95% 8%
background-size: 8%

## Global Sidebar and Pages

For global settings, we use `=========` instead of `----------`

---
class: left, top
background-image: url(img/flexdashboard.png)
background-position: 95% 8%
background-size: 8%

### Global Sidebar and Pages

`data-orientation=columns`

`.tabset`

---
class: left, top
background-image: url(img/flexdashboard.png)
background-position: 95% 8%
background-size: 8%

## Global Sidebar and Pages

For global settings, we use `=========` instead of `----------`

---
class: left, top
background-image: url(img/flexdashboard.png)
background-position: 95% 8%
background-size: 8%

## Global Sidebar and Pages

`data-orientation=rows`

`.tabset-fade`

---
class: left, top
background-image: url(img/flexdashboard.png)
background-position: 95% 8%
background-size: 8%

## Menus

`data-navmenu=More`

---
class: left, top
background-image: url(img/flexdashboard.png)
background-position: 95% 8%
background-size: 8%

## Menus

---
class: left, top
background-image: url(img/flexdashboard.png)
background-position: 95% 8%
background-size: 8%

## Themes

### Change `theme`s (just like `html_document`!)

```yaml
title: "My Dashboard"
output: 
  flexdashboard::flex_dashboard:
    theme: spacelab
```

See the website for more information

---
class: inverse, center, top
background-image: url(img/inspectdf.png)
background-position: 50% 70%
background-size: 35%

# `inspectdf` = quicky examine datasets

---
class: left, top
background-image: url(img/inspectdf.png)
background-position: 95% 8%
background-size: 8%

## Previous Slides: Apple Mobility Data

https://mjfrigaard.github.io/data-viz-as-comm/Index.html

## Import Data

```r
AppleMobRaw <- readr::read_csv("https://bit.ly/36tTVpe")
```

---
class: left, top
background-image: url(img/inspectdf.png)
background-position: 95% 8%
background-size: 8%

## Previous Slides: Apple Mobility Data

### Don't Forget Wrangling Steps!

```r
AppleMobRaw %>% 
  # transpose data 
  tidyr::pivot_longer(cols = -c(geo_type:country), 
    names_to = "date", values_to = "dir_request") %>% 
    # remove missing country data
  dplyr::filter(!is.na(country) & !is.na(`sub-region`)) %>% 
  # clean names
  janitor::clean_names() %>%
  # date
  mutate(date = lubridate::ymd(date)) %>% 
  # create trans_type
  rename(trans_type = transportation_type) -> TidyApple
```

---
class: left, top
background-image: url(img/inspectdf.png)
background-position: 95% 8%
background-size: 8%

# Dataset size in memory

```r
TidyApple %>%  
  inspectdf::inspect_mem() %>%  
  inspectdf::show_plot(text_labels = TRUE)
```

---
class: left, top
background-image: url(img/inspectdf.png)
background-position: 95% 8%
background-size: 8%

# Sidebar

## Add the data to the `.sidebar`

Add the `import` and `wrangle` code to the sidebar in the dashboard.

```r
# import ----
AppleMobRaw <- readr::read_csv("https://bit.ly/36tTVpe")
# wrangle ----
AppleMobRaw %>% 
 # transpose data 
 tidyr::pivot_longer(cols = -c(geo_type:country), 
 names_to = "date", values_to = "dir_request") %>% 
 # remove missing country data
 dplyr::filter(!is.na(country) & !is.na(`sub-region`)) %>% 
 # clean names
 janitor::clean_names() %>%
 # date
 mutate(date = lubridate::ymd(date)) %>% 
 # create trans_type
 rename(trans_type = transportation_type) -> TidyApple
```

---
class: left, top
background-image: url(img/inspectdf.png)
background-position: 95% 8%
background-size: 8%

# Page 1, Column 1, Tab 1

## Add the '`Memory Size`' Graph

Add this code to `A1`

```r
TidyApple %>%  
  inspectdf::inspect_mem() %>%  
  inspectdf::show_plot(text_labels = TRUE)
```

## Knit--how does it look?

---
class: left, top
background-image: url(img/inspectdf.png)
background-position: 95% 8%
background-size: 8%

# Page 1, Column 1, Tab 2

## Add the `Missing Data` Graph

Add this code to `A2`

```r
TidyApple %>%
  inspectdf::inspect_na() %>% 
  inspectdf::show_plot(text_labels = TRUE)
```

## Knit--how does it look?

---
class: left, top
background-image: url(img/inspectdf.png)
background-position: 95% 8%
background-size: 8%

# Page 1, Column 2, Tab 1

### Add the `Categorical Data` Graph

Add this code to `B1`

```r
TidyApple %>% 
  select_if(is.character) %>% 
  inspectdf::inspect_cat() %>% 
  inspectdf::show_plot(text_labels = TRUE)
```

## Knit--how does it look?

---
class: left, top
background-image: url(img/inspectdf.png)
background-position: 95% 8%
background-size: 8%

# Page 1, Column 2, Tab 2

### Add the `Data Imbalances` Graph

Add this code to `B2`

```r
TidyApple %>% 
  inspectdf::inspect_imb() %>% 
  inspectdf::show_plot(text_labels = TRUE)
```

## Knit--how does it look?

---
class: left, top
background-image: url(img/inspectdf.png)
background-position: 95% 8%
background-size: 8%

# Page 1

---
class: left, top
background-image: url(img/flexdashboard.png)
background-position: 95% 8%
background-size: 8%

## Page 2 (Rows)

```
Page 2 {data-orientation=rows}
=======================================
```

---
class: left, top
background-image: url(img/flexdashboard.png)
background-position: 95% 8%
background-size: 8%

## Page 2, Row 1, Tab 1

### Create a `.tabset`/`.tabset-fade` Row

```
Row {.tabset .tabset-fade data-height=600}
---------------------------------------------
```

### Add `Numeric Data` Graph

```r
TidyApple %>% 
  select_if(is.numeric) %>% 
  inspectdf::inspect_num() %>% 
  inspectdf::show_plot(text_labels = TRUE)
```

## Knit--how does it look?

---
class: left, top
background-image: url(img/flexdashboard.png)
background-position: 95% 8%
background-size: 8%

## Page 2, Row 1, Tab 2

### Add 'Distributions `ggridges`' Graph

```r
library(ggridges) 
lab_ridges <- labs(x = "Apple directions requests",
 y = "Transportation Types",
 title = "Direction Requests by Transportation Type",
 subtitle = "source: https://covid19.apple.com/mobility")

TidyApple %>%
  ggplot() +
  geom_density_ridges(aes(x = dir_request, 
                          y = trans_type,
    fill = trans_type), 
    alpha = 1/5) +
  lab_ridges
```

## Knit--how does it look?

---
class: left, top
background-image: url(img/flexdashboard.png)
background-position: 95% 8%
background-size: 8%

## Page 2, Row 2, Tab 1

### Create Another `.tabset`/`.tabset-fade` Row

```
Row {.tabset .tabset-fade data-height=400}
----------------------------------------------
```

### In tab 1, add `TopUSCities` as `paged_table`

```r
TopUSCities <- TidyApple %>% 
 filter(country == "United States" & 
 region %in% c("New York City","Los Angeles", 
 "Chicago", "Houston", "Phoenix"))
rmarkdown::paged_table(TopUSCities)
```

## Knit--how does it look?

---
class: left, top
background-image: url(img/flexdashboard.png)
background-position: 95% 8%
background-size: 8%

## Page 2, Row 2, Tab 2

### In tab 2, add `MaxUSCitiesDriving` as `reactable`

```r
TopUSCities %>% 
  filter(trans_type == "driving") %>% 
  group_by(region) %>% 
  slice_max(dir_request) %>% 
  ungroup() -> MaxUSCitiesDriving
reactable(MaxUSCitiesDriving, 
              resizable = TRUE, showPageSizeOptions = TRUE, 
              selection = "multiple", onClick = "select")
```

## Knit--how does it look?

---
class: left, top
background-image: url(img/flexdashboard.png)
background-position: 95% 8%
background-size: 8%

# Page 2

---
class: left, top
background-image: url(img/flexdashboard.png)
background-position: 95% 8%
background-size: 8%

# Page 2

---
class: left, top
background-image: url(img/flexdashboard.png)
background-position: 95% 8%
background-size: 8%

# More Examples

## Check out the package website and gallery

https://rmarkdown.rstudio.com/flexdashboard/examples.html