Visualizing Data (in R)

# Visualizing Data (in R)
## An opinionated style guide<br>
### <br><br>June Choe
### 2021-02-10

---

<div class="figure">
<img src="https://imgs.xkcd.com/comics/scientific_paper_graph_quality.png" alt="&lt;a href='https://xkcd.com/1945/'&gt;https://xkcd.com/1945&lt;/a&gt;" width="650px" height="400px" />
<p class="caption"><a href='https://xkcd.com/1945/'>https://xkcd.com/1945</a></p>
</div>

---

# Motivation

**Why bother improving the quality of your plot?**

- <p>Helps people <strong>remember</strong> your results better</p>

- Makes your findings look more **credible**

- Increases the chance of your work being **shared**

- Shows **respect** for your audience

<br>

**Goal of this presentation**

- <p>Share practical, language-agnostic tips for improving readability & accessibility</p>

- Walk through implementations of these ideas (w/ [R code](https://raw.githubusercontent.com/yjunechoe/sandbox/master/flipbooks/ggplot2_master/feb_2020_ggplot2.Rmd))

- Demonstrate that the _design_ just as important as the content

---

# Outline

**Four principles for explanatory data visualization**

- <p>Make your <strong>text</strong> readable</p>

- Be generous about **margins and spacing**

- Make the **legend** clear but subtle

- Make **color** easy on your reader's eyes

<br>

**Showcases/tricks**

- Minimal designs

- Plot composition

- Animations

- Interactivity

---

# Preliminaries

The `{ggplot2}` ecosystem in R:

- Easy to use and highly customizable

- Tons of free resources for learning

- Widely used in academia

- Lots of extensions

]

]

---

# Preliminaries

The `{ggplot2}` ecosystem in R:

- Easy to use and highly customizable

- Tons of free resources for learning

- Widely used in academia

- Lots of extensions

```r
library(extrafont)
library(colorspace)
library(patchwork)
library(ggtext)
library(scales)
# library(gghighlight)
# library(ggforce)
# library(ggrepel)
# library(gganimate)
```

]

]

---

# The layered Grammar of Graphics

<blockquote style="margin-bottom:40px"><strong><em>A framework is less rules, not more</em></strong></blockquote>

<div class="figure" style="text-align: center">
<img src="tsg_lab_ggplot2_files/ggplot_layers.png" alt="&lt;a href='https://www.youtube.com/watch?v=h29g21z0a68'&gt;Video Tutorial&lt;/a&gt;" width="420px" />
<p class="caption"><a href='https://www.youtube.com/watch?v=h29g21z0a68'>Video Tutorial</a></p>
</div>

---

```r
# Presidential election results from 1932-2016
*state_election_votes
```
]
 
.panel2-example-1-auto[

```
  # A tibble: 1,097 x 3
     State       demVote  Year
     <chr>         <dbl> <dbl>
   1 Alabama       0.85   1932
   2 Arizona       0.67   1932
   3 Arkansas      0.86   1932
   4 California    0.580  1932
   5 Colorado      0.55   1932
   6 Connecticut   0.47   1932
   7 Delaware      0.48   1932
   8 Florida       0.74   1932
   9 Georgia       0.92   1932
  10 Idaho         0.59   1932
  # ... with 1,087 more rows
```
]

---
count: false

```r
# Presidential election results from 1932-2016
state_election_votes %>%
* filter(State %in%
*   c("Pennsylvania",
*   "Illinois",
*   "California")
* )
```
]
 
.panel2-example-1-auto[

```
  # A tibble: 66 x 3
     State        demVote  Year
     <chr>          <dbl> <dbl>
   1 California     0.580  1932
   2 Illinois       0.55   1932
   3 Pennsylvania   0.45   1932
   4 California     0.67   1936
   5 Illinois       0.580  1936
   6 Pennsylvania   0.570  1936
   7 California     0.570  1940
   8 Illinois       0.51   1940
   9 Pennsylvania   0.53   1940
  10 California     0.56   1944
  # ... with 56 more rows
```
]

---
count: false

```r
# Presidential election results from 1932-2016
state_election_votes %>%
  filter(State %in%
    c("Pennsylvania",
    "Illinois",
    "California")
  ) %>%
* ggplot()
```
]
 
.panel2-example-1-auto[
![](feb_2020_ggplot2_files/figure-html/example-1_auto_03_output-1.svg)
]

---
count: false

```r
# Presidential election results from 1932-2016
state_election_votes %>%
  filter(State %in%
    c("Pennsylvania",
    "Illinois",
    "California")
  ) %>%
  ggplot() +
* aes(
*   x = Year,
*   y = demVote,
*   color = State
* )
```
]
 
.panel2-example-1-auto[
![](feb_2020_ggplot2_files/figure-html/example-1_auto_04_output-1.svg)
]

---
count: false

```r
# Presidential election results from 1932-2016
state_election_votes %>%
  filter(State %in%
    c("Pennsylvania",
    "Illinois",
    "California")
  ) %>%
  ggplot() +
  aes(
    x = Year,
    y = demVote,
    color = State
  ) +
* geom_point()
```
]
 
.panel2-example-1-auto[
![](feb_2020_ggplot2_files/figure-html/example-1_auto_05_output-1.svg)
]

---
count: false

```r
# Presidential election results from 1932-2016
state_election_votes %>%
  filter(State %in%
    c("Pennsylvania",
    "Illinois",
    "California")
  ) %>%
  ggplot() +
  aes(
    x = Year,
    y = demVote,
    color = State
  ) +
  geom_point() +
* scale_y_continuous(
*   labels = percent_format(accuracy = 1)
* )
```
]
 
.panel2-example-1-auto[
![](feb_2020_ggplot2_files/figure-html/example-1_auto_06_output-1.svg)
]

---
count: false

```r
# Presidential election results from 1932-2016
state_election_votes %>%
  filter(State %in%
    c("Pennsylvania",
    "Illinois",
    "California")
  ) %>%
  ggplot() +
  aes(
    x = Year,
    y = demVote,
    color = State
  ) +
  geom_point() +
  scale_y_continuous(
    labels = percent_format(accuracy = 1)
  ) +
* scale_x_continuous(
*   breaks = pretty_breaks(n= 5)
* )
```
]
 
.panel2-example-1-auto[
![](feb_2020_ggplot2_files/figure-html/example-1_auto_07_output-1.svg)
]

---
count: false

```r
# Presidential election results from 1932-2016
state_election_votes %>%
  filter(State %in%
    c("Pennsylvania",
    "Illinois",
    "California")
  ) %>%
  ggplot() +
  aes(
    x = Year,
    y = demVote,
    color = State
  ) +
  geom_point() +
  scale_y_continuous(
    labels = percent_format(accuracy = 1)
  ) +
  scale_x_continuous(
    breaks = pretty_breaks(n= 5)
  ) +
* labs(
*   y = "Democrat Votes",
*   title = "Go Vote!"
* )
```
]
 
.panel2-example-1-auto[
![](feb_2020_ggplot2_files/figure-html/example-1_auto_08_output-1.svg)
]

---
count: false

```r
# Presidential election results from 1932-2016
state_election_votes %>%
  filter(State %in%
    c("Pennsylvania",
    "Illinois",
    "California")
  ) %>%
  ggplot() +
  aes(
    x = Year,
    y = demVote,
    color = State
  ) +
  geom_point() +
  scale_y_continuous(
    labels = percent_format(accuracy = 1)
  ) +
  scale_x_continuous(
    breaks = pretty_breaks(n= 5)
  ) +
  labs(
    y = "Democrat Votes",
    title = "Go Vote!"
  )
```
]
 
.panel2-example-1-auto[
![](feb_2020_ggplot2_files/figure-html/example-1_auto_09_output-1.svg)
]

---

```r
# Presidential election results from 1932-2016
state_election_votes %>%
  filter(State %in%
    c("Pennsylvania",
    "Illinois",
    "California")
  ) %>%
  ggplot() +
  aes(
    x = Year,
    y = demVote,
    color = State
  ) +
* geom_point() +
  scale_y_continuous(
    labels = percent_format(accuracy = 1)
  ) +
  scale_x_continuous(
    breaks = pretty_breaks(n= 5)
  ) +
  labs(
    y = "Democrat Votes",
    title = "Go Vote!"
  )
```
]
 
.panel2-example-1-rotate[
![](feb_2020_ggplot2_files/figure-html/example-1_rotate_01_output-1.svg)
]

---
count: false

```r
# Presidential election results from 1932-2016
state_election_votes %>%
  filter(State %in%
    c("Pennsylvania",
    "Illinois",
    "California")
  ) %>%
  ggplot() +
  aes(
    x = Year,
    y = demVote,
    color = State
  ) +
* geom_line() +
  scale_y_continuous(
    labels = percent_format(accuracy = 1)
  ) +
  scale_x_continuous(
    breaks = pretty_breaks(n= 5)
  ) +
  labs(
    y = "Democrat Votes",
    title = "Go Vote!"
  )
```
]
 
.panel2-example-1-rotate[
![](feb_2020_ggplot2_files/figure-html/example-1_rotate_02_output-1.svg)
]

---
count: false

