Around the World in a Single Table

class: title-slide, left, bottom, inverse
background-image: url(img/cover.jpg)
background-size: cover

.pull-left[
# Around the World in a Single Table
### Isabella Velásquez
### R-Ladies Johannesburg
### October 27, 2021
]

.palegrey[.right[.footnote[Photo by <a href="https://unsplash.com/@m_xthree?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Maximilian Meyer</a> on <a href="https://unsplash.com/s/photos/hot-air-balloon?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>]]]
---

# About Me

### Isabella Velásquez
* Sr. Product Marketing Manager, RStudio
* Website: ivelasq.rbind.io
* Twitter: @ivelasq3
* Github: @ivelasq
* LinkedIn: @ivelasq

.pull-right[
![](img/balloon.png)
]

---
class: inverse

# Agenda

.pull-left-narrow[.center[
<img src="./img/balloon.png" width="100px"/>]]
.pull-right-wide[### Introduce tables]
--
.pull-left-narrow[.center[
<img src="./img/balloon.png" width="100px"/>]]
.pull-right-wide[### Table principles]
--
.pull-left-narrow[.center[
<img src="./img/balloon.png" width="100px"/>]]
.pull-right-wide[### The {gt} package

* RStudio Cloud Project: https://bit.ly/joziproject
* Github repo: https://bit.ly/jozirepo]

---
class: middle, center, inverse
background-color: #B38069

# Where are you joining from?

---

# 2021 RStudio Table Contest

**Closing date: November 15th**

https://blog.rstudio.com/2021/09/30/rstudio-table-contest-2021/

![](img/contest.jpg)

---
class: center
# What is a table?

![](img/table.jpg)

.palegrey[.left[.footnote[Photo: Wikipedia]]]

---
# Examples of tables

.panelset[
.panel[.panel-name[Spreadsheet]

.palegrey[.right[.footnote[Photo: Wikipedia]]]
]

.panel[.panel-name[Relational Table]

.palegrey[.right[.footnote[Photo: Wikipedia]]]
]

.panel[.panel-name[Console Table]

```r
# install.packages("remotes")
# remotes::install_github("gvelasq/tidytab")
library(tidytab)

mtcars %>% tab(cyl)
```
```
##         cyl │      Freq.     Percent        Cum. 
## ────────────┼───────────────────────────────────
##           4 │         11        34.4        34.4 
##           6 │          7        21.9        56.3 
##           8 │         14        43.8       100.0 
## ────────────┼───────────────────────────────────
##       Total │         32       100.0           
```

.palegrey[.right[.footnote[Source: tidytab, @gvelasq]]]
]
]

---
class: center

# How is a table like a table?

.panelset[
.panel[.panel-name[Table 1]

![](img/table1.jpg)
]

.panel[.panel-name[Table 2]
![](img/table2.jpg)
]

.panel[.panel-name[Table 3]
![](img/table3.jpg)
]
]

.palegrey[.right[.footnote[Photo: Wikipedia]]]

---
# Table visualization
![](img/table_viz.png)
.palegrey[.footnote[Source: R for the Rest of Us]]

---
class: title, center, inverse

# Imagine...
![](img/balloon.png)

---
background-image: url(img/airport.jpg)
background-size: cover

.palegrey[.footnote[Source: Photo by <a href="https://unsplash.com/@chuttersnap?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">CHUTTERSNAP</a> on <a href="https://unsplash.com/s/photos/airport-security?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>]]

---
![](img/worldmap.png)
---
class:center

![](img/question.png)

---

![](img/worldmap.png)

---
class: middle, center, inverse
background-color: #B38069

# Have you ever displayed a table rather than a chart? Let us know in the chat!

---

.palegrey[.left[.footnote[Photos: Wikipedia]]]

.pull-left[

# Charts

.left[

* Abstraction
* Trends
* Distributions

]
]

.pull-right[

# Tables

.left[
<img src="./img/table4.jpg" height="200px"/>

* Specific information
* Exact comparison
* Qualitative data
* Multiple dimensions

]
]

---
class: middle

.pull-left[
<blockquote class="twitter-tweet" data-width="550" data-lang="en" data-dnt="true" data-theme="light">This is mostly @ myself, but just in case anyone else needs to hear this: That complicated data visualization you’ve been working on/crying over, you should consider instead making a table.— Ijeamaka A (@ijeamaka_a) <a href="https://twitter.com/ijeamaka_a/status/1420126677091323906?ref_src=twsrc%5Etfw">July 27, 2021</a></blockquote>

]

.pull-right[
## Questions to consider

* Are you looking for patterns or finding precise values?
* Will you be comparing two sets of values?
* How many dimensions does your data have?
* How much time will readers have to review?
* Do you want readers to be able to search and filter for exact values?
* Will you be showing qualitative data?
]

---
background-image: url(img/airport.jpg)
background-size: cover

---
class: inverse, center, middle

![](img/girl.jpg)

---
# Tables and charts combined

.panelset[
.panel[.panel-name[Example 1]

![](img/tabchart1.png)

.palegrey[.right[.footnote[Source: Daniel Sjoberg]]]
]

.panel[.panel-name[Example 2]

.palegrey[.right[.footnote[Source: NYTimes]]]
]

.panel[.panel-name[Example 3]

.palegrey[.right[.footnote[Source: Edward Tufte]]]
]
]

---
class: center
# In conclusion

“I saw in a dream, a table, where all the elements fell into place as required. Awakening, I immediately wrote it down on a piece of paper.”

![](img/periodic.png)

.footnote[Photo: Wikipedia]

---
class: middle, center, inverse
background-color: #B38069

# Do you have any favorite tables? Share in the chat!

---

class: center, inverse, middle

# What makes a good table?

---
# Guidelines to consider

.pull-left[

1. Offset the Heads from the Body
2. Use Subtle Dividers Rather Than Heavy Gridlines
3. Right-Align Numbers and Heads
4. Left-Align Text and Heads
5. Select the Appropriate Level of Precision
6. Guide Your Reader with Space between Rows and Columns
7. Remove Unit Repetition
8. Highlight Outliers
9. Group Similar Data and Increase White Space
10. Add Visualizations When Appropriate

]

.pull-right[
<blockquote class="twitter-tweet" data-width="550" data-lang="en" data-dnt="true" data-theme="light">I recently published "Ten Guidelines for Better Tables" in the Journal of Benefit Cost Analysis (<a href="https://twitter.com/benefitcost?ref_src=twsrc%5Etfw">@benefitcost</a>) on ways to improve your data tables. Here's a thread summarizing the 10 guidelines. Full paper is here: <a href="https://t.co/VSGYnfg7iP">https://t.co/VSGYnfg7iP</a> <a href="https://t.co/W6qbsktioL">pic.twitter.com/W6qbsktioL</a>— Jon Schwabish (@jschwabish) <a href="https://twitter.com/jschwabish/status/1290323581881266177?ref_src=twsrc%5Etfw">August 3, 2020</a></blockquote>

]

---
class: center
.footnote[Source: Jon Schwabish]

.panelset[
.panel[.panel-name[1]

## Offset the Heads from the Body

.pull-left[
![](img/jon1_1.jpg)
]

.pull-right[
![](img/jon1_2.jpg)
]

]

.panel[.panel-name[2]

## Use Subtle Dividers Rather Than Heavy Gridlines

.pull-left[
![](img/jon2_1.jpg)
]

.pull-right[
![](img/jon2_2.jpg)
]

]

.panel[.panel-name[3]

## Right-Align Numbers and Heads

![](img/jon3.jpg)

]

.panel[.panel-name[4]

## Left-Align Text and Heads

![](img/jon4.jpg)

]

.panel[.panel-name[5]

## Select the Appropriate Level of Precision

![](img/jon6.jpg)

]

.panel[.panel-name[6]

## Guide Your Reader with Space between Rows and Columns

.pull-left[
![](img/jon6_1.jpg)
]

.pull-right[
![](img/jon6_2.jpg)
]

]

.panel[.panel-name[7]

## Remove Unit Repetition

.pull-left[
![](img/jon7_1.jpg)
]

.pull-right[
![](img/jon7_2.jpg)
]

]

.panel[.panel-name[8]

## Highlight Outliers

.pull-left[
![](img/jon8_1.jpg)
]

.pull-right[
![](img/jon8_2.jpg)
]

]

.panel[.panel-name[9]

## Group Similar Data and Increase White Space

.pull-left[
![](img/jon9_1.jpg)
]

.pull-right[
![](img/jon9_2.jpg)
]

]

.panel[.panel-name[10]

## Add Visualizations When Appropriate

]
]

---
class: middle, center, inverse
background-color: #B38069

# Do you have any table guidelines you like to use?

---
class: center

# Learn from what you like

![](img/contest1.png)

.footnote[Source: Niels van der Velden]

---
class: middle, center, inverse
background-color: #B38069

# What sort of information do you think is most important to display on a flight departure table?

---

# Tables in R

|             |               |                |
|-------------|---------------|----------------|
| apaTables   | pixiedust     | modelsummary   |
| DT          | reactable     | fixest::etable |
| flextable   | rhandsontable | mmtable2       |
| formattable | stargazer     | texreg         |
| huxtable    | sjPlot        | compareGroups  |
| gt          | tableone      | tidytab        |
| kable       | htmlTable     | janitor        |
| gtsummary   | statar        | arsenal        |

---

# The gt package

---
class: inverse, center, middle

# Let's make a table!

RStudio Cloud Project: https://bit.ly/joziproject

Github repo: https://bit.ly/jozirepo

---
class: center, middle

Slides made with [xaringan](https://bookdown.org/yihui/rmarkdown/xaringan.html) 👍

Contributors: [Shannon Pileggi](https://github.com/shannonpileggi)