class: center, middle, inverse, title-slide # A Minimal Flipbook ### Gina Reynolds, May 2019 --- --- # Introduction This is a minimal example to demonstrate how to create a flipbook that will walk through data wrangling and plots pipelines made with the Tidyverse. The functions that make this possible are the work of Emi Tanaka, Garrick Aden-Buie and myself, and are built for Xaringan, an Rmarkdown file type for creating presentation slides; the functions make use of the function `knitr:::knit_code$get()`. Interested in more flipbooks? Check out - [the ggplot flipbook](https://evamaerey.github.io/ggplot_flipbook/ggplot_flipbook_xaringan.html) - [The Tidyverse in Action](https://evamaerey.github.io/tidyverse_in_action/tidyverse_in_action.html) For more about Xaringan: - [Xaringan presentation slides](https://slides.yihui.name/xaringan/) The sequential workflow of the Tidyverse makes incremental display of pipelines ideal: - [www.tidyverse.org](https://www.tidyverse.org/) --- # Set up Okay. Let's load the the `reveal for xaringan` functions for "flipbooking" and the `tidyverse`. ```r if(file.exists("../xaringan_reveal_parentheses_balanced.R")){ source(file = "../xaringan_reveal_parentheses_balanced.R") } else { source(file = "https://raw.githubusercontent.com/EvaMaeRey/little_flipbooks_library/master/xaringan_reveal_parentheses_balanced.R") } library(tidyverse) library(gapminder) ``` ```r gapminder_2007 <- gapminder %>% filter(year == 2007) ``` --- # Where we are going: We'll create this plot. I have **echo** set to FALSE in the code chunk options here so that you don't see the code, and **eval** to TRUE so that the plot output is produced. The code chunk is given the name "gapminder2007", and this is used in the in apply_reveal function, which breaks down code by wrangling and plot statements. <img src="minimal_example_files/figure-html/gapminder2007-1.png" style="display: block; margin: auto;" /> --- # How do we get there? In the next slide, we'll walk through the code that produces this plot, and the output along the way. We use the code `apply_reveal("gapminder2007")` in-line to access the code from the code chunk called *gapminder2007*. --- class: split-40 count: false .column[.content[ ```r *ggplot(data = gapminder_2007) ``` ]] .column[.content[ <img src="minimal_example_files/figure-html/output_gapminder2007_1-1.png" style="display: block; margin: auto;" /> ]] --- class: split-40 count: false .column[.content[ ```r ggplot(data = gapminder_2007) + * aes(x = gdpPercap) # x axis ``` ]] .column[.content[ <img src="minimal_example_files/figure-html/output_gapminder2007_2-1.png" style="display: block; margin: auto;" /> ]] --- class: split-40 count: false .column[.content[ ```r ggplot(data = gapminder_2007) + aes(x = gdpPercap) + # x axis * aes(y = lifeExp) # y axis ``` ]] .column[.content[ <img src="minimal_example_files/figure-html/output_gapminder2007_3-1.png" style="display: block; margin: auto;" /> ]] --- class: split-40 count: false .column[.content[ ```r ggplot(data = gapminder_2007) + aes(x = gdpPercap) + # x axis aes(y = lifeExp) + # y axis * geom_point() ``` ]] .column[.content[ <img src="minimal_example_files/figure-html/output_gapminder2007_4-1.png" style="display: block; margin: auto;" /> ]] --- class: split-40 count: false .column[.content[ ```r ggplot(data = gapminder_2007) + aes(x = gdpPercap) + # x axis aes(y = lifeExp) + # y axis geom_point() + * aes(color = continent) ``` ]] .column[.content[ <img src="minimal_example_files/figure-html/output_gapminder2007_5-1.png" style="display: block; margin: auto;" /> ]] --- # Other pipeline connectors The reveal functions are also written to recognize the pipe, `%>%`, and reverse assignment operator `->`, at the end of a line as reveal break points. An example follows. --- class: split-40 count: false .column[.content[ ```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 %>% * filter(year == 2007) ``` ]] .column[.content[ ``` # A tibble: 142 x 6 country continent year lifeExp pop gdpPercap <fct> <fct> <int> <dbl> <int> <dbl> 1 Afghanistan Asia 2007 43.8 31889923 975. 2 Albania Europe 2007 76.4 3600523 5937. 3 Algeria Africa 2007 72.3 33333216 6223. 4 Angola Africa 2007 42.7 12420476 4797. 5 Argentina Americas 2007 75.3 40301927 12779. 6 Australia Oceania 2007 81.2 20434176 34435. 7 Austria Europe 2007 79.8 8199783 36126. 8 Bahrain Asia 2007 75.6 708573 29796. 9 Bangladesh Asia 2007 64.1 150448339 1391. 10 Belgium Europe 2007 79.4 10392226 33693. # … with 132 more rows ``` ]] --- class: split-40 count: false .column[.content[ ```r gapminder %>% filter(year == 2007) %>% * ggplot() ``` ]] .column[.content[ <img src="minimal_example_files/figure-html/output_gapminder2007pipe_3-1.png" style="display: block; margin: auto;" /> ]] --- class: split-40 count: false .column[.content[ ```r gapminder %>% filter(year == 2007) %>% ggplot() + * aes(x = gdpPercap) ``` ]] .column[.content[ <img src="minimal_example_files/figure-html/output_gapminder2007pipe_4-1.png" style="display: block; margin: auto;" /> ]] --- class: split-40 count: false .column[.content[ ```r gapminder %>% filter(year == 2007) %>% ggplot() + aes(x = gdpPercap) + * aes(y = lifeExp) ``` ]] .column[.content[ <img src="minimal_example_files/figure-html/output_gapminder2007pipe_5-1.png" style="display: block; margin: auto;" /> ]] --- class: split-40 count: false .column[.content[ ```r gapminder %>% filter(year == 2007) %>% ggplot() + aes(x = gdpPercap) + aes(y = lifeExp) + * geom_point() ``` ]] .column[.content[ <img src="minimal_example_files/figure-html/output_gapminder2007pipe_6-1.png" style="display: block; margin: auto;" /> ]] --- class: split-40 count: false .column[.content[ ```r gapminder %>% filter(year == 2007) %>% ggplot() + aes(x = gdpPercap) + aes(y = lifeExp) + geom_point() + * aes(col = continent) ``` ]] .column[.content[ <img src="minimal_example_files/figure-html/output_gapminder2007pipe_7-1.png" style="display: block; margin: auto;" /> ]] --- class: split-40 count: false .column[.content[ ```r gapminder %>% filter(year == 2007) %>% ggplot() + aes(x = gdpPercap) + aes(y = lifeExp) + geom_point() + aes(col = continent) -> * g ``` ]] .column[.content[ ]] --- # Hide code You might be interested in showing the evolution of a plot, without focusing on the code. Let's see an example of this. Consider the case where you want to show the x-axis, then add the y-axis, show one data point, and then add the rest of the data. Building up plots slowly in presentations has been a technique employed by Hans Rosling and Mona Chalabi. Matthew Blackwell tweeted this advice in 2018 -- it resonated with a lot of folks! --- To do this, we prep a code chunk with our plot, defining where we want breaks in display to come with the statement **#REVEAL** at the end of the key lines. ```r gapminder %>% # Prep filter(year == 2007) %>% # Data ggplot() + # pipe to ggplot theme_minimal(base_size = 15) + # prep x axis aes(x = gdpPercap) + labs(x = "GDP per Capita ($US)") + #REVEAL # prep y axis aes(y = lifeExp) + labs(y = "Life Expectency") + geom_blank() + # keep all points #REVEAL # plot one point geom_point(data = gapminder_2007 %>% filter(country == "Spain")) + #REVEAL # plot rest of points geom_point() #REVEAL ``` --- Then, we'll use the name of this code chunk in a reveal function "apply_reveal", with `show_code` set to F, and `user_reveal_defined` set to T. --- # My Title <img src="minimal_example_files/figure-html/output_gapminder2007plotonly_7-1.png" style="display: block; margin: auto;" /> --- # My Title <img src="minimal_example_files/figure-html/output_gapminder2007plotonly_11-1.png" style="display: block; margin: auto;" /> --- # My Title <img src="minimal_example_files/figure-html/output_gapminder2007plotonly_14-1.png" style="display: block; margin: auto;" /> --- # My Title <img src="minimal_example_files/figure-html/output_gapminder2007plotonly_16-1.png" style="display: block; margin: auto;" /> <style type="text/css"> .remark-code{line-height: 1.5; font-size: 100%} </style>