```r
# Presidential election results from 1932-2016
state_election_votes %>%
  filter(State %in%
    c("Pennsylvania",
    "Illinois",
    "California")
  ) %>%
  ggplot() +
  aes(
    x = Year,
    y = demVote,
    color = State
  ) +
* geom_line(size = 1) +
  scale_y_continuous(
    labels = percent_format(accuracy = 1)
  ) +
  scale_x_continuous(
    breaks = pretty_breaks(n= 5)
  ) +
  labs(
    y = "Democrat Votes",
    title = "Go Vote!"
  )
```
]
 
.panel2-example-1-rotate[
![](feb_2020_ggplot2_files/figure-html/example-1_rotate_03_output-1.svg)
]

---

# Yay a plot!

]

]

---

# Yay a plot... ?

]

**Areas of improvement**

- Text is small and narrow

- Plot elements are squished together

- Difficult to focus on individual colors

- Legend is off to the side on its own

]

---

# 1. Text

---

#1. Text

Many different ways to style text:

- <p><span style="font-size: .7em">font</span> <span style="font-size: 1.5em">size</span></p>

- Font face (<strong style="color:black">bold</strong>, *italic*, <span style="font-variant: small-caps">small caps</span>)

- Font family (<span style="font-family: Times New Roman"> Times New Roman</span>, <span style="font-family: Calibri"> Calibri</span>, <span style="font-family: Arial"> Arial</span>, <span style="font-family: Wingdings">Hi friends</span> )

- Font <span style="color:red">color</span>, <span style="letter-spacing:2px">letter spacing</span>, <span style="writing-mode:vertical-rl">angle</span>, <span style="font-weight:100">weight</span>, etc.

<br>

Often times you'll likely only have access to a limited set:

- <p>Font size, font family, and limited set of font styles</p>

- But you can get pretty far with these!

---

```r
*state_election_plot
```
]
 
.panel2-text-auto[
![](feb_2020_ggplot2_files/figure-html/text_auto_01_output-1.svg)
]

---
count: false

```r
state_election_plot +
* theme(text = element_text(size = 15))
```
]
 
.panel2-text-auto[
![](feb_2020_ggplot2_files/figure-html/text_auto_02_output-1.svg)
]

---
count: false

```r
state_election_plot +
  theme(text = element_text(size = 15)) +
* theme(plot.title = element_text(size = 20))
```
]
 
.panel2-text-auto[
![](feb_2020_ggplot2_files/figure-html/text_auto_03_output-1.svg)
]

---
count: false

```r
state_election_plot +
  theme(text = element_text(size = 15)) +
  theme(plot.title = element_text(size = 20)) +
* theme(text = element_text(family = "Open Sans"))
```
]
 
.panel2-text-auto[
![](feb_2020_ggplot2_files/figure-html/text_auto_04_output-1.svg)
]

---
count: false

```r
state_election_plot +
  theme(text = element_text(size = 15)) +
  theme(plot.title = element_text(size = 20)) +
  theme(text = element_text(family = "Open Sans")) +
* theme(plot.title = element_text(family = "Roboto Slab"))
```
]
 
.panel2-text-auto[
![](feb_2020_ggplot2_files/figure-html/text_auto_05_output-1.svg)
]

---
count: false

---
count: false

---
count: false

```r
state_election_plot +
  theme(text = element_text(size = 15)) +
  theme(plot.title = element_text(size = 20)) +
  theme(text = element_text(family = "Open Sans")) +
  theme(plot.title = element_text(family = "Roboto Slab")) +
  theme(plot.title.position = "plot") +
  labs(x = "Election Year") +
* labs(y = NULL)
```
]
 
.panel2-text-auto[
![](feb_2020_ggplot2_files/figure-html/text_auto_08_output-1.svg)
]

---
count: false

```r
state_election_plot +
  theme(text = element_text(size = 15)) +
  theme(plot.title = element_text(size = 20)) +
  theme(text = element_text(family = "Open Sans")) +
  theme(plot.title = element_text(family = "Roboto Slab")) +
  theme(plot.title.position = "plot") +
  labs(x = "Election Year") +
  labs(y = NULL) +
* labs(title = "Percent of democrat votes by state")
```
]
 
.panel2-text-auto[
![](feb_2020_ggplot2_files/figure-html/text_auto_09_output-1.svg)
]

---
count: false

```r
state_election_plot +
  theme(text = element_text(size = 15)) +
  theme(plot.title = element_text(size = 20)) +
  theme(text = element_text(family = "Open Sans")) +
  theme(plot.title = element_text(family = "Roboto Slab")) +
  theme(plot.title.position = "plot") +
  labs(x = "Election Year") +
  labs(y = NULL) +
  labs(title = "Percent of democrat votes by state") +
* labs(subtitle = "We're a swing state! Go vote!")
```
]
 
.panel2-text-auto[
![](feb_2020_ggplot2_files/figure-html/text_auto_10_output-1.svg)
]

---
count: false

```r
state_election_plot +
  theme(text = element_text(size = 15)) +
  theme(plot.title = element_text(size = 20)) +
  theme(text = element_text(family = "Open Sans")) +
  theme(plot.title = element_text(family = "Roboto Slab")) +
  theme(plot.title.position = "plot") +
  labs(x = "Election Year") +
  labs(y = NULL) +
  labs(title = "Percent of democrat votes by state") +
  labs(subtitle = "We're a swing state! Go vote!") +
* theme(plot.subtitle = element_text(face = "italic"))
```
]
 
.panel2-text-auto[
![](feb_2020_ggplot2_files/figure-html/text_auto_11_output-1.svg)
]

---

```r
state_election_plot +
  theme(text = element_text(size = 15)) +
  theme(plot.title = element_text(size = 20)) +
* theme(text = element_text(family = "Adelle")) +
  theme(plot.title = element_text(family = "Roboto Slab")) +
  theme(plot.title.position = "plot") +
  labs(x = "Election Year") +
  labs(y = NULL) +
  labs(title = "Percent of democrat votes by state") +
  labs(subtitle = "We're a swing state! Go vote!") +
  theme(plot.subtitle = element_text(face = "italic"))
```
]
 
.panel2-text-rotate[
![](feb_2020_ggplot2_files/figure-html/text_rotate_01_output-1.svg)
]

---
count: false

```r
state_election_plot +
  theme(text = element_text(size = 15)) +
  theme(plot.title = element_text(size = 20)) +
* theme(text = element_text(family = "Bitter")) +
  theme(plot.title = element_text(family = "Roboto Slab")) +
  theme(plot.title.position = "plot") +
  labs(x = "Election Year") +
  labs(y = NULL) +
  labs(title = "Percent of democrat votes by state") +
  labs(subtitle = "We're a swing state! Go vote!") +
  theme(plot.subtitle = element_text(face = "italic"))
```
]
 
.panel2-text-rotate[
![](feb_2020_ggplot2_files/figure-html/text_rotate_02_output-1.svg)
]

---
count: false

```r
state_election_plot +
  theme(text = element_text(size = 15)) +
  theme(plot.title = element_text(size = 20)) +
* theme(text = element_text(family = "Montserrat")) +
  theme(plot.title = element_text(family = "Roboto Slab")) +
  theme(plot.title.position = "plot") +
  labs(x = "Election Year") +
  labs(y = NULL) +
  labs(title = "Percent of democrat votes by state") +
  labs(subtitle = "We're a swing state! Go vote!") +
  theme(plot.subtitle = element_text(face = "italic"))
```
]
 
.panel2-text-rotate[
![](feb_2020_ggplot2_files/figure-html/text_rotate_03_output-1.svg)
]

---
count: false

```r
state_election_plot +
  theme(text = element_text(size = 15)) +
  theme(plot.title = element_text(size = 20)) +
* theme(text = element_text(family = "Montserrat Medium")) +
  theme(plot.title = element_text(family = "Roboto Slab")) +
  theme(plot.title.position = "plot") +
  labs(x = "Election Year") +
  labs(y = NULL) +
  labs(title = "Percent of democrat votes by state") +
  labs(subtitle = "We're a swing state! Go vote!") +
  theme(plot.subtitle = element_text(face = "italic"))
```
]
 
.panel2-text-rotate[
![](feb_2020_ggplot2_files/figure-html/text_rotate_04_output-1.svg)
]

---
count: false

```r
state_election_plot +
  theme(text = element_text(size = 15)) +
  theme(plot.title = element_text(size = 20)) +
* theme(text = element_text(family = "xkcd")) +
  theme(plot.title = element_text(family = "Roboto Slab")) +
  theme(plot.title.position = "plot") +
  labs(x = "Election Year") +
  labs(y = NULL) +
  labs(title = "Percent of democrat votes by state") +
  labs(subtitle = "We're a swing state! Go vote!") +
  theme(plot.subtitle = element_text(face = "italic"))
```
]
 
.panel2-text-rotate[
![](feb_2020_ggplot2_files/figure-html/text_rotate_05_output-1.svg)
]

---

#1. Text (End!)

```r
state_election_plot +
  theme(
    text = element_text(size = 15, family = "Open Sans"),
    plot.title = element_text(size = 20, family = "Roboto Slab"),
    plot.title.position = "plot",
    plot.subtitle = element_text(face = "italic"),
    axis.text = element_text(size = 14)
  ) +
  labs(
    x = "Election Year",
    y = NULL,
    title = "Percent of democrat votes by state",
    subtitle = "We're a swing state! Go vote!"
  ) 
```

