--- title: "Making Dashboards in R Markdown" subtitle: "Meet flexdashboard" author: "Alison Hill" date: "2019/01/15 (updated: `r Sys.Date()`)" output: xaringan::moon_reader: css: ["default", "css/gbbo.css", "css/fonts.css"] lib_dir: libs nature: highlightStyle: github highlightLines: true countIncrementalSlides: false ratio: "16:9" beforeInit: "https://platform.twitter.com/widgets.js" seal: false includes: in_header: header.html --- ```{r setup, include=FALSE} options(htmltools.dir.version = FALSE) library(knitr) knitr::opts_chunk$set(warning = FALSE, message = FALSE, fig.align = "center", out.width = "80%") # options(knitr.table.format = "html") library(tidyverse) library(fontawesome) # from github: https://github.com/rstudio/fontawesome library(bakeoff) library(flexdashboard) #remotes::install_github("apreshill/bakeoff") ``` layout: true
--- name: flexdashboard-title background-image: url(img/fer-gomez-1164907-unsplash.jpg) background-size: cover class: inverse # `r rmarkdown::metadata$subtitle`
# Page 2 #<<
````
]
---
# Level 1: pages
.pull-left[
```{r echo = FALSE}
knitr::include_graphics("img/flexdashboard-pages.png")
```
]
--
.pull-right[
```{r eval = FALSE}
# Page 1
## Column
### Chart A
```
Technically, you can also demarcate pages with 3 or more `=`:
```{r eval = FALSE}
Page 1 #<<
=== #<<
## Column
### Chart A
```
]
.footnote[
https://rmarkdown.rstudio.com/flexdashboard/using.html#multiple_pages
]
---
name: yourturn
class: middle, inverse
# .fancy[Your turn]
---
name: yourturn1
template: yourturn
# .fancy[05:00 minutes]
### Make a new `flexdashboard` with some layouts like:
+ [Boxes](#layouts-boxes) with `###`
+ [Columns](#layouts-columns) with `##` or `---` .fancy[(play with `{data-width=}`)]
+ [Pages](#layouts-pages) with `#` or `===`
+ Extras:
+ Update YAML to try out [rows](#layouts-rows) with `orientation: rows`; .fancy[play with `{data-height=}`]
+ Add tabs to a [column](https://rmarkdown.rstudio.com/flexdashboard/layouts.html#tabset_column) or a [row](https://rmarkdown.rstudio.com/flexdashboard/layouts.html#tabset_row) to a level 2 header `{.tabset}`
+ Add a [sidebar](https://rmarkdown.rstudio.com/flexdashboard/layouts.html#input_sidebar) to a level 1 or 2 header with `{.sidebar}`
+ Try another [layout option](https://rmarkdown.rstudio.com/flexdashboard/layouts.html)
---
## Recap Layouts
- flexdashboards are composed of space-filling [boxes](#layouts-boxes) created with level 3 headers (`###`)
- Boxes can be grouped into [columns](#layouts-columns) (or [rows](#layouts-rows), or [tabs](https://rmarkdown.rstudio.com/flexdashboard/using.html#tabsets)) with level 2 headers (`##` or `---`)
- [Pages](#layouts-pages) can group other kinds of components with level 1 headers (`#` or `===`)
- Much more advanced layout is possible (see [docs for details]((https://rmarkdown.rstudio.com/flexdashboard/layouts.html))
---
name: block2
class: middle, center, inverse
# `r emo::ji("cake")`
# Components
.footnote[
https://bookdown.org/yihui/rmarkdown/dashboard-components.html
]
---
name: valuebox
class: middle, inverse
# Value boxes
.pull-left[
```{r, eval=FALSE}
library(flexdashboard)
articles <- 204
valueBox(articles,
icon = "fa-pencil",
caption = "Articles per Day")
```
]
.pull-right[
![valuebox](img/flexdashboard-valuebox.png)
]
.footnote[
https://bookdown.org/yihui/rmarkdown/dashboard-components.html#value-boxes
https://rmarkdown.rstudio.com/flexdashboard/using.html#value_boxes
]
---
name: gauge
class: middle, inverse
# Gauges
.pull-left[
```{r gauge, eval=FALSE}
satisfaction <- 86
gauge(satisfaction, min = 0, max = 100, symbol = '%',
label = "Satisfaction", gaugeSectors(
success = c(80, 100), warning = c(40, 79), danger = c(0, 39)
))
```
]
.pull-right[
![gauge](img/flexdashboard-gauge.png)
]
.footnote[
https://bookdown.org/yihui/rmarkdown/dashboard-components.html#gauges
https://rmarkdown.rstudio.com/flexdashboard/using.html#gauges
]
---
name: text-annotate
# Text Annotations
.pull-left[
Each component within a dashboard includes optional title, which is the text following the level 3 heading `###`
Notes are any text prefaced with ``> after the code chunk that yields the component’s output, like:
```
> Monthly deaths from lung disease in the UK, 1974–1979
```
]
.pull-right[
```{r echo = FALSE}
knitr:: include_graphics("https://bookdown.org/yihui/rmarkdown/images/dashboard-text.png")
```
]
.footnote[
https://bookdown.org/yihui/rmarkdown/dashboard-components.html#text-annotations
https://rmarkdown.rstudio.com/flexdashboard/using.html#text_annotations
]
---
name: navbar
# Navigation Bar
.pull-left[
```{r eval = FALSE}
---
title: "Source Code"
output:
flexdashboard::flex_dashboard:
source_code: embed #<<
---
```
]
.pull-right[
```{r eval = FALSE}
---
title: "Source Code"
output:
flexdashboard::flex_dashboard:
source_code: "https://github.com/USER/REPO" #<<
---
```
]
.footnote[
https://bookdown.org/yihui/rmarkdown/dashboard-components.html#navigation-bar
https://rmarkdown.rstudio.com/flexdashboard/using.html#navigation_bar
]
---
name: yourturn2
template: yourturn
# .fancy[05:00 minutes]
### Add some components like:
+ [Value boxes](#valuebox)
+ [Gauges](#gauge)
+ [Text annotations](#text-annotate)
+ [Navigation bar](#navbar)
---
name: block3
class: middle, center, inverse
# `r emo::ji("cake")`
# Interactive Dashboards
.footnote[
https://bookdown.org/yihui/rmarkdown/interactive-documents.html#intro-widgets
]
---
class: middle, inverse, center
# You may not need Shiny!
## Plots and HTML widgets
- Any R graphics are supported
- Graphs and visualizations: the basic building blocks of most dashboards
- Contents automatically scaled to the size of the box
- HTML widgets can include interactivity
---
# Interactivity with HTML widgets
https://www.htmlwidgets.org/
- Simplest form of interactivity
- Static HTML; no special client or server requirements
- Host anywhere, view anywhere
- Data must be fixed (can't run R code)
- Interaction *can happen* across widgets with [crosstalk](https://rstudio.github.io/crosstalk/)
---
# HTML widget interactivity
.pull-left[
```{r lungdygraph, eval=FALSE}
library(dygraphs)
lungDeaths <- cbind(mdeaths, fdeaths)
dygraph(lungDeaths) %>%
dyRangeSelector()
```
]
.pull-right[
```{r ref.label = 'lungdygraph', echo=FALSE}
```
]
---
## Plots and HTML widgets
.pull-left[
```{r gbbo-park, eval = FALSE}
library(leaflet)
leaflet() %>%
addTiles() %>%
addMarkers(lat = 51.4560, lng = -1.4136)
```
]
.pull-right[
```{r ref.label='gbbo-park', echo = FALSE}
```
]
---
## Plots and HTML widgets
.pull-left[
```{r gbbo-winners, eval = FALSE}
library(DT)
library(bakeoff)
baker_results %>%
filter(series_winner == 1) %>%
select(series, baker) %>%
datatable()
```
]
.pull-right[
```{r ref.label='gbbo-winners', echo = FALSE}
```
]
---
## flexdashboard vs. shinydashboard
- Static host vs. Shiny Server (or shinyapps.io)
- Simplicity vs. complexity
- Constraints vs. flexibility
See [example with Shiny here](https://shiring.shinyapps.io/demo_dashboard_pred_maint_fast/)
---
## Advanced topics
- [Themes](https://rmarkdown.rstudio.com/flexdashboard/using.html#themes)
- [Logos](https://rmarkdown.rstudio.com/flexdashboard/using.html#logo__favicon)
- [Layout tweaking:](https://rmarkdown.rstudio.com/flexdashboard/using.html#sizing) adjust column widths/sizes
- [Mobile friendly layouts](https://rmarkdown.rstudio.com/flexdashboard/using.html#mobile_layout)
- Largely automatic but can show/hide specifically
- [Storyboards](https://rmarkdown.rstudio.com/flexdashboard/using.html#storyboards)
---
class: middle, center, inverse
# More resources
## Special thanks to Jonathan McPherson for sharing his `flexdashboard` talk from [useR2016](https://github.com/jmcphers/flexdashboard-talk)
+ [flexdashboard documentation](http://rmarkdown.rstudio.com/flexdashboard/)
+ [HTML widget crosstalk](https://github.com/rstudio/crosstalk)
+ [HTML widget showcase](http://www.htmlwidgets.org/showcase_leaflet.html)