Visualizing Information

<br><br><br><br><br><br><br><br>
.rightcol80[.white[
# Week 5: .fancy[Visualizing Information]

### <svg style="height:0.8em;top:.04em;position:relative;fill:white;" viewBox="0 0 512 512"><path d="M496 128v16a8 8 0 0 1-8 8h-24v12c0 6.627-5.373 12-12 12H60c-6.627 0-12-5.373-12-12v-12H24a8 8 0 0 1-8-8v-16a8 8 0 0 1 4.941-7.392l232-88a7.996 7.996 0 0 1 6.118 0l232 88A8 8 0 0 1 496 128zm-24 304H40c-13.255 0-24 10.745-24 24v16a8 8 0 0 0 8 8h464a8 8 0 0 0 8-8v-16c0-13.255-10.745-24-24-24zM96 192v192H60c-6.627 0-12 5.373-12 12v20h416v-20c0-6.627-5.373-12-12-12h-36V192h-64v192h-64V192h-64v192h-64V192H96z"/></svg> EMSE 4575: Exploratory Data Analysis
### <svg style="height:0.8em;top:.04em;position:relative;fill:white;" viewBox="0 0 448 512"><path d="M224 256c70.7 0 128-57.3 128-128S294.7 0 224 0 96 57.3 96 128s57.3 128 128 128zm89.6 32h-16.7c-22.2 10.2-46.9 16-72.9 16s-50.6-5.8-72.9-16h-16.7C60.2 288 0 348.2 0 422.4V464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48v-41.6c0-74.2-60.2-134.4-134.4-134.4z"/></svg> John Paul Helveston
### <svg style="height:0.8em;top:.04em;position:relative;fill:white;" viewBox="0 0 448 512"><path d="M0 464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V192H0v272zm320-196c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zM192 268c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zM64 268c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H76c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H76c-6.6 0-12-5.4-12-12v-40zM400 64h-48V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48H160V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48H48C21.5 64 0 85.5 0 112v48h448v-48c0-26.5-21.5-48-48-48z"/></svg> February 10, 2021
]]

---
class: inverse

# Quiz 1

---
class: middle

---
class: middle

---
class: inverse, middle

.rightcol80[
# "_Having word processing software<br>doesn't make us great writers._"
## — Stephen Few
]

---
class: center

.rightcol[
# So don't make<br>graphs like this
<center>
<img src="images/bad_3d_bars.png" width=400>
</center>
.center[.font80[Image from excelcharts.com]]
]

---

# Week 5: .fancy[Visualizing Information]

## 1. The Human Visual-Memory System
## 2. The Psychology of Data Viz

## BREAK

## 3. 10 Data Viz Best Practices
## 4. Making a (good) ggplot

---

# Week 5: .fancy[Visualizing Information]

## 1. .orange[The Human Visual-Memory System]
## 2. The Psychology of Data Viz

## BREAK

## 3. 10 Data Viz Best Practices
## 4. Making a (good) ggplot

---
class: inverse, middle, center

# Good visualizations optimize for<br>the human visual-memory system

---
class: center

## A (very) simplified model of the visual-memory system

---
class: center

## A (very) simplified model of the visual-memory system

---
class: center

## A (very) simplified model of the visual-memory system

---
class: center

## A (very) simplified model of the visual-memory system

---
class: inverse, middle

# Two objectives of effective charts:

## 1. Grab & direct attention (iconic memory)
## 2. Reduce processing demands (working memory)

---
class: center

# The power of pre-attentive processing

## Count all the "5"'s

---
class: center

# The power of pre-attentive processing

## Count all the "5"'s

---
class: center

.rightcol[
## Pre-attentive attributes
<br>
<center>
<img src="figs/mtCarsScatterColor.png" width=500>
</center>
]

---
class: center

### .red[Numerical (ratio) data]

<center>
<img src="figs/mtCarsScatterColor.png" width=500>
</center>
]

---
class: center

### .red[Numerical (ratio) data]<br>.blue[Categorical (ordinal) data]

<center>
<img src="figs/mtCarsScatterColor.png" width=500>
</center>
]

---
class: inverse, middle, center

# Not all pre-attentive attributes are equal

---
class: center

# Where is the red dot?

---

# .center[For categorical data:]

### 1. Hue (color) > shape
### 2. Less is more (stay in working memory!)

---
class: middle

.leftcol[
<center>
<img src="images/check-bad.png" width=100><br>
<img src="figs/preattentive-bad.png" width=600>
</center>
]

.rightcol[
<center>
<img src="images/check-good.png" width=100>
<img src="figs/preattentive-good.png" width=650>
</center>
]

---
class: middle

---

# Week 5: .fancy[Visualizing Information]

## 1. The Human Visual-Memory System
## 2. .orange[The Psychology of Data Viz]

## BREAK

## 3. 10 Data Viz Best Practices
## 4. Making a (good) ggplot

---
class: center, middle, inverse