Save our progress!

```r
state_election_plot_A
```

]

]

---

#1. Text (Before-After)

]

]

---

# 2. Margin & Spacing

---

#2. Margins & Spacing

---

#2. Margins & Spacing

---

#2. Margins & Spacing

---

#2. Margins & Spacing

Margin and spacing considerations:

- <p>Margins around plot make it easier to embed figures</p>

- Spacing between text elements improves readability

- Disproportionate white (empty) space can be distracting

- Padding inside the panel is essential for a sense of "completeness"

<br>

Know your margin/spacing elements in {ggplot2}!

- `margin(t = 0, r = 0, b = 0, l = 0, unit = c("pt", "mm", "cm", "in"))`

- `hjust`, `vjust`, and `lineheight` arguments in `element_text()`

- `expand` argument with `expansion()` in `scale_*()` and `coord_*()` layers

---

```r
*state_election_plot_A
```
]
 
.panel2-margins-auto[
![](feb_2020_ggplot2_files/figure-html/margins_auto_01_output-1.svg)
]

---
count: false

```r
state_election_plot_A +
* theme(
*   plot.background = element_rect(color = 'black')
* )
```
]
 
.panel2-margins-auto[
![](feb_2020_ggplot2_files/figure-html/margins_auto_02_output-1.svg)
]

---
count: false

```r
state_election_plot_A +
  theme(
    plot.background = element_rect(color = 'black')
  ) +
* theme(
*   plot.margin = margin(1, .8, .8, .8, "cm")
* )
```
]
 
.panel2-margins-auto[
![](feb_2020_ggplot2_files/figure-html/margins_auto_03_output-1.svg)
]

---
count: false

```r
state_election_plot_A +
  theme(
    plot.background = element_rect(color = 'black')
  ) +
  theme(
    plot.margin = margin(1, .8, .8, .8, "cm")
  ) +
* theme(
*   plot.title = element_text(margin = margin(b = .3, unit = "cm"))
* )
```
]
 
.panel2-margins-auto[
![](feb_2020_ggplot2_files/figure-html/margins_auto_04_output-1.svg)
]

---
count: false

---
count: false

---
count: false

```r
state_election_plot_A +
  theme(
    plot.background = element_rect(color = 'black')
  ) +
  theme(
    plot.margin = margin(1, .8, .8, .8, "cm")
  ) +
  theme(
    plot.title = element_text(margin = margin(b = .3, unit = "cm"))
  ) +
  theme(
    plot.subtitle = element_text(margin = margin(b = .3, unit = "cm"))
  ) +
  theme(
    axis.text.x = element_text(margin = margin(t = .2, unit = "cm"))
  ) +
* theme(
*   axis.text.y = element_text(margin = margin(r = .1, unit = "cm"))
* )
```
]
 
.panel2-margins-auto[
![](feb_2020_ggplot2_files/figure-html/margins_auto_07_output-1.svg)
]

---
count: false

```r
state_election_plot_A +
  theme(
    plot.background = element_rect(color = 'black')
  ) +
  theme(
    plot.margin = margin(1, .8, .8, .8, "cm")
  ) +
  theme(
    plot.title = element_text(margin = margin(b = .3, unit = "cm"))
  ) +
  theme(
    plot.subtitle = element_text(margin = margin(b = .3, unit = "cm"))
  ) +
  theme(
    axis.text.x = element_text(margin = margin(t = .2, unit = "cm"))
  ) +
  theme(
    axis.text.y = element_text(margin = margin(r = .1, unit = "cm"))
  ) +
* theme(
*   axis.title.x = element_text(margin = margin(t = .3, unit = "cm"))
* )
```
]
 
.panel2-margins-auto[
![](feb_2020_ggplot2_files/figure-html/margins_auto_08_output-1.svg)
]

---
count: false

```r
state_election_plot_A +
  theme(
    plot.background = element_rect(color = 'black')
  ) +
  theme(
    plot.margin = margin(1, .8, .8, .8, "cm")
  ) +
  theme(
    plot.title = element_text(margin = margin(b = .3, unit = "cm"))
  ) +
  theme(
    plot.subtitle = element_text(margin = margin(b = .3, unit = "cm"))
  ) +
  theme(
    axis.text.x = element_text(margin = margin(t = .2, unit = "cm"))
  ) +
  theme(
    axis.text.y = element_text(margin = margin(r = .1, unit = "cm"))
  ) +
  theme(
    axis.title.x = element_text(margin = margin(t = .3, unit = "cm"))
  ) +
* coord_cartesian(expand = FALSE)
```
]
 
.panel2-margins-auto[
![](feb_2020_ggplot2_files/figure-html/margins_auto_09_output-1.svg)
]

---

```r
state_election_plot_A +
  theme(
    plot.background = element_rect(color = 'black')
  ) +
  theme(
    plot.margin = margin(1, .8, .8, .8, "cm")
  ) +
  theme(
    plot.title = element_text(margin = margin(b = .3, unit = "cm"))
  ) +
  theme(
    plot.subtitle = element_text(margin = margin(b = .3, unit = "cm"))
  ) +
  theme(
    axis.text.x = element_text(margin = margin(t = .2, unit = "cm"))
  ) +
  theme(
    axis.text.y = element_text(margin = margin(r = .1, unit = "cm"))
  ) +
  theme(
    axis.title.x = element_text(margin = margin(t = .3, unit = "cm"))
  ) +
* scale_x_continuous(expand = expansion(add = 3))
```
]
 
.panel2-margins-rotate[
![](feb_2020_ggplot2_files/figure-html/margins_rotate_01_output-1.svg)
]

---
count: false

```r
state_election_plot_A +
  theme(
    plot.background = element_rect(color = 'black')
  ) +
  theme(
    plot.margin = margin(1, .8, .8, .8, "cm")
  ) +
  theme(
    plot.title = element_text(margin = margin(b = .3, unit = "cm"))
  ) +
  theme(
    plot.subtitle = element_text(margin = margin(b = .3, unit = "cm"))
  ) +
  theme(
    axis.text.x = element_text(margin = margin(t = .2, unit = "cm"))
  ) +
  theme(
    axis.text.y = element_text(margin = margin(r = .1, unit = "cm"))
  ) +
  theme(
    axis.title.x = element_text(margin = margin(t = .3, unit = "cm"))
  ) +
* scale_x_continuous(expand = expansion(add = c(2, 3)))
```
]
 
.panel2-margins-rotate[
![](feb_2020_ggplot2_files/figure-html/margins_rotate_02_output-1.svg)
]

---
count: false

```r
state_election_plot_A +
  theme(
    plot.background = element_rect(color = 'black')
  ) +
  theme(
    plot.margin = margin(1, .8, .8, .8, "cm")
  ) +
  theme(
    plot.title = element_text(margin = margin(b = .3, unit = "cm"))
  ) +
  theme(
    plot.subtitle = element_text(margin = margin(b = .3, unit = "cm"))
  ) +
  theme(
    axis.text.x = element_text(margin = margin(t = .2, unit = "cm"))
  ) +
  theme(
    axis.text.y = element_text(margin = margin(r = .1, unit = "cm"))
  ) +
  theme(
    axis.title.x = element_text(margin = margin(t = .3, unit = "cm"))
  ) +
* scale_x_continuous(expand = expansion(add = c(2, 3)), breaks = pretty_breaks(5))
```
]
 
.panel2-margins-rotate[
![](feb_2020_ggplot2_files/figure-html/margins_rotate_03_output-1.svg)
]

---

#2. Margins & Spacing (End!)

```r
state_election_plot_A +
  theme(
    plot.margin = margin(1, .8, .8, .8, "cm"),
    plot.title = element_text(margin = margin(b = .3, unit = "cm")),
    plot.subtitle = element_text(margin = margin(b = .3, unit = "cm")),
    axis.text.x = element_text(margin = margin(t = .2, unit = "cm")),
    axis.text.y = element_text(margin = margin(r = .1, unit = "cm")),
    axis.title.x = element_text(margin = margin(t = .3, unit = "cm"))
  ) +
  scale_x_continuous(
    expand = expansion(add = c(2, 3)),
    breaks = pretty_breaks(5)
  )
```

Save our progress!

```r
state_election_plot_B
```

]

]

---

#2. Margins & Spacing (Before-After)

]

]

---

#2. Margins & Spacing (Before-After)

]

]

---

# 3. Legends

---

#3. Legends

Legends are really hard:

- <p>They contain important info, but difficult to make them not look out of place</p>

- It's better not to have a legend, if you can get away with it

- But sometimes we don't have the luxury of doing so

<br>

**Alternative**: consider _labeling the data directly_

---

---

#3. Legends

Legends are really hard:

- <p>They contain important info, but difficult to make them not look out of place</p>

- It's better not to have a legend, if you can get away with it

- But sometimes we don't have the luxury of doing so

<br>

**Alternative**: consider _labeling the data directly_

<br>

But if you must have a legend, make it so that the reader is **_naturally guided_** to it

- <p>Positioned at the top-left or top-center of the plot</p>

- Blends smoothly into the rest of the plot (_NOT_ make them stand out!)

