Racing Barchart with gganimate

# Racing Barchart with gganimate
## a quick flipbook | made with Xaringan
### <br><br>Gina Reynolds, April 2019
### <br>

---

# Introduction

This book walks through data prep and plotting a racing barchart with ggplot and gganimate.

---

# Set up

```r
library(gapminder)
library(tidyverse)
```

---

```r
*gapminder
```
]]
.column[.content[

```
  # A tibble: 1,704 x 6
     country     continent  year lifeExp      pop gdpPercap
     <fct>       <fct>     <int>   <dbl>    <int>     <dbl>
   1 Afghanistan Asia       1952    28.8  8425333      779.
   2 Afghanistan Asia       1957    30.3  9240934      821.
   3 Afghanistan Asia       1962    32.0 10267083      853.
   4 Afghanistan Asia       1967    34.0 11537966      836.
   5 Afghanistan Asia       1972    36.1 13079460      740.
   6 Afghanistan Asia       1977    38.4 14880372      786.
   7 Afghanistan Asia       1982    39.9 12881816      978.
   8 Afghanistan Asia       1987    40.8 13867957      852.
   9 Afghanistan Asia       1992    41.7 16317921      649.
  10 Afghanistan Asia       1997    41.8 22227415      635.
  # … with 1,694 more rows
```
]]
---
class: split-40
count: false
.column[.content[

```r
gapminder %>%  
* select(country, pop, year, continent)
```
]]
.column[.content[

```
  # A tibble: 1,704 x 4
     country          pop  year continent
     <fct>          <int> <int> <fct>    
   1 Afghanistan  8425333  1952 Asia     
   2 Afghanistan  9240934  1957 Asia     
   3 Afghanistan 10267083  1962 Asia     
   4 Afghanistan 11537966  1967 Asia     
   5 Afghanistan 13079460  1972 Asia     
   6 Afghanistan 14880372  1977 Asia     
   7 Afghanistan 12881816  1982 Asia     
   8 Afghanistan 13867957  1987 Asia     
   9 Afghanistan 16317921  1992 Asia     
  10 Afghanistan 22227415  1997 Asia     
  # … with 1,694 more rows
```
]]
---
class: split-40
count: false
.column[.content[

```r
gapminder %>%  
  select(country, pop, year, continent) %>%  
* # for each year we assign a rank
* group_by(year)
```
]]
.column[.content[

```
  # A tibble: 1,704 x 4
  # Groups:   year [12]
     country          pop  year continent
     <fct>          <int> <int> <fct>    
   1 Afghanistan  8425333  1952 Asia     
   2 Afghanistan  9240934  1957 Asia     
   3 Afghanistan 10267083  1962 Asia     
   4 Afghanistan 11537966  1967 Asia     
   5 Afghanistan 13079460  1972 Asia     
   6 Afghanistan 14880372  1977 Asia     
   7 Afghanistan 12881816  1982 Asia     
   8 Afghanistan 13867957  1987 Asia     
   9 Afghanistan 16317921  1992 Asia     
  10 Afghanistan 22227415  1997 Asia     
  # … with 1,694 more rows
```
]]
---
class: split-40
count: false
.column[.content[

```r
gapminder %>%  
  select(country, pop, year, continent) %>%  
  # for each year we assign a rank
  group_by(year) %>%  
* arrange(year, -pop)
```
]]
.column[.content[

```
  # A tibble: 1,704 x 4
  # Groups:   year [12]
     country              pop  year continent
     <fct>              <int> <int> <fct>    
   1 China          556263527  1952 Asia     
   2 India          372000000  1952 Asia     
   3 United States  157553000  1952 Americas 
   4 Japan           86459025  1952 Asia     
   5 Indonesia       82052000  1952 Asia     
   6 Germany         69145952  1952 Europe   
   7 Brazil          56602560  1952 Americas 
   8 United Kingdom  50430000  1952 Europe   
   9 Italy           47666000  1952 Europe   
  10 Bangladesh      46886859  1952 Asia     
  # … with 1,694 more rows
```
]]
---
class: split-40
count: false
.column[.content[

```r
gapminder %>%  
  select(country, pop, year, continent) %>%  
  # for each year we assign a rank
  group_by(year) %>%  
  arrange(year, -pop) %>%  
* # assign ranking
* mutate(rank = 1:n())
```
]]
.column[.content[

```
  # A tibble: 1,704 x 5
  # Groups:   year [12]
     country              pop  year continent  rank
     <fct>              <int> <int> <fct>     <int>
   1 China          556263527  1952 Asia          1
   2 India          372000000  1952 Asia          2
   3 United States  157553000  1952 Americas      3
   4 Japan           86459025  1952 Asia          4
   5 Indonesia       82052000  1952 Asia          5
   6 Germany         69145952  1952 Europe        6
   7 Brazil          56602560  1952 Americas      7
   8 United Kingdom  50430000  1952 Europe        8
   9 Italy           47666000  1952 Europe        9
  10 Bangladesh      46886859  1952 Asia         10
  # … with 1,694 more rows
```
]]
---
class: split-40
count: false
.column[.content[

```r
gapminder %>%  
  select(country, pop, year, continent) %>%  
  # for each year we assign a rank
  group_by(year) %>%  
  arrange(year, -pop) %>%  
  # assign ranking
  mutate(rank = 1:n()) %>%  
* filter(rank <= 10)
```
]]
.column[.content[

```
  # A tibble: 120 x 5
  # Groups:   year [12]
     country              pop  year continent  rank
     <fct>              <int> <int> <fct>     <int>
   1 China          556263527  1952 Asia          1
   2 India          372000000  1952 Asia          2
   3 United States  157553000  1952 Americas      3
   4 Japan           86459025  1952 Asia          4
   5 Indonesia       82052000  1952 Asia          5
   6 Germany         69145952  1952 Europe        6
   7 Brazil          56602560  1952 Americas      7
   8 United Kingdom  50430000  1952 Europe        8
   9 Italy           47666000  1952 Europe        9
  10 Bangladesh      46886859  1952 Asia         10
  # … with 110 more rows
```
]]
---
class: split-40
count: false
.column[.content[

]]

