Easy Flipbook Recipes

# Easy Flipbook Recipes
## with {flipbookr} and {xaringan}
### Gina Reynolds, August 2020

---

# These slides are aimed at helping you get started making flipbooks with {flipbookr} and {xaringan}.

---
class: inverse, center, middle

# It will show you what's needed in your source .Rmd document...

---
class: inverse, center, middle

# ...and what to expect for the flipbooked result.

---
class: inverse

# In this guide:

##- slides with a *dark background* communicate about *'how-to'*, i.e. what will be in your .Rmd file

##- and slides with a *light background* demo the *flipbook experience* that you'll create upon 'knitting'.

---
class: inverse

# I assume that you are familiar with:

##- [the R programming language](https://www.r-project.org/)
##- [knitr and Rmarkdown](https://bookdown.org/yihui/rmarkdown/) which let you comingle prose and code, and compile to documents with prose, code, output and more!

---
class: inverse

## If the {xaringan} package is new to you, things might feel a little more foreign.

## {xaringan} translates an Rmarkdown (.Rmd) file to an .html slide show.

## For background on {xaringan} you might first check out [an introduction](https://bookdown.org/yihui/rmarkdown/xaringan.html) and later come back to a [styling guide](https://arm.rbind.io/slides/xaringan.html#1)

---
class: inverse, middle, center

# Okay.

---
class: inverse, middle, center

# Ready to cook up some flipbooks?

---
class: inverse, middle, center

# Let's get started!

---
class: inverse

## Step 0: Installing {xaringan} and {flipbookr}

- ### In your R console:

```r
install.packages("xaringan")
install.packages("remotes") # allows you to install development packages from github
remotes::install_github("EvaMaeRey/flipbookr")
```

- ### Note: you probably don't need to update dependency packages when installing {flipbookr}, i.e. select option #3, 'don't update' if prompted.

- ### Restart R.

- ### Congrats! The foundation is laid for flipbooking!

---
class: inverse, middle, center

# Step 1. Set up

---
class: inverse

## 1a. In an .Rmd file, start with a YAML like this:

````markdown
---
title: "My First Flipbook"
subtitle: "With flipbookr and xaringan"
author: "Your name here"
output:
  xaringan::moon_reader:
    lib_dir: libs
    css: [default, hygge, ninjutsu]
    nature:
      ratio: 16:10
      highlightStyle: github
      highlightLines: true
      countIncrementalSlides: false
---
````

### This declares your output document to be an html {xaringan} slide show.

---
class: inverse

## 1b. setup code chunk

````markdown
```{r setup, include = FALSE}
library(flipbookr)
library(tidyverse)

knitr::opts_chunk$set(fig.width = 6, message = FALSE, 
                      warning = FALSE, comment = "", 
                      cache = F)
```
````

### Your setup code chunk loads {flipbookr}, and maybe other packages (like the {tidyverse} in this example) and sets some knitr defaults.

---
class: inverse

## 1c. css code chunk

````markdown
```{css, eval = TRUE, echo = FALSE}
.remark-code{line-height: 1.5; font-size: 80%}

@media print {
  .has-continuation {
    display: block;
  }
}
```
````

### css stands for cascading style sheets (you'll see that in the YAML too), and this code chunk helps define the look of the html document you'll ultimately produce.

### In this chunk, you can quickly adjust the font size for the code that you'll be revealing.  Now it is set to 80%.

---
class: inverse, middle, center

# Step 2: building a code pipeline in a 'source' code chunk

---
class: inverse

### A *source* code chunk, named 'my_cars' will serve as the material to be flipbooked.

````markdown
```{r my_cars, include = FALSE}
cars %>% 
  ggplot() +
  aes(x = speed) +
  aes(y = dist) + #BREAK
  geom_point(
             shape = 21,
             size = 7, #BREAK2
             color = "magenta", #BREAK3
             alpha = .8 #BREAK4
             ) + #BREAK
  aes(fill = speed) + 
  scale_fill_viridis_c() + 
  theme_minimal() #BREAK
```
````

#### We'll refer to this code chunk later.  We don't want to see this chunk itself, so you should set `include = FALSE`

---
class: inverse, middle, center

# Step 3: Ask for flipbooked version of source code

---
class: inverse

### In your .Rmd use the {flipbookr} function `chunk_reveal()` *inline* as follows.  Refer to the source code chunk that you have prepared by name.

```markdown
---

`r chunk_reveal(chunk_name = "my_cars", title = "### First flipbook!")`
```

### Also, indicate you want a slide break before the inline code  as shown above. The slide break is indicated with three dashes, '---' at the beginning of a line with no trailing spaces.

### Let's see the result... (you might 'knit' your .Rmd now)

---

```r
*cars
```
]
 
.panel2-my_cars-auto[

```
   speed dist
1      4    2
2      4   10
3      7    4
4      7   22
5      8   16
6      9   10
7     10   18
8     10   26
9     10   34
10    11   17
11    11   28
12    12   14
13    12   20
14    12   24
15    12   28
16    13   26
17    13   34
18    13   34
19    13   46
20    14   26
21    14   36
22    14   60
23    14   80
24    15   20
25    15   26
26    15   54
27    16   32
28    16   40
29    17   32
30    17   40
31    17   50
32    18   42
33    18   56
34    18   76
35    18   84
36    19   36
37    19   46
38    19   68
39    20   32
40    20   48
41    20   52
42    20   56
43    20   64
44    22   66
45    23   54
46    24   70
47    24   92
48    24   93
49    24  120
50    25   85
```
]