---

```r
*state_election_plot_B
```
]
 
.panel2-legends2-auto[
![](feb_2020_ggplot2_files/figure-html/legends2_auto_01_output-1.svg)
]

---
count: false

```r
state_election_plot_B +
* theme(
*   legend.key = element_rect(color = NA, fill = NA),
* )
```
]
 
.panel2-legends2-auto[
![](feb_2020_ggplot2_files/figure-html/legends2_auto_02_output-1.svg)
]

---
count: false

```r
state_election_plot_B +
  theme(
    legend.key = element_rect(color = NA, fill = NA),
  ) +
* theme(
*   legend.position = c(.45, .93)
* )
```
]
 
.panel2-legends2-auto[
![](feb_2020_ggplot2_files/figure-html/legends2_auto_03_output-1.svg)
]

---
count: false

```r
state_election_plot_B +
  theme(
    legend.key = element_rect(color = NA, fill = NA),
  ) +
  theme(
    legend.position = c(.45, .93)
  ) +
* theme(
*   legend.direction = "horizontal"
* )
```
]
 
.panel2-legends2-auto[
![](feb_2020_ggplot2_files/figure-html/legends2_auto_04_output-1.svg)
]

---
count: false

```r
state_election_plot_B +
  theme(
    legend.key = element_rect(color = NA, fill = NA),
  ) +
  theme(
    legend.position = c(.45, .93)
  ) +
  theme(
    legend.direction = "horizontal"
  ) +
* theme(
*   legend.background = element_rect(fill = "grey92")
* )
```
]
 
.panel2-legends2-auto[
![](feb_2020_ggplot2_files/figure-html/legends2_auto_05_output-1.svg)
]

---
count: false

```r
state_election_plot_B +
  theme(
    legend.key = element_rect(color = NA, fill = NA),
  ) +
  theme(
    legend.position = c(.45, .93)
  ) +
  theme(
    legend.direction = "horizontal"
  ) +
  theme(
    legend.background = element_rect(fill = "grey92")
  ) +
* scale_y_continuous(
*   expand = expansion(add = c(0.02, .05)),
*   labels = percent_format(accuracy = 1)
* )
```
]
 
.panel2-legends2-auto[
![](feb_2020_ggplot2_files/figure-html/legends2_auto_06_output-1.svg)
]

---
count: false

```r
state_election_plot_B +
  theme(
    legend.key = element_rect(color = NA, fill = NA),
  ) +
  theme(
    legend.position = c(.45, .93)
  ) +
  theme(
    legend.direction = "horizontal"
  ) +
  theme(
    legend.background = element_rect(fill = "grey92")
  ) +
  scale_y_continuous(
    expand = expansion(add = c(0.02, .05)),
    labels = percent_format(accuracy = 1)
  ) +
* labs(color = NULL)
```
]
 
.panel2-legends2-auto[
![](feb_2020_ggplot2_files/figure-html/legends2_auto_07_output-1.svg)
]

---

#3. Legends (End!)

```r
state_election_plot_B +
  theme(
    legend.key = element_rect(fill = NA),
    legend.position = c(.45, .93),
    legend.direction = "horizontal",
    legend.background = element_rect(fill = "grey92")
  ) + 
  scale_y_continuous(
    expand = expansion(add = c(0.02, .05)),
    labels = percent_format(accuracy = 1)
  ) +
  labs(color = NULL)
```

Save our progress!

```r
state_election_plot_C
```

]

]

---

#3. Legends (Before-After)

]

]

---

# 4. Color

---

#4. Color

Colors are a double-edged sword

- <p>Perception can vary widely depending on reader, medium, culture, etc.</p>

- Color space is complex; no "all in one" solution (RGB/hex, [HSV](https://colordesigner.io/convert/hextohsv), [HCL](http://hclwizard.org/color-scheme/))

---

```r
chroma::show_col(rainbow(6))
```

---

```r
specplot(rainbow(6))
```

---

### HSV

<img src="https://yjunechoe.github.io/posts/2020-10-22-analysis-of-everycolorbots-tweets/HSV.png" style="position: relative; top: 100px">
]

---

### HSV

<img src="https://yjunechoe.github.io/posts/2020-10-22-analysis-of-everycolorbots-tweets/HSV.png" style="position: relative; top: 100px">
]

### HCL

<video controls autoplay src="img/HCL_space.webm">
]

---

#4. Color

Colors are a double-edged sword

- Perception can vary widely depending on reader, medium, culture, etc.

- Color space is complex - no "all in one" solution (RGB, hex, [HSV](https://colordesigner.io/convert/hextohsv), [HCL](http://hclwizard.org/color-scheme/))

<br>

If you must use colors, DO:

- <p>Avoid pure colors (no random sampling from the rainbow!)</p>

- Contrast colors in more than one dimension

---

<br>

source: https://blog.datawrapper.de/beautifulcolors/

---

<br>

source: https://blog.datawrapper.de/beautifulcolors/

---

# Correlation matrix example

```r
corr_left <- ggcorrplot::ggcorrplot(cor(mtcars)) + scale_fill_gradient2(low = "blue", mid = "white", high = "red", limits = c(-1, 1), guide = guide_colorbar(title = NULL, barheight = unit(15, 'lines')))
corr_right <- ggcorrplot::ggcorrplot(cor(mtcars)) + scale_fill_continuous_diverging(palette = "Blue-Red 3", limits = c(-1, 1), guide = guide_colorbar(title = NULL, barheight = unit(15, 'lines')))
patchwork::wrap_plots(corr_left, corr_right, nrow = 1)
```

---

# Correlation matrix example

```r
corr_desaturated_left <- cowplot::ggdraw(colorblindr::edit_colors(corr_left, desaturate))
corr_desaturated_right <- cowplot::ggdraw(colorblindr::edit_colors(corr_right, desaturate))
patchwork::wrap_plots(corr_desaturated_left, corr_desaturated_right, nrow = 1)
```

---

# Correlation matrix example

```r
palette_left <- scales::div_gradient_pal(low = "blue", mid = "white", high = "red")(seq(0, 1, length.out = 7))
palette_right <- colorspace::diverge_hcl(7, palette = "Blue-Red 3")
```

---

#4. Color

Colors are a double-edged sword

- Perception can vary widely depending on reader, medium, culture, etc.

- Color space is complex; no "all in one" solution (RGB, hex, [HSV](https://colordesigner.io/convert/hextohsv), [HCL](http://hclwizard.org/color-scheme/))

<br>

If you must, DO:

- Avoid pure colors (no random sampling from the rainbow!)

- Contrast colors in more than one dimension

<br>

If you aren't sure, use [pre-made palettes](https://github.com/EmilHvitfeldt/paletteer) or play around with [online color tools](https://color.adobe.com/create/color-wheel)

---

```r
*state_election_plot_C
```
]
 
.panel2-colors1-auto[
![](feb_2020_ggplot2_files/figure-html/colors1_auto_01_output-1.svg)
]

---
count: false

```r
state_election_plot_C +
* theme(panel.background = element_rect(fill = NA))
```
]
 
.panel2-colors1-auto[
![](feb_2020_ggplot2_files/figure-html/colors1_auto_02_output-1.svg)
]

---
count: false

```r
state_election_plot_C +
  theme(panel.background = element_rect(fill = NA)) +
* theme(legend.background = element_rect(fill = NA))
```
]
 
.panel2-colors1-auto[
![](feb_2020_ggplot2_files/figure-html/colors1_auto_03_output-1.svg)
]

---
count: false

```r
state_election_plot_C +
  theme(panel.background = element_rect(fill = NA)) +
  theme(legend.background = element_rect(fill = NA)) +
* theme(axis.line = element_line())
```
]
 
.panel2-colors1-auto[
![](feb_2020_ggplot2_files/figure-html/colors1_auto_04_output-1.svg)
]

---
count: false

```r
state_election_plot_C +
  theme(panel.background = element_rect(fill = NA)) +
  theme(legend.background = element_rect(fill = NA)) +
  theme(axis.line = element_line()) +
* scale_color_manual(
*   values = c("#F2A05C", "#8C5A48", "#5C0424")
* )
```
]
 
.panel2-colors1-auto[
![](feb_2020_ggplot2_files/figure-html/colors1_auto_05_output-1.svg)
]

---
count: false

---
count: false

---
count: false

```r
state_election_plot_C +
  theme(panel.background = element_rect(fill = NA)) +
  theme(legend.background = element_rect(fill = NA)) +
  theme(axis.line = element_line()) +
  scale_color_manual(
    values = c("#F2A05C", "#8C5A48", "#5C0424")
  ) +
  scale_color_manual(
    values = c(
      hex(HSV( 27,   0.62,    0.95)),
      hex(HSV( 16,   0.49,    0.55)),
      hex(HSV(338,   0.96,    0.36))
    )
  ) +
  scale_color_manual(
    values = c(
      hex(HSV( 33,   0.62,       1)),
      hex(HSV( 16,   0.49,       1)),
      hex(HSV(338,   0.96,       1))
    )
  ) +
* scale_color_manual(
*   values = c(
*     hex(HSV( 33,      1,    0.95)),
*     hex(HSV( 16,      1,    0.55)),
*     hex(HSV(338,      1,    0.36))
*   )
* )
```
]
 