---

```r
my_theme <- theme_classic(base_family = "Times") +
  theme(axis.text.y = element_blank()) +
  theme(axis.ticks.y = element_blank()) +
  theme(axis.line.y = element_blank()) +
  theme(legend.background = element_rect(fill = "gainsboro")) +
  theme(plot.background = element_rect(fill = "gainsboro")) +
  theme(panel.background = element_rect(fill = "gainsboro"))
```
  
---
# Static plot

---
class: split-40
count: false
.column[.content[

```r
*ranked_by_year
```
]]
.column[.content[

```r
ranked_by_year %>%  
* ggplot()
```
]]
.column[.content[
<img src="racing_barcharts_files/figure-html/output_static_bar_2-1.png" width="100%" />
]]
---
class: split-40
count: false
.column[.content[

```r
ranked_by_year %>%  
  ggplot() +  
* aes(xmin = 0 ,
*     xmax = pop / 1000000)
```
]]
.column[.content[
<img src="racing_barcharts_files/figure-html/output_static_bar_4-1.png" width="100%" />
]]
---
class: split-40
count: false
.column[.content[

```r
ranked_by_year %>%  
  ggplot() +  
  aes(xmin = 0 ,  
      xmax = pop / 1000000) +  
* aes(ymin = rank - .45,
*     ymax = rank + .45,
*     y = rank)
```
]]
.column[.content[
<img src="racing_barcharts_files/figure-html/output_static_bar_7-1.png" width="100%" />
]]
---
class: split-40
count: false
.column[.content[

```r
ranked_by_year %>%  
  ggplot() +  
  aes(xmin = 0 ,  
      xmax = pop / 1000000) +  
  aes(ymin = rank - .45,  
      ymax = rank + .45,  
      y = rank) +  
* facet_wrap(~ year)
```
]]
.column[.content[
<img src="racing_barcharts_files/figure-html/output_static_bar_8-1.png" width="100%" />
]]
---
class: split-40
count: false
.column[.content[

```r
ranked_by_year %>%  
  ggplot() +  
  aes(xmin = 0 ,  
      xmax = pop / 1000000) +  
  aes(ymin = rank - .45,  
      ymax = rank + .45,  
      y = rank) +  
  facet_wrap(~ year) +  
* geom_rect(alpha = .7)
```
]]
.column[.content[
<img src="racing_barcharts_files/figure-html/output_static_bar_9-1.png" width="100%" />
]]
---
class: split-40
count: false
.column[.content[

```r
ranked_by_year %>%  
  ggplot() +  
  aes(xmin = 0 ,  
      xmax = pop / 1000000) +  
  aes(ymin = rank - .45,  
      ymax = rank + .45,  
      y = rank) +  
  facet_wrap(~ year) +  
  geom_rect(alpha = .7) +  
* aes(fill = continent)
```
]]
.column[.content[
<img src="racing_barcharts_files/figure-html/output_static_bar_10-1.png" width="100%" />
]]
---
class: split-40
count: false
.column[.content[

```r
ranked_by_year %>%  
  ggplot() +  
  aes(xmin = 0 ,  
      xmax = pop / 1000000) +  
  aes(ymin = rank - .45,  
      ymax = rank + .45,  
      y = rank) +  
  facet_wrap(~ year) +  
  geom_rect(alpha = .7) +  
  aes(fill = continent) +  
* scale_fill_viridis_d(option = "magma",
*                      direction = -1)
```
]]
.column[.content[
<img src="racing_barcharts_files/figure-html/output_static_bar_12-1.png" width="100%" />
]]
---
class: split-40
count: false
.column[.content[

```r
ranked_by_year %>%  
  ggplot() +  
  aes(xmin = 0 ,  
      xmax = pop / 1000000) +  
  aes(ymin = rank - .45,  
      ymax = rank + .45,  
      y = rank) +  
  facet_wrap(~ year) +  
  geom_rect(alpha = .7) +  
  aes(fill = continent) +  
  scale_fill_viridis_d(option = "magma",  
                       direction = -1) +  
* scale_x_continuous(
*   limits = c(-800, 1400),
*   breaks = c(0, 400, 800, 1200))
```
]]
.column[.content[
<img src="racing_barcharts_files/figure-html/output_static_bar_15-1.png" width="100%" />
]]
---
class: split-40
count: false
.column[.content[

```r
ranked_by_year %>%  
  ggplot() +  
  aes(xmin = 0 ,  
      xmax = pop / 1000000) +  
  aes(ymin = rank - .45,  
      ymax = rank + .45,  
      y = rank) +  
  facet_wrap(~ year) +  
  geom_rect(alpha = .7) +  
  aes(fill = continent) +  
  scale_fill_viridis_d(option = "magma",  
                       direction = -1) +  
  scale_x_continuous(  
    limits = c(-800, 1400),  
    breaks = c(0, 400, 800, 1200)) +  
* geom_text(col = "gray13",
*           hjust = "right",
*           aes(label = country),
*           x = -50)
```
]]
.column[.content[
<img src="racing_barcharts_files/figure-html/output_static_bar_19-1.png" width="100%" />
]]
---
class: split-40
count: false
.column[.content[

```r
ranked_by_year %>%  
  ggplot() +  
  aes(xmin = 0 ,  
      xmax = pop / 1000000) +  
  aes(ymin = rank - .45,  
      ymax = rank + .45,  
      y = rank) +  
  facet_wrap(~ year) +  
  geom_rect(alpha = .7) +  
  aes(fill = continent) +  
  scale_fill_viridis_d(option = "magma",  
                       direction = -1) +  
  scale_x_continuous(  
    limits = c(-800, 1400),  
    breaks = c(0, 400, 800, 1200)) +  
  geom_text(col = "gray13",  
            hjust = "right",  
            aes(label = country),  
            x = -50) +  
* scale_y_reverse()
```
]]
.column[.content[
<img src="racing_barcharts_files/figure-html/output_static_bar_20-1.png" width="100%" />
]]
---
class: split-40
count: false
.column[.content[

```r
ranked_by_year %>%  
  ggplot() +  
  aes(xmin = 0 ,  
      xmax = pop / 1000000) +  
  aes(ymin = rank - .45,  
      ymax = rank + .45,  
      y = rank) +  
  facet_wrap(~ year) +  
  geom_rect(alpha = .7) +  
  aes(fill = continent) +  
  scale_fill_viridis_d(option = "magma",  
                       direction = -1) +  
  scale_x_continuous(  
    limits = c(-800, 1400),  
    breaks = c(0, 400, 800, 1200)) +  
  geom_text(col = "gray13",  
            hjust = "right",  
            aes(label = country),  
            x = -50) +  
  scale_y_reverse() +  
* labs(fill = NULL)
```
]]
.column[.content[
<img src="racing_barcharts_files/figure-html/output_static_bar_21-1.png" width="100%" />
]]
---
class: split-40
count: false
.column[.content[

```r
ranked_by_year %>%  
  ggplot() +  
  aes(xmin = 0 ,  
      xmax = pop / 1000000) +  
  aes(ymin = rank - .45,  
      ymax = rank + .45,  
      y = rank) +  
  facet_wrap(~ year) +  
  geom_rect(alpha = .7) +  
  aes(fill = continent) +  
  scale_fill_viridis_d(option = "magma",  
                       direction = -1) +  
  scale_x_continuous(  
    limits = c(-800, 1400),  
    breaks = c(0, 400, 800, 1200)) +  
  geom_text(col = "gray13",  
            hjust = "right",  
            aes(label = country),  
            x = -50) +  
  scale_y_reverse() +  
  labs(fill = NULL) +  
* labs(x = 'Population (millions)')
```
]]
.column[.content[
<img src="racing_barcharts_files/figure-html/output_static_bar_22-1.png" width="100%" />
]]
---
class: split-40
count: false
.column[.content[

```r
ranked_by_year %>%  
  ggplot() +  
  aes(xmin = 0 ,  
      xmax = pop / 1000000) +  
  aes(ymin = rank - .45,  
      ymax = rank + .45,  
      y = rank) +  
  facet_wrap(~ year) +  
  geom_rect(alpha = .7) +  
  aes(fill = continent) +  
  scale_fill_viridis_d(option = "magma",  
                       direction = -1) +  
  scale_x_continuous(  
    limits = c(-800, 1400),  
    breaks = c(0, 400, 800, 1200)) +  
  geom_text(col = "gray13",  
            hjust = "right",  
            aes(label = country),  
            x = -50) +  
  scale_y_reverse() +  
  labs(fill = NULL) +  
  labs(x = 'Population (millions)') +  
* labs(y = "")
```
]]
.column[.content[
<img src="racing_barcharts_files/figure-html/output_static_bar_23-1.png" width="100%" />
]]
---
class: split-40
count: false
.column[.content[

```r
ranked_by_year %>%  
  ggplot() +  
  aes(xmin = 0 ,  
      xmax = pop / 1000000) +  
  aes(ymin = rank - .45,  
      ymax = rank + .45,  
      y = rank) +  
  facet_wrap(~ year) +  
  geom_rect(alpha = .7) +  
  aes(fill = continent) +  
  scale_fill_viridis_d(option = "magma",  
                       direction = -1) +  
  scale_x_continuous(  
    limits = c(-800, 1400),  
    breaks = c(0, 400, 800, 1200)) +  
  geom_text(col = "gray13",  
            hjust = "right",  
            aes(label = country),  
            x = -50) +  
  scale_y_reverse() +  
  labs(fill = NULL) +  
  labs(x = 'Population (millions)') +  
  labs(y = "") +  
* my_theme
```
]]
.column[.content[
<img src="racing_barcharts_files/figure-html/output_static_bar_24-1.png" width="100%" />
]]
---
class: split-40
count: false
.column[.content[

```r
ranked_by_year %>%  
  ggplot() +  
  aes(xmin = 0 ,  
      xmax = pop / 1000000) +  
  aes(ymin = rank - .45,  
      ymax = rank + .45,  
      y = rank) +  
  facet_wrap(~ year) +  
  geom_rect(alpha = .7) +  
  aes(fill = continent) +  
  scale_fill_viridis_d(option = "magma",  
                       direction = -1) +  
  scale_x_continuous(  
    limits = c(-800, 1400),  
    breaks = c(0, 400, 800, 1200)) +  
  geom_text(col = "gray13",  
            hjust = "right",  
            aes(label = country),  
            x = -50) +  
  scale_y_reverse() +  
  labs(fill = NULL) +  
  labs(x = 'Population (millions)') +  
  labs(y = "") +  
  my_theme ->  
*my_plot
```
]]
.column[.content[

]]