# Much of the content in this section is from<br>John Rauser's [talk](https://www.youtube.com/watch?v=fSgEeI2Xpdc) on YouTube

(Always cite your sources)

---
class: middle

.rightcol40[
Cleveland, W. S., & McGill, R. (1985). Graphical perception and graphical methods for analyzing scientific data. Science, New Series, 229(4716), 828-833.
]

---
name: cleveland-perception
class: inverse

# Cleveland's operations of pattern perception:

---
class: inverse

# Cleveland's operations of pattern perception:

.rightcol[
- ### **Discrimination** (X equal to Y?)
- ### **Ranking** (X greater than Y?)
- ### **Ratioing** (X double Y?)
]

---
name: cleveland-estimation
class: center, middle

# .red[Estimation]: Hierarchy for _numerical_ data

---
class: center

# Example: Life expectancy in countries in Asia

```
#>               country lifeExp
#> 1         Afghanistan  43.828
#> 2                Iraq  59.545
#> 3            Cambodia  59.723
#> 4             Myanmar  62.069
#> 5         Yemen, Rep.  62.698
#> 6               Nepal  63.785
#> 7          Bangladesh  64.062
#> 8               India  64.698
#> 9            Pakistan  65.483
#> 10           Mongolia  66.803
#> 11   Korea, Dem. Rep.  67.297
#> 12           Thailand  70.616
#> 13          Indonesia  70.650
#> 14               Iran  70.964
#> 15        Philippines  71.688
#> 16            Lebanon  71.993
#> 17             Jordan  72.535
#> 18       Saudi Arabia  72.777
#> 19              China  72.961
#> 20 West Bank and Gaza  73.422
#> 21              Syria  74.143
#> 22           Malaysia  74.241
#> 23            Vietnam  74.249
#> 24            Bahrain  75.635
#> 25               Oman  75.640
#> 26             Kuwait  77.588
#> 27             Taiwan  78.400
#> 28              Korea  78.623
#> 29          Singapore  79.972
#> 30             Israel  80.745
#> 31   Hong Kong, China  82.208
#> 32              Japan  82.603
```
]

---
class: middle

.leftcol30[
1. Position on a common scale
2. Position on<br>non-aligned scales
3. Length
4. Angle
5. Area
6. Color saturation
7. **.red[Color hue]**
]

---
class: middle

.leftcol30[
1. Position on a common scale
2. Position on<br>non-aligned scales
3. Length
4. Angle
5. Area
6. Color saturation
7. **.red[Color hue]**

<br>

- <svg style="height:0.8em;top:.04em;position:relative;fill:green;" viewBox="0 0 448 512"><path d="M400 480H48c-26.51 0-48-21.49-48-48V80c0-26.51 21.49-48 48-48h352c26.51 0 48 21.49 48 48v352c0 26.51-21.49 48-48 48zm-204.686-98.059l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.248-16.379-6.249-22.628 0L184 302.745l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.25 16.379 6.25 22.628.001z"/></svg> / <svg style="height:0.8em;top:.04em;position:relative;fill:red;" viewBox="0 0 352 512"><path d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"/></svg> **Discriminate**
- <svg style="height:0.8em;top:.04em;position:relative;fill:green;" viewBox="0 0 448 512"><path d="M400 480H48c-26.51 0-48-21.49-48-48V80c0-26.51 21.49-48 48-48h352c26.51 0 48 21.49 48 48v352c0 26.51-21.49 48-48 48zm-204.686-98.059l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.248-16.379-6.249-22.628 0L184 302.745l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.25 16.379 6.25 22.628.001z"/></svg> / <svg style="height:0.8em;top:.04em;position:relative;fill:red;" viewBox="0 0 352 512"><path d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"/></svg> **Rank**
- <svg style="height:0.8em;top:.04em;position:relative;fill:red;" viewBox="0 0 352 512"><path d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"/></svg> **Ratio**
]

---
class: middle