.panel2-colors1-auto[
![](feb_2020_ggplot2_files/figure-html/colors1_auto_08_output-1.svg)
]

---
count: false

```r
state_election_plot_C +
  theme(panel.background = element_rect(fill = NA)) +
  theme(legend.background = element_rect(fill = NA)) +
  theme(axis.line = element_line()) +
  scale_color_manual(
    values = c("#F2A05C", "#8C5A48", "#5C0424")
  ) +
  scale_color_manual(
    values = c(
      hex(HSV( 27,   0.62,    0.95)),
      hex(HSV( 16,   0.49,    0.55)),
      hex(HSV(338,   0.96,    0.36))
    )
  ) +
  scale_color_manual(
    values = c(
      hex(HSV( 33,   0.62,       1)),
      hex(HSV( 16,   0.49,       1)),
      hex(HSV(338,   0.96,       1))
    )
  ) +
  scale_color_manual(
    values = c(
      hex(HSV( 33,      1,    0.95)),
      hex(HSV( 16,      1,    0.55)),
      hex(HSV(338,      1,    0.36))
    )
  ) +
* geom_line(size = 1.5)
```
]
 
.panel2-colors1-auto[
![](feb_2020_ggplot2_files/figure-html/colors1_auto_09_output-1.svg)
]

---
count: false

```r
state_election_plot_C +
  theme(panel.background = element_rect(fill = NA)) +
  theme(legend.background = element_rect(fill = NA)) +
  theme(axis.line = element_line()) +
  scale_color_manual(
    values = c("#F2A05C", "#8C5A48", "#5C0424")
  ) +
  scale_color_manual(
    values = c(
      hex(HSV( 27,   0.62,    0.95)),
      hex(HSV( 16,   0.49,    0.55)),
      hex(HSV(338,   0.96,    0.36))
    )
  ) +
  scale_color_manual(
    values = c(
      hex(HSV( 33,   0.62,       1)),
      hex(HSV( 16,   0.49,       1)),
      hex(HSV(338,   0.96,       1))
    )
  ) +
  scale_color_manual(
    values = c(
      hex(HSV( 33,      1,    0.95)),
      hex(HSV( 16,      1,    0.55)),
      hex(HSV(338,      1,    0.36))
    )
  ) +
  geom_line(size = 1.5) +
* scale_color_manual(
*   values = c("#F2A05C", "#8C5A48", "#5C0424")
* )
```
]
 
.panel2-colors1-auto[
![](feb_2020_ggplot2_files/figure-html/colors1_auto_10_output-1.svg)
]

---
count: false

```r
state_election_plot_C +
  theme(panel.background = element_rect(fill = NA)) +
  theme(legend.background = element_rect(fill = NA)) +
  theme(axis.line = element_line()) +
  scale_color_manual(
    values = c("#F2A05C", "#8C5A48", "#5C0424")
  ) +
  scale_color_manual(
    values = c(
      hex(HSV( 27,   0.62,    0.95)),
      hex(HSV( 16,   0.49,    0.55)),
      hex(HSV(338,   0.96,    0.36))
    )
  ) +
  scale_color_manual(
    values = c(
      hex(HSV( 33,   0.62,       1)),
      hex(HSV( 16,   0.49,       1)),
      hex(HSV(338,   0.96,       1))
    )
  ) +
  scale_color_manual(
    values = c(
      hex(HSV( 33,      1,    0.95)),
      hex(HSV( 16,      1,    0.55)),
      hex(HSV(338,      1,    0.36))
    )
  ) +
  geom_line(size = 1.5) +
  scale_color_manual(
    values = c("#F2A05C", "#8C5A48", "#5C0424")
  ) +
* scale_color_manual(values = desaturate(c("#F2A05C", "#8C5A48", "#5C0424")))
```
]
 
.panel2-colors1-auto[
![](feb_2020_ggplot2_files/figure-html/colors1_auto_11_output-1.svg)
]

---

```r
state_election_plot_C +
  theme(panel.background = element_rect(fill = NA)) +
  theme(legend.background = element_rect(fill = NA)) +
  theme(axis.line = element_line()) +
  geom_line(size = 1.5) +
* ggthemes::scale_color_colorblind()
```
]
 
.panel2-themes-rotate[
![](feb_2020_ggplot2_files/figure-html/themes_rotate_01_output-1.svg)
]

---
count: false

```r
state_election_plot_C +
  theme(panel.background = element_rect(fill = NA)) +
  theme(legend.background = element_rect(fill = NA)) +
  theme(axis.line = element_line()) +
  geom_line(size = 1.5) +
* ggsci::scale_color_simpsons()
```
]
 
.panel2-themes-rotate[
![](feb_2020_ggplot2_files/figure-html/themes_rotate_02_output-1.svg)
]

---
count: false

```r
state_election_plot_C +
  theme(panel.background = element_rect(fill = NA)) +
  theme(legend.background = element_rect(fill = NA)) +
  theme(axis.line = element_line()) +
  geom_line(size = 1.5) +
* ghibli::scale_color_ghibli_d("SpiritedMedium")
```
]
 
.panel2-themes-rotate[
![](feb_2020_ggplot2_files/figure-html/themes_rotate_03_output-1.svg)
]

---
count: false

```r
state_election_plot_C +
  theme(panel.background = element_rect(fill = NA)) +
  theme(legend.background = element_rect(fill = NA)) +
  theme(axis.line = element_line()) +
  geom_line(size = 1.5) +
* scale_color_manual(values = wesanderson::wes_palette("Moonrise2", 3, "discrete"))
```
]
 
.panel2-themes-rotate[
![](feb_2020_ggplot2_files/figure-html/themes_rotate_04_output-1.svg)
]

---
count: false

```r
state_election_plot_C +
  theme(panel.background = element_rect(fill = NA)) +
  theme(legend.background = element_rect(fill = NA)) +
  theme(axis.line = element_line()) +
  geom_line(size = 1.5) +
* scale_color_manual(values = LaCroixColoR::lacroix_palette("PeachPear", 3, "discrete"))
```
]
 
.panel2-themes-rotate[
![](feb_2020_ggplot2_files/figure-html/themes_rotate_05_output-1.svg)
]

---
count: false

```r
state_election_plot_C +
  theme(panel.background = element_rect(fill = NA)) +
  theme(legend.background = element_rect(fill = NA)) +
  theme(axis.line = element_line()) +
  geom_line(size = 1.5) +
* list(scale_color_manual(values = c("#65657F", "#855F4C", "#556760")), annotation_raster(bernie, xmin = 1986, xmax = 2016, ymin = .4, ymax = .65))
```
]
 
.panel2-themes-rotate[
![](feb_2020_ggplot2_files/figure-html/themes_rotate_06_output-1.svg)
]

---
count: false

```r
state_election_plot_C +
  theme(panel.background = element_rect(fill = NA)) +
  theme(legend.background = element_rect(fill = NA)) +
  theme(axis.line = element_line()) +
  geom_line(size = 1.5) +
* palettetown::scale_color_poke(pokemon = "pikachu")
```
]
 
.panel2-themes-rotate[
![](feb_2020_ggplot2_files/figure-html/themes_rotate_07_output-1.svg)
]

---

```r
state_election_plot_C +
  theme(panel.background = element_rect(fill = NA)) +
  theme(legend.background = element_rect(fill = NA)) +
  theme(axis.line = element_line()) +
  geom_line(size = 1.5) +
  theme(plot.background = element_rect(fill = "#ACACAC"), panel.grid = element_blank()) +
* palettetown::scale_color_poke(pokemon = "pikachu")
```
]
 
.panel2-darkthemes-rotate[
![](feb_2020_ggplot2_files/figure-html/darkthemes_rotate_01_output-1.svg)
]

---
count: false

```r
state_election_plot_C +
  theme(panel.background = element_rect(fill = NA)) +
  theme(legend.background = element_rect(fill = NA)) +
  theme(axis.line = element_line()) +
  geom_line(size = 1.5) +
  theme(plot.background = element_rect(fill = "#ACACAC"), panel.grid = element_blank()) +
* scale_color_manual(values = sequential_hcl(3, palette = "ag_Sunset"))
```
]
 
.panel2-darkthemes-rotate[
![](feb_2020_ggplot2_files/figure-html/darkthemes_rotate_02_output-1.svg)
]

---

```r
saturated_sunset <- chroma::as.hsv(sequential_hcl(3, palette = "ag_Sunset"))[, 'h'] %>% 
  map_chr(~ hex(HSV(H = .x, S = 1, V = 1)))

state_election_plot_C +
  theme(
    axis.line = element_line(color = "coral"),
    axis.text = element_text(color = "white"),
    legend.background = element_rect(fill = "#0F0D1A", color = "white", size = 0.5, linetype = "dashed"),
    panel.background = element_rect(fill = NA),
    panel.grid.major.x = element_blank(),
    panel.grid.major.y = element_line(color = "red", linetype = "dotted"),
    panel.grid.minor = element_blank(),
    plot.background = element_rect(fill = "#0F0D1A"),
    plot.subtitle = element_text(family = "VCR OSD Mono"),
    plot.title = element_text(family = "Blade Runner Movie Font"),
    text = element_text(color = "white", family = "SF Alien Encounters")
  ) +
  lemon::coord_capped_cart(left = "top") +
  lemon::geom_pointline(size = 2, distance = unit(2, 'pt'), key_glyph = "timeseries") +
  scale_color_manual(
    values = saturated_sunset,
    guide = guide_legend(override.aes = list(size = 1))
  )
```