---

# Now set up the animation

Next we add the animation statement, which uses a function from the gganimate package.

```r
library(gganimate) 
# options(gganimate.nframes = 20)
```

---

```r
*my_plot
```
]]
.column[.content[
<img src="racing_barcharts_files/figure-html/output_ani_final_1-1.png" width="100%" />
]]
---
class: split-40
count: false
.column[.content[

```r
my_plot +  
* facet_null()
```
]]
.column[.content[
<img src="racing_barcharts_files/figure-html/output_ani_final_2-1.png" width="100%" />
]]
---
class: split-40
count: false
.column[.content[

```r
my_plot +  
  facet_null() +  
* scale_x_continuous(
*   limits = c(-355, 1400),
*   breaks = c(0, 400, 800, 1200))
```
]]
.column[.content[
<img src="racing_barcharts_files/figure-html/output_ani_final_5-1.png" width="100%" />
]]
---
class: split-40
count: false
.column[.content[

```r
my_plot +  
  facet_null() +  
  scale_x_continuous(  
    limits = c(-355, 1400),  
    breaks = c(0, 400, 800, 1200)) +  
* geom_text(x = 1000 , y = -10,
*           family = "Times",
*           aes(label = as.character(year)),
*           size = 30, col = "grey18")
```
]]
.column[.content[
<img src="racing_barcharts_files/figure-html/output_ani_final_9-1.png" width="100%" />
]]
---
class: split-40
count: false
.column[.content[

```r
my_plot +  
  facet_null() +  
  scale_x_continuous(  
    limits = c(-355, 1400),  
    breaks = c(0, 400, 800, 1200)) +  
  geom_text(x = 1000 , y = -10,  
            family = "Times",  
            aes(label = as.character(year)),  
            size = 30, col = "grey18") +  
* aes(group = country)
```
]]
.column[.content[
<img src="racing_barcharts_files/figure-html/output_ani_final_10-1.png" width="100%" />
]]
---
class: split-40
count: false
.column[.content[

```r
my_plot +  
  facet_null() +  
  scale_x_continuous(  
    limits = c(-355, 1400),  
    breaks = c(0, 400, 800, 1200)) +  
  geom_text(x = 1000 , y = -10,  
            family = "Times",  
            aes(label = as.character(year)),  
            size = 30, col = "grey18") +  
  aes(group = country) +  
* gganimate::transition_time(year)
```
]]
.column[.content[
<img src="racing_barcharts_files/figure-html/output_ani_final_11-1.gif" width="100%" />
]]