.leftcol30[
1. Position on a common scale
2. Position on<br>non-aligned scales
3. Length
4. Angle
5. Area
6. Color saturation
7. **.red[Color hue]**

Sorting helps a bit...

---
class: middle

.leftcol30[
1. Position on a common scale
2. Position on<br>non-aligned scales
3. Length
4. Angle
5. Area
6. **.red[Color saturation]**
7. Color hue

<br>

---
class: middle

.leftcol30[
1. Position on a common scale
2. Position on<br>non-aligned scales
3. Length
4. Angle
5. Area
6. **.red[Color saturation]**
7. Color hue

Align to 0 scale:

- <svg style="height:0.8em;top:.04em;position:relative;fill:green;" viewBox="0 0 448 512"><path d="M400 480H48c-26.51 0-48-21.49-48-48V80c0-26.51 21.49-48 48-48h352c26.51 0 48 21.49 48 48v352c0 26.51-21.49 48-48 48zm-204.686-98.059l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.248-16.379-6.249-22.628 0L184 302.745l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.25 16.379 6.25 22.628.001z"/></svg> / <svg style="height:0.8em;top:.04em;position:relative;fill:red;" viewBox="0 0 352 512"><path d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"/></svg> **Discriminate**
- <svg style="height:0.8em;top:.04em;position:relative;fill:green;" viewBox="0 0 448 512"><path d="M400 480H48c-26.51 0-48-21.49-48-48V80c0-26.51 21.49-48 48-48h352c26.51 0 48 21.49 48 48v352c0 26.51-21.49 48-48 48zm-204.686-98.059l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.248-16.379-6.249-22.628 0L184 302.745l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.25 16.379 6.25 22.628.001z"/></svg> / <svg style="height:0.8em;top:.04em;position:relative;fill:red;" viewBox="0 0 352 512"><path d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"/></svg> **Rank**
- <svg style="height:0.8em;top:.04em;position:relative;fill:green;" viewBox="0 0 448 512"><path d="M400 480H48c-26.51 0-48-21.49-48-48V80c0-26.51 21.49-48 48-48h352c26.51 0 48 21.49 48 48v352c0 26.51-21.49 48-48 48zm-204.686-98.059l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.248-16.379-6.249-22.628 0L184 302.745l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.25 16.379 6.25 22.628.001z"/></svg> / <svg style="height:0.8em;top:.04em;position:relative;fill:red;" viewBox="0 0 352 512"><path d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"/></svg> **Ratio**
]

---
class: middle

.leftcol30[
1. Position on a common scale
2. Position on<br>non-aligned scales
3. Length
4. Angle
5. **.red[Area]**
6. Color saturation
7. Color hue

<br>

- <svg style="height:0.8em;top:.04em;position:relative;fill:green;" viewBox="0 0 448 512"><path d="M400 480H48c-26.51 0-48-21.49-48-48V80c0-26.51 21.49-48 48-48h352c26.51 0 48 21.49 48 48v352c0 26.51-21.49 48-48 48zm-204.686-98.059l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.248-16.379-6.249-22.628 0L184 302.745l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.25 16.379 6.25 22.628.001z"/></svg> / <svg style="height:0.8em;top:.04em;position:relative;fill:red;" viewBox="0 0 352 512"><path d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"/></svg> **Discriminate**
- <svg style="height:0.8em;top:.04em;position:relative;fill:green;" viewBox="0 0 448 512"><path d="M400 480H48c-26.51 0-48-21.49-48-48V80c0-26.51 21.49-48 48-48h352c26.51 0 48 21.49 48 48v352c0 26.51-21.49 48-48 48zm-204.686-98.059l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.248-16.379-6.249-22.628 0L184 302.745l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.25 16.379 6.25 22.628.001z"/></svg> / <svg style="height:0.8em;top:.04em;position:relative;fill:red;" viewBox="0 0 352 512"><path d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"/></svg> **Rank**
- <svg style="height:0.8em;top:.04em;position:relative;fill:green;" viewBox="0 0 448 512"><path d="M400 480H48c-26.51 0-48-21.49-48-48V80c0-26.51 21.49-48 48-48h352c26.51 0 48 21.49 48 48v352c0 26.51-21.49 48-48 48zm-204.686-98.059l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.248-16.379-6.249-22.628 0L184 302.745l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.25 16.379 6.25 22.628.001z"/></svg> / <svg style="height:0.8em;top:.04em;position:relative;fill:red;" viewBox="0 0 352 512"><path d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"/></svg> **Ratio**
]

---
class: middle

.leftcol30[
1. Position on a common scale
2. Position on<br>non-aligned scales
3. Length
4. Angle
5. **.red[Area]**
6. Color saturation
7. Color hue
]

.right70[
### .center[Area works okay for "bubble" charts]
<center>
<img src="images/gapminder_bubbles.jpg" width=750>
</center>
]

---
class: middle

.leftcol30[
1. Position on a common scale
2. Position on<br>non-aligned scales
3. Length
4. **.red[Angle]**
5. Area
6. Color saturation
7. Color hue

<br>

- <svg style="height:0.8em;top:.04em;position:relative;fill:green;" viewBox="0 0 448 512"><path d="M400 480H48c-26.51 0-48-21.49-48-48V80c0-26.51 21.49-48 48-48h352c26.51 0 48 21.49 48 48v352c0 26.51-21.49 48-48 48zm-204.686-98.059l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.248-16.379-6.249-22.628 0L184 302.745l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.25 16.379 6.25 22.628.001z"/></svg> / <svg style="height:0.8em;top:.04em;position:relative;fill:red;" viewBox="0 0 352 512"><path d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"/></svg> **Discriminate**
- <svg style="height:0.8em;top:.04em;position:relative;fill:green;" viewBox="0 0 448 512"><path d="M400 480H48c-26.51 0-48-21.49-48-48V80c0-26.51 21.49-48 48-48h352c26.51 0 48 21.49 48 48v352c0 26.51-21.49 48-48 48zm-204.686-98.059l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.248-16.379-6.249-22.628 0L184 302.745l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.25 16.379 6.25 22.628.001z"/></svg> **Rank**
- <svg style="height:0.8em;top:.04em;position:relative;fill:green;" viewBox="0 0 448 512"><path d="M400 480H48c-26.51 0-48-21.49-48-48V80c0-26.51 21.49-48 48-48h352c26.51 0 48 21.49 48 48v352c0 26.51-21.49 48-48 48zm-204.686-98.059l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.248-16.379-6.249-22.628 0L184 302.745l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.25 16.379 6.25 22.628.001z"/></svg> / <svg style="height:0.8em;top:.04em;position:relative;fill:red;" viewBox="0 0 352 512"><path d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"/></svg> **Ratio**
]

---
class: middle
background-color: #FFFFFF

.leftcol30[
1. Position on a common scale
2. Position on<br>non-aligned scales
3. Length
4. **.red[Angle]**
5. Area
6. Color saturation
7. Color hue
]

---
class: middle

.leftcol30[
1. Position on a common scale
2. Position on<br>non-aligned scales
3. **.red[Length]**
4. Angle
5. Area
6. Color saturation
7. Color hue

<br>

- <svg style="height:0.8em;top:.04em;position:relative;fill:green;" viewBox="0 0 448 512"><path d="M400 480H48c-26.51 0-48-21.49-48-48V80c0-26.51 21.49-48 48-48h352c26.51 0 48 21.49 48 48v352c0 26.51-21.49 48-48 48zm-204.686-98.059l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.248-16.379-6.249-22.628 0L184 302.745l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.25 16.379 6.25 22.628.001z"/></svg> / <svg style="height:0.8em;top:.04em;position:relative;fill:red;" viewBox="0 0 352 512"><path d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"/></svg> **Discriminate**
- <svg style="height:0.8em;top:.04em;position:relative;fill:green;" viewBox="0 0 448 512"><path d="M400 480H48c-26.51 0-48-21.49-48-48V80c0-26.51 21.49-48 48-48h352c26.51 0 48 21.49 48 48v352c0 26.51-21.49 48-48 48zm-204.686-98.059l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.248-16.379-6.249-22.628 0L184 302.745l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.25 16.379 6.25 22.628.001z"/></svg> / <svg style="height:0.8em;top:.04em;position:relative;fill:red;" viewBox="0 0 352 512"><path d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"/></svg> **Rank**
- <svg style="height:0.8em;top:.04em;position:relative;fill:green;" viewBox="0 0 448 512"><path d="M400 480H48c-26.51 0-48-21.49-48-48V80c0-26.51 21.49-48 48-48h352c26.51 0 48 21.49 48 48v352c0 26.51-21.49 48-48 48zm-204.686-98.059l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.248-16.379-6.249-22.628 0L184 302.745l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.25 16.379 6.25 22.628.001z"/></svg> **Ratio**
]

---
class: middle

.leftcol30[
1. Position on a common scale
2. **.red[Position on<br>non-aligned scales]**
3. Length
4. Angle
5. Area
6. Color saturation
7. Color hue

<br>

- <svg style="height:0.8em;top:.04em;position:relative;fill:green;" viewBox="0 0 448 512"><path d="M400 480H48c-26.51 0-48-21.49-48-48V80c0-26.51 21.49-48 48-48h352c26.51 0 48 21.49 48 48v352c0 26.51-21.49 48-48 48zm-204.686-98.059l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.248-16.379-6.249-22.628 0L184 302.745l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.25 16.379 6.25 22.628.001z"/></svg> / <svg style="height:0.8em;top:.04em;position:relative;fill:red;" viewBox="0 0 352 512"><path d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"/></svg> **Discriminate**
- <svg style="height:0.8em;top:.04em;position:relative;fill:green;" viewBox="0 0 448 512"><path d="M400 480H48c-26.51 0-48-21.49-48-48V80c0-26.51 21.49-48 48-48h352c26.51 0 48 21.49 48 48v352c0 26.51-21.49 48-48 48zm-204.686-98.059l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.248-16.379-6.249-22.628 0L184 302.745l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.25 16.379 6.25 22.628.001z"/></svg> / <svg style="height:0.8em;top:.04em;position:relative;fill:red;" viewBox="0 0 352 512"><path d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"/></svg> **Rank**
- <svg style="height:0.8em;top:.04em;position:relative;fill:green;" viewBox="0 0 448 512"><path d="M400 480H48c-26.51 0-48-21.49-48-48V80c0-26.51 21.49-48 48-48h352c26.51 0 48 21.49 48 48v352c0 26.51-21.49 48-48 48zm-204.686-98.059l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.248-16.379-6.249-22.628 0L184 302.745l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.25 16.379 6.25 22.628.001z"/></svg> **Ratio**
]

---
class: middle

.leftcol30[
1. **.red[Position on a common scale]**
2. Position on<br>non-aligned scales
3. Length
4. Angle
5. Area
6. Color saturation
7. Color hue

<br>

---
class: middle

.leftcol30[
1. **.red[Position on a common scale]**
2. Position on<br>non-aligned scales
3. Length
4. Angle
5. Area
6. Color saturation
7. Color hue

---
class: middle

.leftcol30[
1. **.red[Position on a common scale]**
2. Position on<br>non-aligned scales
3. Length
4. Angle
5. Area
6. Color saturation
7. Color hue

**.red[Sorting still matters!]**
]

---
template: cleveland-perception

---
class: inverse

# Cleveland's operations of pattern perception:

<br><br><br>
.rightcol55[
#### The grouping of graphical elements
]

---
class: inverse, middle, center

# .font130[.red[Assembly]: Gestalt Psychology]

<br>

### The whole has a reality that is entirely separate from the parts

---
class: middle
background-color: #FFFFFF

---
class: center
background-color: #FFFFFF

# Reification

---
class: center
background-color: #FFFFFF

.leftcol30[
# Emergence
]
.rightcol70[
<center>
<img src="images/gestalt-dog.jpg" width=600>
</center>
]

---
background-color: #FFFFFF

Our minds fill in the missing information
]

---
class: inverse, center

# .font120[Prägnanz]

<br>

### We strongly prefer to interpret stimuli as regular, simple, and orderly

---
class: middle

It's the graphical equivalent of this:
<center>
<img src="images/unsatisfying-pie.gif">
</center>
]

---
class: middle

---
class: middle

---
class: middle

---
class: middle

---
class: middle

---
class: middle

---
class: middle

---
class: middle

---
class: middle

---
class: middle

---
template: cleveland-perception

---
template: cleveland-estimation

---
name: cleveland-assembly
class: center

# .red[Assembly]: Gestalt Psychology

---
class: inverse

# Cleveland's operations of pattern perception:

<br><br><br><br><br>
.rightcol55[
#### Recognizing that a geometric object encodes a physical value

]

---
class: middle

---

1. A door where the design tells you to do the opposite of what you're actually supposed to do.

2. A door that gives the wrong signal and needs a sign to correct it.
]

---
class: center

.leftcol[
# Norman door
<center>
<img src="images/check-bad.png" width=80>
<img src="images/norman_door.jpg" width=250>
</center>
]

.rightcol[
# Non-Norman door
<center>
<img src="images/check-good.png" width=100>
<img src="images/non-norman-door.jpg" width=480>
</center>
]

---
class: middle

---
class: middle

---
class: middle

---
class: middle

---
class: middle

---
class: middle

---
class: middle, center

The white circles you see at the intersections is called the **"Hermann Grid illusion"**

---
class: middle

---
class: inverse, center

# Break!

## Stand up, Move around, Stretch!

---

# Week 5: .fancy[Visualizing Information]

## 1. The Human Visual-Memory System
## 2. The Psychology of Data Viz

## BREAK

## 3. .orange[10 Data Viz Best Practices]
## 4. Making a (good) ggplot

---

# .center[10 Data Viz Best Practices]

.font120[
1. Remove chart chunk
2. Don't make 3D plots*
3. Don't lie
4. Don't use pie charts for proportions*
5. Don't stack bars*
6. Rotate and sort categorical axes*
7. Eliminate legends & directly label geoms*
8. Don't use pattern fills
9. Don't use red & green together
10. Consider tables for small data sets

---

# .center[10 Data Viz Best Practices]

.font120[
1. .orange[Remove chart chunk]
2. Don't make 3D plots*
3. Don't lie
4. Don't use pie charts for proportions*
5. Don't stack bars*
6. Rotate and sort categorical axes*
7. Eliminate legends & directly label geoms*
8. Don't use pattern fills
9. Don't use red & green together
10. Consider tables for small data sets

---
class: inverse, middle

---
class: center, middle

.leftcol[
<center>
<img src="images/check-bad.png" width=80>
<img src="images/monsterBars.png" width=500>
</center>
Figure 1.6: `Monstrous Costs’ by Nigel Holmes, in Healy, 2018
]

.rightcol[
<center>
<img src="images/check-good.png" width=100>
<img src="figs/monsterBars.png" width=480>
</center>
]

---
class: middle

---
class: center, middle

.leftcol[
<center>
<img src="images/check-bad.png" width=80>
<img src="images/less-is-more-darkhorse-analytics-before.png" width=500>
</center>
]

.rightcol[
<center>
<img src="images/check-good.png" width=100>
<img src="images/less-is-more-darkhorse-analytics-after.png" width=480>
</center>
]

---

# .center[10 Data Viz Best Practices]

.font120[
1. Remove chart chunk
2. .orange[Don't make 3D plots*]
3. Don't lie
4. Don't use pie charts for proportions*
5. Don't stack bars*
6. Rotate and sort categorical axes*
7. Eliminate legends & directly label geoms*
8. Don't use pattern fills
9. Don't use red & green together
10. Consider tables for small data sets

---
class: center, middle

[Penrose Stairs](https://en.wikipedia.org/wiki/Penrose_stairs
), made famous by<br>M.C. Escher (1898-1972)
]

<center>
<img src="images/3dpies.png" width=500>
</center>
]

---
class: center, middle

# Occlusion: geoms are obscured

---
class: center, middle

.leftcol40[
<center>
<img src="images/check-bad.png" width=80>
<img src="images/3d-occlusion.png" width=400>
</center>
]

.rightcol60[
<center>
<img src="images/check-good.png" width=100>
.border[<img src="figs/facetedBars.png" width=600>]
</center>
]

---
class: center, middle

# The third dimension distracts from the data

## (this is what Tufte calls "chart junk")

---
class: center, middle

.leftcol60[
<center>
<img src="images/check-bad.png" width=80>
<img src="images/3d-chart-junk.png">
</center>
]

.rightcol40[
<center>
<img src="images/check-good.png" width=100>
.border[<img src="figs/simpleBars.png">]
</center>
]

---

# .center[10 Data Viz Best Practices]

.font120[
1. Remove chart chunk
2. Don't make 3D plots*
3. .orange[Don't lie]
4. Don't use pie charts for proportions*
5. Don't stack bars*
6. Rotate and sort categorical axes*
7. Eliminate legends & directly label geoms*
8. Don't use pattern fills
9. Don't use red & green together
10. Consider tables for small data sets

---
class: center, middle

### "Lie Factor" = `\(\frac{\text{Size of effect in graphic}}{\text{Size of effect in data}}\)`

---
class: center, middle

### "Lie Factor" = `\(\frac{\text{Size of effect in graphic}}{\text{Size of effect in data}} = \frac{\frac{5.3 - 0.6}{0.6}}{\frac{27.5 - 18}{18}} = \frac{7.83}{0.53} = 14.8\)`

.leftcol60[.border[
<center>
<img src="images/tufte-fuel-economy-bad.png">
</center>
.font80[.left[Edward Tufte (2001) "The Visual Display of Quantitative Information", 2nd Edition, pg. 57-58.]]
]]

---
class: center, middle

# Bar charts should always start at 0

.leftcol60[
<center>
<img src="images/check-bad.png" width=80>
<img src="images/fox-news-bars.png">
</center>
.font70[.left[Image from http://livingqlikview.com/the-9-worst-data-visualizations-ever-created/
]]
]

.rightcol40[
<center>
<img src="images/check-good.png" width=100>
.border[<img src="figs/barchart_zero.png" width=330px>]
</center>
]

---
class: center, middle

# Don't cherry-pick your data

.leftcol60[
<center>
<img src="images/check-bad.png" width=80>
<img src="images/fox-news-immigration-bars-bad.jpg">
</center>
.font70[.left[Image from https://www.mediamatters.org/fox-news/fox-news-newest-dishonest-chart-immigration-enforcement
]]
]

.rightcol40[
<center>
<img src="images/check-good.png" width=100>
.border[<img src="images/fox-news-immigration-bars-good.jpg">]
</center>
]

---
class: center, middle

# Make sure your chart makes sense

<center>
<img src="images/fox-news-piechart.png" width=600>
</center>
.font70[.left[Image from Image from http://livingqlikview.com/the-9-worst-data-visualizations-ever-created/
]]

---

# .center[10 Data Viz Best Practices]

.font120[
1. Remove chart chunk
2. Don't make 3D plots*
3. Don't lie
4. .orange[Don't use pie charts for proportions*]
5. Don't stack bars*
6. Rotate and sort categorical axes*
7. Eliminate legends & directly label geoms*
8. Don't use pattern fills
9. Don't use red & green together
10. Consider tables for small data sets

---
class: middle, center
background-color: #FFFFFF

.leftcol45[
<center>
<img src="images/check-bad.png" width=80>
<img src="figs/statesPie.png" width=750>
</center>
]

.rightcol55[
<center>
<img src="images/check-good.png" width=100>
<img src="figs/statesBar.png" width=750>
</center>
]

---
class: middle
background-color: #FFFFFF

## - Small data
## - Simple fractions
## - If sum of parts matters
]

---
class: middle, center
background-color: #FFFFFF

# Best pie chart of all time

---

# .center[10 Data Viz Best Practices]

.font120[
1. Remove chart chunk
2. Don't make 3D plots*
3. Don't lie
4. Don't use pie charts for proportions*
5. .orange[Don't stack bars*]
6. Rotate and sort categorical axes*
7. Eliminate legends & directly label geoms*
8. Don't use pattern fills
9. Don't use red & green together
10. Consider tables for small data sets

---
class: middle, center

# Stacked bars are rarely a good idea

---
class: middle, center

## "Parallel coordinates" plot usually works better

---
class: middle, center

## Exception:<br>When you care about the _total_ more than the categories

---

# .center[10 Data Viz Best Practices]

.font120[
1. Remove chart chunk
2. Don't make 3D plots*
3. Don't lie
4. Don't use pie charts for proportions*
5. Don't stack bars*
6. .orange[Rotate and sort categorical axes*]
7. Eliminate legends & directly label geoms*
8. Don't use pattern fills
9. Don't use red & green together
10. Consider tables for small data sets

---
class: middle, center

## Rotate axes if you can't read them

.leftcol45[
<center>
<img src="images/check-bad.png" width=80>
.border[<img src="figs/mpg_bars_bad.png" width=400>]
</center>
]

.rightcol55[
<center>
<img src="images/check-good.png" width=100>
.border[<img src="figs/mpg_bars_flipped.png" width=750>]
</center>
]

---
class: middle, center

## Default order is almost always wrong

.leftcol[
<center>
<img src="images/check-bad.png" width=80>
Ordered by alphabet (default)
.border[<img src="figs/mpg_bars_flipped.png">]
</center>
]

.rightcol[
<center>
<img src="images/check-good.png" width=100>
Ordered by count
.border[<img src="figs/mpg_bars_flipped_sorted.png">]
</center>
]

---
class: center

## Exception: Ordinal variables

<center>
.border[<img src="images/wildlife-months-bar-1.png" width=900>]
</center>

---

# .center[10 Data Viz Best Practices]

.font120[
1. Remove chart chunk
2. Don't make 3D plots*
3. Don't lie
4. Don't use pie charts for proportions*
5. Don't stack bars*
6. Rotate and sort categorical axes*
7. .orange[Eliminate legends & directly label geoms*]
8. Don't use pattern fills
9. Don't use red & green together
10. Consider tables for small data sets

---
class: middle, center

## Directly label geoms

.leftcol[
<center>
<img src="images/check-bad.png" width=75>
.border[<img src="figs/milk_region.png">]
</center>
]

.rightcol[
<center>
<img src="images/check-good.png" width=100>
.border[<img src="figs/milk_region_label.png">]
</center>
]

---
class: center

## Exception: When you have repeated categories

<center>
.border[<img src="images/pattern_fills2.png" width=600>]
</center>

---

# .center[10 Data Viz Best Practices]

.font120[
1. Remove chart chunk
2. Don't make 3D plots*
3. Don't lie
4. Don't use pie charts for proportions*
5. Don't stack bars*
6. Rotate and sort categorical axes*
7. Eliminate legends & directly label geoms*
8. .orange[Don't use pattern fills]
9. Don't use red & green together
10. Consider tables for small data sets

---
class: middle
background-color: #f8f8f8

---
class: middle, center

.leftcol[
<center>
<img src="images/check-bad.png" width=75>
.border[<img src="images/pattern_fills1.png">]
</center>
]

.rightcol[
<center>
<img src="images/check-good.png" width=100>
.border[<img src="images/pattern_fills2.png">]
</center>
]

---

# .center[10 Data Viz Best Practices]

.font120[
1. Remove chart chunk
2. Don't make 3D plots*
3. Don't lie
4. Don't use pie charts for proportions*
5. Don't stack bars*
6. Rotate and sort categorical axes*
7. Eliminate legends & directly label geoms*
8. Don't use pattern fills
9. .orange[Don't use red & green together]
10. Consider tables for small data sets

---
class: center

# 10% of males and 1% of females are color blind

---
class: middle, center

## Facets can be used to avoid color altogether

.leftcol[
<center>
<img src="images/check-bad.png" width=75>
.border[<img src="figs/colorBlindBad1.png">]
</center>
]

.rightcol[
<center>
<img src="images/check-good.png" width=100>
.border[<img src="figs/colorBlindBad3.png">]
</center>
]

---

# .center[10 Data Viz Best Practices]

---
class: middle
background-color: #FFFFFF

---
class: middle
background-color: #FFFFFF

---
class: center, middle

## Who do you think did a better job in tonight’s debate?

| | Clinton | Trump |
|-|-|-|
| Among Democrats | 99% | 1% |
| Among Republicans | 53% | 47% |

---
class: middle

# - [Data Viz "Cheat Sheet"](https://github.com/emse-eda-gwu/2021-Spring/raw/master/content/dataviz_cheatsheet.pdf)

# - [Data Viz Reference Page](https://eda.seas.gwu.edu/2021-Spring/ref-visualizing-data.html)

]

---
class: inverse

# Your turn - go [here](https://docs.google.com/presentation/d/1sL3k4S2e7shShlu_crNxunEH8qMHtuOH_vl_a_Mc1wI/edit?usp=sharing)

For your "bad" visualization:

1) Identify where the graphic falls on Cleveland's pattern recognition hierarchy

2) Any design rules that are broken

3) Suggest at least two improvements

---
class: middle

---
class: middle

---
class: middle

.rightcol60[
<center>
<img src="images/bad-viz/junk-life-expectancy-good1.png" width=400>
<img src="images/bad-viz/junk-life-expectancy-good2.png" width=400>
</center>
]

---
class: middle

---
class: middle

---

# Week 5: .fancy[Visualizing Information]

## 1. The Human Visual-Memory System
## 2. The Psychology of Data Viz

## BREAK

## 3. 10 Data Viz Best Practices
## 4. .orange[Making a (good) ggplot]

---
class: center

## Making a (good) ggplot

---
class: inverse

# .center[Making a (good) ggplot]

.font120[
1. Format data frame
2. Add geoms
3. Flip coordinates?
4. Reorder factors?
5. Adjust scales
6. Adjust theme
7. Annotate
]

---

# 1) Format data frame

```r
# Format the data frame
wildlife_impacts %>%
* count(operator)
```

```
#> # A tibble: 4 x 2
#>   operator               n
#>   <chr>              <int>
#> 1 AMERICAN AIRLINES  14887
#> 2 DELTA AIR LINES     9005
#> 3 SOUTHWEST AIRLINES 17970
#> 4 UNITED AIRLINES    15116
```

---

# 2) Add geoms

```r
# Format the data frame
wildlife_impacts %>%
  count(operator) %>%

# Add geoms
  ggplot() +
* geom_col(aes(x = operator, y = n),
           width = 0.7, alpha = 0.8)
```
]

---

## 3) Flip coordinates - can you read the labels?

```r
# Format the data frame
wildlife_impacts %>%
  count(operator) %>%

# Add geoms
  ggplot() +
  geom_col(aes(x = operator, y = n),
           width = 0.7, alpha = 0.8) +

# Flip coordinates
* coord_flip()
```
]]

---

## 3) Flip coordinates - can you read the labels?

```r
# Format the data frame
wildlife_impacts %>%
  count(operator) %>%

# Add geoms
  ggplot() +
* geom_col(aes(x = n, y = operator),
           width = 0.7, alpha = 0.8)
```
]]

---

## 4) Reorder factors with `reorder()`

```r
# Format the data frame
wildlife_impacts %>%
  count(operator) %>%

# Add geoms
  ggplot() +
* geom_col(aes(x = n, y = reorder(operator, n)),
           width = 0.7, alpha = 0.8)
```
]]

---

## 5) Adjust scales

```r
# Format the data frame
wildlife_impacts %>%
  count(operator) %>%

# Add geoms
  ggplot() +
  geom_col(aes(x = n, y = reorder(operator, n)),
           width = 0.7, alpha = 0.8) +

# Adjust x axis scale
* scale_x_continuous(
*   expand = expansion(mult = c(0, 0.05)))
```
]]

---

## 5) Adjust scales - customize break points (if you want)

```r
# Format the data frame
wildlife_impacts %>%
  count(operator) %>%

# Add geoms
  ggplot() +
  geom_col(aes(x = n, y = reorder(operator, n)),
           width = 0.7, alpha = 0.8) +

# Adjust x axis scale
  scale_x_continuous(
    expand = expansion(mult = c(0, 0.05)),
*   breaks = c(0, 10000, 20000),
*   limits = c(0, 20000))
```
]]

---

## 6) Adjust theme

### Four `cowplot` themes you should know

---

## 6) Adjust theme

For horizontal bars, add only vertical grid

```r
# Format the data frame
wildlife_impacts %>%
  count(operator) %>%

# Add geoms
  ggplot() +
  geom_col(aes(x = n, y = reorder(operator, n)),
           width = 0.7, alpha = 0.8) +

# Adjust x axis scale
  scale_x_continuous(
    expand = expansion(mult = c(0, 0.05))) +

# Adjust theme
* theme_minimal_vgrid()
```
]]

---

## 7) Annotate

```r
# Format the data frame
wildlife_impacts %>%
  count(operator) %>%
* mutate(operator = str_to_title(operator)) %>%

# Add geoms
  ggplot() +
  geom_col(aes(x = n, y = reorder(operator, n)),
           width = 0.7, alpha = 0.8) +

# Adjust x axis scale
  scale_x_continuous(
    expand = expansion(mult = c(0, 0.05))) +

# Adjust theme
  theme_minimal_vgrid() +

# Annotate
* labs(
*   x = 'Count',
*   y = NULL)
```
]]

---

## Finished product

```r
wildlife_impacts %>%
  count(operator) %>%
  mutate(operator = str_to_title(operator)) %>%
  ggplot() +
  geom_col(aes(x = n, y = reorder(operator, n)),
           width = 0.7, alpha = 0.8) +
  scale_x_continuous(
    expand = expansion(mult = c(0, 0.05))) +
  theme_minimal_vgrid() +
  labs(
    x = 'Count',
    y = NULL)
```
]]

---
class: inverse

## Your turn

1. Format data frame
2. Add geoms
3. Flip coordinates?
4. Reorder factors?
5. Adjust scales
6. Adjust theme
7. Annotate
]