---

```r
*state_election_plot_C
```
]
 
.panel2-colors2-auto[
![](feb_2020_ggplot2_files/figure-html/colors2_auto_01_output-1.svg)
]

---
count: false

```r
state_election_plot_C +
* theme(
*   panel.background = element_rect(fill = NA)
* )
```
]
 
.panel2-colors2-auto[
![](feb_2020_ggplot2_files/figure-html/colors2_auto_02_output-1.svg)
]

---
count: false

```r
state_election_plot_C +
  theme(
    panel.background = element_rect(fill = NA)
  ) +
* theme(
*   legend.background = element_rect(fill = NA)
* )
```
]
 
.panel2-colors2-auto[
![](feb_2020_ggplot2_files/figure-html/colors2_auto_03_output-1.svg)
]

---
count: false

```r
state_election_plot_C +
  theme(
    panel.background = element_rect(fill = NA)
  ) +
  theme(
    legend.background = element_rect(fill = NA)
  ) +
* theme(
*   axis.line = element_line()
* )
```
]
 
.panel2-colors2-auto[
![](feb_2020_ggplot2_files/figure-html/colors2_auto_04_output-1.svg)
]

---
count: false

```r
state_election_plot_C +
  theme(
    panel.background = element_rect(fill = NA)
  ) +
  theme(
    legend.background = element_rect(fill = NA)
  ) +
  theme(
    axis.line = element_line()
  ) +
* scale_color_manual(
*   values = c("#e1e1e1", "#e1e1e1", "#2b5e82")
* )
```
]
 
.panel2-colors2-auto[
![](feb_2020_ggplot2_files/figure-html/colors2_auto_05_output-1.svg)
]

---
count: false

```r
state_election_plot_C +
  theme(
    panel.background = element_rect(fill = NA)
  ) +
  theme(
    legend.background = element_rect(fill = NA)
  ) +
  theme(
    axis.line = element_line()
  ) +
  scale_color_manual(
    values = c("#e1e1e1", "#e1e1e1", "#2b5e82")
  ) +
* guides(
*   color = guide_none()
* )
```
]
 
.panel2-colors2-auto[
![](feb_2020_ggplot2_files/figure-html/colors2_auto_06_output-1.svg)
]

---
count: false

```r
state_election_plot_C +
  theme(
    panel.background = element_rect(fill = NA)
  ) +
  theme(
    legend.background = element_rect(fill = NA)
  ) +
  theme(
    axis.line = element_line()
  ) +
  scale_color_manual(
    values = c("#e1e1e1", "#e1e1e1", "#2b5e82")
  ) +
  guides(
    color = guide_none()
  ) +
* geom_line(size = 1.5)
```
]
 
.panel2-colors2-auto[
![](feb_2020_ggplot2_files/figure-html/colors2_auto_07_output-1.svg)
]

---
count: false

```r
state_election_plot_C +
  theme(
    panel.background = element_rect(fill = NA)
  ) +
  theme(
    legend.background = element_rect(fill = NA)
  ) +
  theme(
    axis.line = element_line()
  ) +
  scale_color_manual(
    values = c("#e1e1e1", "#e1e1e1", "#2b5e82")
  ) +
  guides(
    color = guide_none()
  ) +
  geom_line(size = 1.5) +
* theme(plot.subtitle = ggtext::element_markdown())
```
]
 
.panel2-colors2-auto[
![](feb_2020_ggplot2_files/figure-html/colors2_auto_08_output-1.svg)
]

---

```r
state_election_plot_C +
  theme(
    panel.background = element_rect(fill = NA)
  ) +
  theme(
    legend.background = element_rect(fill = NA)
  ) +
  theme(
    axis.line = element_line()
  ) +
  scale_color_manual(
    values = c("#e1e1e1", "#e1e1e1", "#2b5e82")
  ) +
  guides(
    color = guide_none()
  ) +
  geom_line(size = 1.5) +
  theme(plot.subtitle = ggtext::element_markdown()) +
* labs(subtitle = "<span style='color:#2b5e82'>Pennsylvania</span> is a swing state! Go vote!")
```
]
 
.panel2-colors2-rotate[
![](feb_2020_ggplot2_files/figure-html/colors2_rotate_01_output-1.png)
]

---
count: false

```r
state_election_plot_C +
  theme(
    panel.background = element_rect(fill = NA)
  ) +
  theme(
    legend.background = element_rect(fill = NA)
  ) +
  theme(
    axis.line = element_line()
  ) +
  scale_color_manual(
    values = c("#e1e1e1", "#e1e1e1", "#2b5e82")
  ) +
  guides(
    color = guide_none()
  ) +
  geom_line(size = 1.5) +
  theme(plot.subtitle = ggtext::element_markdown()) +
* labs(subtitle = "<strong style='color:#2b5e82'>Pennsylvania</strong> is a swing state! Go vote!")
```
]
 
.panel2-colors2-rotate[
![](feb_2020_ggplot2_files/figure-html/colors2_rotate_02_output-1.png)
]

---
count: false

```r
state_election_plot_C +
  theme(
    panel.background = element_rect(fill = NA)
  ) +
  theme(
    legend.background = element_rect(fill = NA)
  ) +
  theme(
    axis.line = element_line()
  ) +
  scale_color_manual(
    values = c("#e1e1e1", "#e1e1e1", "#2b5e82")
  ) +
  guides(
    color = guide_none()
  ) +
  geom_line(size = 1.5) +
  theme(plot.subtitle = ggtext::element_markdown()) +
* labs(subtitle = "<strong style='color:#0E4369'>Pennsylvania</strong> is a swing state! Go vote!")
```
]
 
.panel2-colors2-rotate[
![](feb_2020_ggplot2_files/figure-html/colors2_rotate_03_output-1.png)
]

---

#4. Colors v.1 (End!)

Save our progress!

```r
state_election_plot_D1
```

]

]

---

#4. Colors v.2 (End!)

```r
state_election_plot_C +
  geom_line(size = 1.5) +
  theme(
    panel.background = element_rect(fill = NA),
    legend.background = element_rect(fill = NA),
    axis.line = element_line(),
    plot.subtitle = element_markdown()
  ) +
  guides(color = guide_none()) +
  scale_color_manual(values = c("#e1e1e1", "#e1e1e1", "#2b5e82")) +
  labs(
    subtitle = "<strong style='color:#0E4369'>Pennsylvania</strong>
                is a swing state! Go vote!"
  )
```

Save our progress!

```r
state_election_plot_D2
```

]

]

---

#4. Colors (Before-After)

]

]

---

#4. Colors (Before-After)

]

]

---

```r
*state_election_plot
```
]
 
.panel2-final-auto[
![](feb_2020_ggplot2_files/figure-html/final_auto_01_output-1.png)
]

---
count: false

```r
state_election_plot +
* theme_classic(
*   base_family = "Open Sans",
*   base_size = 15
* )
```
]
 
.panel2-final-auto[
![](feb_2020_ggplot2_files/figure-html/final_auto_02_output-1.png)
]

---
count: false

```r
state_election_plot +
  theme_classic(
    base_family = "Open Sans",
    base_size = 15
  ) +
* guides(color = guide_none())
```
]
 
.panel2-final-auto[
![](feb_2020_ggplot2_files/figure-html/final_auto_03_output-1.png)
]

---
count: false

```r
state_election_plot +
  theme_classic(
    base_family = "Open Sans",
    base_size = 15
  ) +
  guides(color = guide_none()) +
* geom_line(size = 1.5)
```
]
 
.panel2-final-auto[
![](feb_2020_ggplot2_files/figure-html/final_auto_04_output-1.png)
]

---
count: false

```r
state_election_plot +
  theme_classic(
    base_family = "Open Sans",
    base_size = 15
  ) +
  guides(color = guide_none()) +
  geom_line(size = 1.5) +
* scale_color_manual(
*   values = c("#e1e1e1", "#e1e1e1", "#2b5e82")
* )
```
]
 
.panel2-final-auto[
![](feb_2020_ggplot2_files/figure-html/final_auto_05_output-1.png)
]

---
count: false

---
count: false

```r
state_election_plot +
  theme_classic(
    base_family = "Open Sans",
    base_size = 15
  ) +
  guides(color = guide_none()) +
  geom_line(size = 1.5) +
  scale_color_manual(
    values = c("#e1e1e1", "#e1e1e1", "#2b5e82")
  ) +
  labs(
    y = NULL,
    x = "Election Year",
    title = "Percent of democrat votes by state",
    subtitle = "<strong style='color:#0E4369'>Pennsylvania</strong> is a swing state! Go vote!"
  ) +
* theme(
*   plot.margin = margin(.8, 1, .7, .8, "cm"),
*   plot.title = element_text(
*     family = "Roboto Slab",
*     size = 20,
*     margin = margin(b = .3, unit = "cm")
*   ),
*   plot.title.position = "plot",
*   plot.subtitle = element_markdown(
*     margin = margin(b = .3, unit = "cm")
*   ),
*   axis.title.x = element_text(
*     margin = margin(t = .5, unit = "cm")
*   )
* )
```
]
 
