Wrap-up Week 5 + HTML Stuff

class: center, middle, inverse, title-slide

.title[
# Wrap-up Week 5 + HTML Stuff
]
.subtitle[
## Theming, Fonts, Dashboards, Websites & some CSS
]
.author[
### Maithreyi Gopalan
]
.date[
### Week 6
]

---

layout: true

---
class: inverse-blue
# Data viz in the wild

Saratessa

Maiko

Will

### Maithreyi Gopalan on Deck

---

# Agenda

* Fonts w/ggplot2

* Flexdashboards

+ We'll create together, but also skim some slides

* Websites w/Distill

+ Same sort of thing, but also w/deployment

* Some customization w/CSS (including fonts)

+ I think there's a good chance we won't get to this today
  
  + If not, we'll come back to this on Week 9

---
class:inverse-blue center middle
# Fonts

---
# General advice
* Match your plot fonts to your text body font

* Use different fonts to distinguish things 
    + Specifically code
    + Consider for different heading levels

* **Always** choose a sans-serif font for code

* Explore and try - it makes a big impact on the overall look/feel

* Try not to get sucked into too deep of a rabbit hole

---
# {ragg}

``` r
#install.packages("ragg")
```

Alternative device to Cairo, png, etc.

See the announcement [here](https://www.tidyverse.org/blog/2021/02/modern-text-features/)

After install, be sure to set *Global Options > General > Graphics* to *AGG*

Use with RMarkdown with `knitr::opts_chunk$set(dev = "ragg_png")`

Will automatically detect fonts you have installed on your computer

---

``` r
ggplot(mtcars, aes(wt, mpg)) + 
  geom_point() +
  labs(title = "Fuel Efficiency of 32 Cars",
       x = "Weight (x1000 lb)",
       y = "Miles per Gallon") +
* theme(text = element_text(family = "Luminari", size = 30))
```

---
# Support for lots of things!
Ligatures and font-awesome icons

``` r
ggplot() + 
  geom_text(
    aes(x = 0, y = 2, label = "x <- y != z"), 
    family = "Fira Code"
  ) +
  labs(title = "twitter") +
  theme(
    plot.title = element_text(
      family = "Font Awesome 5 brands"
    )
  )
```

---
<img src="w6_files/figure-html/unnamed-chunk-5-1.png" width="720" />

---
# emojis

``` r
ggplot(mtcars, aes(disp, mpg)) +
  geom_text(label = "🎉",
            family = "Apple Color Emoji",
            size = 10)
```

---
# Google fonts

https://fonts.google.com

* Open source, designed for the web

* Good place to explore fonts

* Can be incorporated via the `{showtext}` package!

---
# {showtext} example

``` r
devtools::install_github("yixuan/showtext")

library(showtext)

font_add_google('Monsieur La Doulaise', "mld")
font_add_google('Special Elite', "se")

showtext_auto()

ggplot(mtcars, aes(disp, mpg)) +
  geom_point() + 
  labs(title = "An amazing title", 
       subtitle = "with the world's most boring dataset") + 
* theme(plot.subtitle = element_text(size = 18, family = "se"),
*       plot.title = element_text(size = 22, family = "mld"),
*       axis.title = element_text(size = 18, family = "mld"),
*       axis.text.x = element_text(size = 12, family = "se"),
*       axis.text.y = element_text(size = 12, family = "se"))
```

---
background-image:url("img/font-change.png")
background-size: contain

---
# Practice

* Create a simple plot

* Change the font to something on your computer (e.g., "Arial")

* Try importing and using a google font with **showtext**

* Try using different fonts for the title and subtitle

---
class: inverse-blue center middle
# Why fonts matter
### A few examples of epic fails

---
# Megaflicks - LOL

.center[
![](https://pbs.twimg.com/media/CGwg2F3XIAAQpRA?format=jpg&name=small)
]

---
background-image: url(https://i.redd.it/38jjcgaqu1g11.jpg)

---
background-image: url(img/always-mine.png)

---
# Quick aside
### Change the font of your R Markdown!

Create a CSS code chunk - write tiny bit of CSS - voila!

``` css
@import url('https://fonts.googleapis.com/css?family=Akronim&display=swap');

body {
  font-family: 'Akronim', cursive;
}
```

See the CSS slides for more information.

---
# Render!

![](img/font-change-rmd.png)

---
# Aside

I actually did this for the table slides to make them a bit smaller!

![](img/css-chunk.png)

---
# Resource for learning more
* I'm not an expert on fonts. I have mostly just picked what looks nice to me.

* Consider the accesibility of the font ([good resource here](https://venngage.com/blog/accessible-fonts/))

.center[

]

---
Best I've heard of is [practical typography](https://practicaltypography.com)
![](img/practical-typography.png){width="75%"}

---
# Identify fonts

Use others work to help you - I found the font for these slides from Daniel's theme and he used one that he liked.

Use google chrome's developer tools to help!

--
Also consider downloading fonts (from google or wherever) and using them directly.

Check out this [great blog post](https://yjunechoe.github.io/posts/2021-06-24-setting-up-and-debugging-custom-fonts/) by June Choe.

---
class: inverse-red middle

# Dashboards!

---
# The definitive source!
https://rmarkdown.rstudio.com/flexdashboard/

![](img/flexdashboards.png){width="75%"}

---
# Example

![](https://arm.rbind.io/slides/img/flexdashboard-fatalpoliceshootings.png)

.footnote[Credit: This example from [Alison Hill's rstudio::conf(2019L) class]()]

--
By [Julia Silge](https://juliasilge.com) (see the [blog post](https://juliasilge.com/blog/fatal-shootings/), [dashboard](https://beta.rstudioconnect.com/juliasilge/policeshooting/policeshooting.html),
and [source code](https://gist.github.com/juliasilge/9acbe97c549502bac85404779edceba0))

---

![](https://arm.rbind.io/slides/img/flexdashboard-mosaic.png){width="75%"}

.footnote[Credit: This example from [Alison Hill's rstudio::conf(2019L) class]()]

--
By [Jennifer Thompson](https://jenthompson.me) (see the [blog post](https://jenthompson.me/2018/02/09/flexdashboards-monitoring/), [dashboard](https://jenthompson.me/examples/progressdash.html),
and [source code](https://github.com/jenniferthompson/MOSAICProgress))

---
# Getting started

``` r
#install.packages("flexdashboard")
```

![](img/new-flexdashboard.png){width="50%"}

---
class: inverse-red middle center
# Do it
### knit right away
### Add some plots
### Play

---
# Columns

* Define new column with

```
Column
----------------------------------
```

* Optionally specify the width with `{data-width}`

--
* Annoyingly, be careful with spacing!

`{data-width=650}` will work

### but

`{data-width = 650}` will not work

---
# New squares

### Square title< r code chunk >

* Each time you add a square it will split the area evenly among all the squares

---
# Thinking in rows

* Change the YAML to

```md
output: 
  flexdashboard::flex_dashboard:
    orientation: rows
```

* Each `###` will then create a new column

--
* Add new rows with

```md
Row
----------------------------------
```

--
* Modify height with `{data-height=XXX}`

---
# Pages
You can easily specify multiple pages by just specifying a Level 1 Header

```md
# Page 1

Column {data-width=650}
----------------------------
### Chart A
< r code>

Column {data-width=350}
----------------------------
### Chart B
< r code>

### Chart C
< r code>

# Page 2

```

---
# A brief aside on interactivity

* Things like `reactable::reactable` and `plotly::ggplotly` can help give your dashboard some nice interactvity.

---
# Steps to interactivity
### With multipage layouts

Add `runtime: shiny` to your YAML

```
---
title: "My amazing dashboard"
runtime: shiny
output: 
  flexdashboard::flex_dashboard:
    orientation: columns
    vertical_layout: fill
---
```

--
Save your interactive piece into an object, and call the corresponding `render*` fucntion.

.pull-left[

``` r
p <- ggplot(...)
renderPlotly(p)
```
]

.pull-right[

``` r
tbl <- reactable(...)
renderReactable(tbl)
```
]
---
# Sidebar
* Julia Silge's had a nice sidebar where she explained things about the flexdashboard... You can have this too!

```md
Sidebar Title {.sidebar}
--------

Your text here. You can use markdown syntax, including 
[links](http://blah.com), *italics*, **bolding**, etc.   
```

--
* Multiple pages? Just change the separator to keep it there

```md
Sidebar {.sidebar}
============

Your text here. You can use markdown syntax, including [links](http://blah.com), *italics*, **bolding**, etc.   
```

---
# Tabsets

This is actually a standard R Markdown feature, but you can use it with flexdashboards as well

```md
Column {.tabset}
----------------------------------------------------------------------

### Chart 1
< r code>

### Chart 2
< r code>

### Data Table
< r code>
```

--
No comma between multiple column arguments

.pull-left[
### Good
```
Column {.tabset data-width=650}
```
]

.pull-right[
### bad
```
Column {.tabset, data-width=650}
```
]

---
# Icons
* Probably not the most important thing, but fun

* Use Font awesome!

```md
# Years {data-icon="fa-calendar"}
```

---
# HTML Widgets

Add a touch of interactivity

* Plenty of HTML widgets for R out there (see https://www.htmlwidgets.org/showcase_leaflet.html)

* {plotly} is cool

``` r
#install.packages("plotly")
library(plotly)
p <- ggplot(mpg, aes(displ, cty)) +
  geom_point() +
  geom_smooth()

*ggplotly(p)
```

---
# Including Text

* If you want to include text about an overall figure, just put the text in the R Markdown doc like you normally would

```md
# Base {data-icon="fa-calendar"}
Here's a description about the plot that follows

### A base R plot
< r code>

```

---
# What if you have tabsets?

* Works great if you want to describe all the plots/tables/content in the tabset

* If you want to provide text for an individual plot, use `>`

```md

Column {.tabset data-width=350}
-------------------

This text will describe the full tabset

###  Chart 1
< r code>

> Here's some text for Chart 1

###  Table 1
< r code>

> Here's some text for Table 1

```

---
# Storyboarding

* A little bit advanced, but pretty cool

* First, change the YAML

```md
output: 
  flexdashboard::flex_dashboard:
    storyboard: true
```

---
```md
# Method {.storyboard}

### Sample Descriptives {data-commentary-width=400}
< r code>

****

This is some text describing what's going on with the sample, and how we moved from the raw data tot he analytic sample.

### Correlation Matrix {data-commentary-width=200}
< r code>

****

There is less to say here so I made the commentary box smaller

# Results {.storyboard}

### Plot 1 {data-commentary-width=600}
< r code>

****

Lots to say here. There is important

### Plot 2 {data-commentary-width=200}

****

Move along

```

---
# Customization
* Add font-awesome stuff
* Change the [theme](https://rmarkdown.rstudio.com/flexdashboard/using.html#appearance)

```md
flexdashboard::flex_dashboard:
  theme: readable
```

---
# CSS