.panel2-final-auto[
![](feb_2020_ggplot2_files/figure-html/final_auto_07_output-1.png)
]

---

# 5(?). Plot Quality

---

# 5(?). Plot quality: Resolution

---

**Point-and-click method in RStudio**

---

# 5(?). Plot quality: Scaling

---

**Stretching in RStudio**

---

# 5(?). Plot quality: Solution

Use the `ggsave()` function (only works for ggplot2 plots):

- Automatically configures sensible defaults

- Makes your figures fully reproducible!

```r
ggsave("highres.png", p, width = 10, height = 6.2, units = "in", dpi = 300) # png format
ggsave("highres.pdf", p, width = 10, height = 6.2, units = "in", device = cairo_pdf) # pdf format w/ Cairo
```

Use better-quality, OS-independent graphic devices (works for any figure):

```r
library(ragg) # R interface to the AGG device - https://github.com/r-lib/ragg

# Step 1: initialize device
agg_png("highres_agg.png", width = 10, height = 6.2, units = "in")

# Step 2: plot
plot(p)

# Step 3: close device
invisible(dev.off())
```

---

**ggsave() png**

---

**ggsave() pdf**

---

**ragg png**

---

# 5(?). Plot quality: Takeaways

**1. Plot objects are not images**

```r
object.size(state_election_plot_D2)
```

```
  34032 bytes
```

```r
fs::dir_info(path = "img", regexp = "point-and-click.png")$size
```

```
  43.6K
```

**2. The conversion of plot to image is not neutral**

- Depends on dimensions, resolution, type of graphic device/operating system, etc.

- Exert full control over the process to avoid any surprises at the end!

<br>

Useful reference: [https://bookdown.org/rdpeng/exdata/graphics-devices.html](https://bookdown.org/rdpeng/exdata/graphics-devices.html)

---

# Showcasing

---

# First, globally set our theme!

You can set global theme with `theme_set()` and `theme_update()`:

<br>

- `theme_set()` takes a custom theme as a argument (e.g., `theme_bw()`)

<br>

- `theme_update()` takes individual theme elements as arguments and updates the current theme

<br>

- `theme_get()` returns the current theme

]

```r
theme_set(
  theme_classic(
    base_family = "Open Sans",
    base_size = 15
  )
)

theme_update(
  plot.margin = margin(.8, 1, .7, .8, "cm"),
  plot.title = element_text(
    family = "Roboto Slab",
    size = 20,
    margin = margin(b = .5, unit = "cm")
  ),
  plot.title.position = "plot",
  axis.title.x = element_text(
    margin = margin(t = .5, unit = "cm")
  )
)
```

]

---

## Minimal Designs

---

```r
*read_csv("https://raw.githubusercontent.com/yjunechoe/Semantic-Persistence/master/processed.csv")
```
]
 
.panel2-accuracy_bar-auto[

```
  # A tibble: 4,516 x 10
     Value Item    Cond   Group Subject          Time Answer Accuracy Type   logRT
     <chr> <chr>   <chr>  <chr> <chr>           <dbl> <chr>     <dbl> <chr>  <dbl>
   1 Yes   Awaken~ Subje~ B     5cfa77e907f7dd~   917 No            0 Criti~  6.82
   2 No    Awaken~ Subje~ B     5c1d21196036e4~  2624 No            1 Criti~  7.87
   3 No    Awaken~ Subje~ B     5d730aab6b4b16~  2809 No            1 Criti~  7.94
   4 No    Awaken~ Subje~ B     5ddef0fae454cd~  1587 No            1 Criti~  7.37
   5 No    Awaken~ Subje~ B     5e7a8e8b11bf56~  1697 No            1 Criti~  7.44
   6 No    Awaken~ Verb   A     5d4613a2da9cb6~  1484 No            1 Criti~  7.30
   7 No    Awaken~ Verb   A     579e1e2b275be6~  1556 No            1 Criti~  7.35
   8 No    Awaken~ Verb   A     5dfe69ed11d879~  1699 No            1 Criti~  7.44
   9 No    Awaken~ Verb   A     5b9442cecd3808~  2159 No            1 Criti~  7.68
  10 No    Awaken~ Verb   A     5e7f3328849917~  1132 No            1 Criti~  7.03
  # ... with 4,506 more rows
```
]

---
count: false

```r
read_csv("https://raw.githubusercontent.com/yjunechoe/Semantic-Persistence/master/processed.csv") %>%
* filter(Type == "Critical")
```
]
 
.panel2-accuracy_bar-auto[

```
  # A tibble: 1,466 x 10
     Value Item    Cond   Group Subject          Time Answer Accuracy Type   logRT
     <chr> <chr>   <chr>  <chr> <chr>           <dbl> <chr>     <dbl> <chr>  <dbl>
   1 Yes   Awaken~ Subje~ B     5cfa77e907f7dd~   917 No            0 Criti~  6.82
   2 No    Awaken~ Subje~ B     5c1d21196036e4~  2624 No            1 Criti~  7.87
   3 No    Awaken~ Subje~ B     5d730aab6b4b16~  2809 No            1 Criti~  7.94
   4 No    Awaken~ Subje~ B     5ddef0fae454cd~  1587 No            1 Criti~  7.37
   5 No    Awaken~ Subje~ B     5e7a8e8b11bf56~  1697 No            1 Criti~  7.44
   6 No    Awaken~ Verb   A     5d4613a2da9cb6~  1484 No            1 Criti~  7.30
   7 No    Awaken~ Verb   A     579e1e2b275be6~  1556 No            1 Criti~  7.35
   8 No    Awaken~ Verb   A     5dfe69ed11d879~  1699 No            1 Criti~  7.44
   9 No    Awaken~ Verb   A     5b9442cecd3808~  2159 No            1 Criti~  7.68
  10 No    Awaken~ Verb   A     5e7f3328849917~  1132 No            1 Criti~  7.03
  # ... with 1,456 more rows
```
]

---
count: false

```r
read_csv("https://raw.githubusercontent.com/yjunechoe/Semantic-Persistence/master/processed.csv") %>%
  filter(Type == "Critical") %>%
* group_by(Cond, Group)
```
]
 
.panel2-accuracy_bar-auto[

```
  # A tibble: 1,466 x 10
  # Groups:   Cond, Group [4]
     Value Item    Cond   Group Subject          Time Answer Accuracy Type   logRT
     <chr> <chr>   <chr>  <chr> <chr>           <dbl> <chr>     <dbl> <chr>  <dbl>
   1 Yes   Awaken~ Subje~ B     5cfa77e907f7dd~   917 No            0 Criti~  6.82
   2 No    Awaken~ Subje~ B     5c1d21196036e4~  2624 No            1 Criti~  7.87
   3 No    Awaken~ Subje~ B     5d730aab6b4b16~  2809 No            1 Criti~  7.94
   4 No    Awaken~ Subje~ B     5ddef0fae454cd~  1587 No            1 Criti~  7.37
   5 No    Awaken~ Subje~ B     5e7a8e8b11bf56~  1697 No            1 Criti~  7.44
   6 No    Awaken~ Verb   A     5d4613a2da9cb6~  1484 No            1 Criti~  7.30
   7 No    Awaken~ Verb   A     579e1e2b275be6~  1556 No            1 Criti~  7.35
   8 No    Awaken~ Verb   A     5dfe69ed11d879~  1699 No            1 Criti~  7.44
   9 No    Awaken~ Verb   A     5b9442cecd3808~  2159 No            1 Criti~  7.68
  10 No    Awaken~ Verb   A     5e7f3328849917~  1132 No            1 Criti~  7.03
  # ... with 1,456 more rows
```
]

---
count: false

```
  # A tibble: 4 x 3
    Cond    Group Accuracy
  * <chr>   <chr>    <dbl>
  1 Subject A        0.875
  2 Subject B        0.780
  3 Verb    A        0.846
  4 Verb    B        0.710
```
]

---
count: false

---
count: false

---
count: false

---
count: false

---
count: false

---
count: false

---
count: false

```r
read_csv("https://raw.githubusercontent.com/yjunechoe/Semantic-Persistence/master/processed.csv") %>%
  filter(Type == "Critical") %>%
  group_by(Cond, Group) %>%
  summarize(Accuracy = mean(Accuracy, na.rm = TRUE), .groups = 'drop') %>%
  ggplot(aes(x = Cond, y = Accuracy, fill = Group)) +
  geom_col(position = "dodge", color = "white", width = .7, size = 2) +
  scale_fill_manual(values = c("grey30", "grey70")) +
  labs(
    title = "Accuracy on Comprehension Task",
    x = "Pitch Accent Condition", y = NULL,
    fill = "Experiment Group"
  ) +
  coord_cartesian(ylim = c(0.5, 1)) +
  guides(fill = guide_legend(direction = "horizontal", title.position = "top")) +
* theme(
*   axis.ticks.x = element_blank(),
*   axis.text.x = element_text(color = "black", margin = margin(t = .2, unit = "cm")),
*   legend.position = c(.3, .93),
*   plot.title = element_text(
*     margin = margin(b = 1, unit = "cm")
*   )
* )
```
]
 
.panel2-accuracy_bar-auto[
![](feb_2020_ggplot2_files/figure-html/accuracy_bar_auto_11_output-1.svg)
]

---
count: false

```r
read_csv("https://raw.githubusercontent.com/yjunechoe/Semantic-Persistence/master/processed.csv") %>%
  filter(Type == "Critical") %>%
  group_by(Cond, Group) %>%
  summarize(Accuracy = mean(Accuracy, na.rm = TRUE), .groups = 'drop') %>%
  ggplot(aes(x = Cond, y = Accuracy, fill = Group)) +
  geom_col(position = "dodge", color = "white", width = .7, size = 2) +
  scale_fill_manual(values = c("grey30", "grey70")) +
  labs(
    title = "Accuracy on Comprehension Task",
    x = "Pitch Accent Condition", y = NULL,
    fill = "Experiment Group"
  ) +
  coord_cartesian(ylim = c(0.5, 1)) +
  guides(fill = guide_legend(direction = "horizontal", title.position = "top")) +
  theme(
    axis.ticks.x = element_blank(),
    axis.text.x = element_text(color = "black", margin = margin(t = .2, unit = "cm")),
    legend.position = c(.3, .93),
    plot.title = element_text(
      margin = margin(b = 1, unit = "cm")
    )
  ) +
* scale_y_continuous(
*   expand = expansion(0, 0),
*   labels = percent_format(accuracy = 1)
* )
```
]
 
.panel2-accuracy_bar-auto[
![](feb_2020_ggplot2_files/figure-html/accuracy_bar_auto_12_output-1.svg)
]

---

```r
p <- read_csv("https://raw.githubusercontent.com/yjunechoe/Semantic-Persistence/master/processed.csv") %>%
  filter(Type == "Critical") %>%
  group_by(Cond, Group) %>%
  summarize(Accuracy = mean(Accuracy, na.rm = TRUE), .groups = 'drop') %>%
  ggplot(aes(x = Cond, y = Accuracy, fill = Group)) +
  geom_col(position = "dodge", color = "white", width = .7, size = 2) +
  scale_fill_manual(values = c("grey30", "grey70")) +
  labs(
    title = "Comprehension Task",
    x = "Pitch Accent Condition", y = NULL,
    fill = "Experiment Group"
  ) +
  coord_cartesian(ylim = c(0.5, 1)) +
  guides(fill = guide_legend(direction = "horizontal", title.position = "top")) +
  theme(
    axis.ticks.x = element_blank(),
    axis.text.x = element_text(color = "black", margin = margin(t = .2, unit = "cm")),
    legend.position = c(.3, .93),
    plot.title = element_text(
      margin = margin(b = 1.5, unit = "cm"),
      hjust = .5
    ),
    plot.margin = margin(.8, 1, .7, 1.2, "cm")
  ) +
  scale_y_continuous(
    expand = expansion(0, 0),
    labels = percent_format(accuracy = 1)
  )

library(cowplot)
ggdraw(p) +
  draw_label("Accuracy", x = .12, y = .88, fontfamily = "Open Sans", size = 14, color = "#2D2D2D")
```
]
 
.panel2-accuracy_bar2-1[
![](feb_2020_ggplot2_files/figure-html/accuracy_bar2_1_01_output-1.svg)
]

---

Source: [Husband & Patson (2020)](https://amlap2020.github.io/a/272.pdf)

---

```r
df <- crossing(level_1 = fct_inorder(c("Within", "Between")),
               level_2 = fct_inorder(c("Some", "Number", "Or")),
               level_3 = factor(c("Strong", "Weak")))
df$barheight <- c(.63, .35, .72, .55, .61, .15, .60, .55, .52, .63, .17, .16)

df %>% 
  ggplot(aes(level_3, barheight)) +
  geom_col(
    aes(fill = level_3),
    show.legend = FALSE
  ) +
  geom_errorbar(
    aes(ymin = barheight - .05, ymax = barheight + .05),
    width = .1) +
  facet_grid(level_2 ~ level_1) + #<<<
  theme_bw() +
  scale_fill_manual(values = c('grey40', 'grey80')) +
  ylim(0, 1) +
  labs(
    y = "Proportion of Strong Responses",
    x = "Prime Type") +
  theme_bw()
```

]

]

---

([Code](https://yjunechoe.github.io/posts/2020-09-20-plot-makeover-1/))

---

([Code](https://yjunechoe.github.io/posts/2020-09-20-plot-makeover-1/))

---

# Plot composition

---

```r
# 3 column layout with `wrap_plots()`
plot_list <- list(state_election_plot, state_election_plot_A, state_election_plot_B,
                  state_election_plot_C, state_election_plot_D1, state_election_plot_D2)
patchwork::wrap_plots(plot_list, ncol = 3)
```

---

```r
# You can also use operator symbols for layout
(plot_list[[1]] + plot_list[[2]])/plot_list[[3]]
```

---

```r
# Or set up a custom layout with a grid
layout_design <- "ABDE
                  CCDE
                  CCDF"
wrap_plots(plot_list, design = layout_design)
```

---

```r
# A more complete example with themes and annotations
plotter_fun <- function(x) {map2(1:3, rep(list(list(rnorm(100), rnorm(100))), 3), ~ {
  ggplot(NULL, aes(x = .y[[1]], y = .y[[2]])) +
    list(geom_point(), geom_density2d(), geom_density_2d_filled(show.legend = FALSE))[[.x]] +
    labs(x = NULL, y = NULL) +
    coord_cartesian(expand = FALSE) +
    theme_minimal()
})}
wrap_plots(c(plotter_fun(), plotter_fun()), ncol = 3) &
  theme(
    plot.margin = margin(.9, .2, .2, .2, unit = 'cm'),
    plot.tag = element_text(family = "Roboto Mono", size = 12, face = 'bold'),
    plot.tag.position = c(.1, 1.12),
    axis.text = element_text(color = 'black')
  ) &
  plot_annotation(
    title = "Plot Composition",
    tag_levels = list(paste0("Fig.", rep(1:2, each = 3), letters[rep(1:3, 2)])),
    theme = theme(
      plot.title = element_text(size = 16, family = "Roboto Slab", face = 'bold',
                                hjust = 0.5, margin = margin(b = .1, unit = 'cm')),
      plot.margin = margin(.3, .3, .3, .3, unit = 'cm')
    )
  )
```

---

# Animations

---

```r
read_csv("https://raw.githubusercontent.com/bodowinter/canadian_vowel_shift_analysis/master/processed_data/production_processed.csv") %>% 
  group_by(Gender, Vowel, BirthDecade = 10 * BirthYear %/% 10) %>% 
  summarize(across(F1:F2, mean), .groups = 'drop') %>% 
  filter(Gender == "F") %>% 
  ggplot(aes(F2, F1)) +
  geom_text(aes(1450, 615, label = as.character(BirthDecade)),
            color = "gray80", size = 48) +
  stat_chull(fill = NA, color = "black", linetype = 2) +
  geom_label(aes(label = Vowel), size = 6, family = "Charis SIL") +
  scale_x_reverse(position = "top") +
  scale_y_reverse(position = "right") +
  theme(
    plot.margin = margin(.5,.8, 1.2, 1, unit = "cm"),
    axis.title.x.top = element_text(margin = margin(b = .2, unit = "cm")),
    axis.title.y.right = element_text(angle = 0, vjust = 0.5, margin = margin(l = .3, unit = "cm"))
  ) +
  coord_cartesian(clip = 'off') + 
  labs(title = "Canadian Vowel Shift", caption = "Source: Kettig & Winter (2017)") +
  
  # animation components from {gganimate}
  transition_states(BirthDecade) +
  shadow_mark(
    alpha = .1,
    color = "grey",
    exclude_layer = c(1, 2)
  )
```

]

]

---

<div class="figure">
<img src="tsg_lab_ggplot2_files/eyetrack_original.png" alt="de Carvalho et al. (2017)" width="3001" height="500px" />
<p class="caption">de Carvalho et al. (2017)</p>
</div>

---

([Code](https://gist.github.com/yjunechoe/b39e92889768b26faaec3e0103d4af10))

---

<h1><a href="https://yjunechoe.netlify.app/flipbooks/ggplot2_master/interactives.html" style = 'color: white'>Interactivity</a></h1>

---

# Resources

<span style = "font-variant: small-caps;">light</span>

- [The Glamour of Graphics](https://rstudio.com/resources/rstudioconf-2020/the-glamour-of-graphics/)

- [Gallery of plot types](https://www.data-to-viz.com/)

- [What to consider when choosing colors for data viz](https://blog.datawrapper.de/colors/)

- [Palettes (in R)](https://github.com/EmilHvitfeldt/r-color-palettes)

<span style = "font-variant: small-caps;">heavy</span>

- [Theme elements in ggplot2](https://ggplot2.tidyverse.org/reference/theme.html)

- [Font Recommendations](https://practicaltypography.com/font-recommendations.html)

- [ggplot2 tutorial](https://www.youtube.com/watch?v=h29g21z0a68)

- [ggplot2 book](https://ggplot2-book.org/)