Flipbooking

# Flipbooking
## With flipbookr and xaringan
### Gina Reynolds, December 2019

---

# Welcome

- Yes, there is now a package called `flipbookr`

- Yes, it's still under construction

- Yes, you can help make it less fragile and awesome by letting us know if/how it breaks and frustrates you and/or contributing at https://github.com/EvaMaeRey/flipbookr!

---

# Spread the word and giving feedback

Please help us spread the word about flipbooks.  Let your audience know *how* you created your flipbook with a quick acknowledgment, for example, *The flipbooked portion of this presentation was created with the new {flipbookr} package.  Get it at remotes::install_github("EvaMaeRey/flipbookr")*

Also consider sharing your work on social media, and let me know what you've built on Twitter with a mention to @EvaMaeRey

Feedback? Contributions? Leave an issue at:  https://github.com/EvaMaeRey/flipbookr

---

# "Flipbooks"?

“Flipbooks” are tools that present side-by-side, aligned, incremental code-output evolution via automated code parsing and reconstruction. More about Flipbooks [here](https://evamaerey.github.io/little_flipbooks_library/about/what_the_flipbook).  There now exists a package for making Flipbooks for R: `flipbookr`.  This is under development, but you are welcome to try it out by installing from github:

``` r
devtools::install_github("EvaMaeRey/flipbookr")
```

You can see the template that was used to build this flipbook that you are looking at right now  [here](https://raw.githubusercontent.com/EvaMaeRey/flipbookr/master/inst/rmarkdown/templates/template-name/skeleton/skeleton.Rmd).

Or, once you install the package (and restart R) a template for making the flipbook that you are looking at will also be available from within RStudio, File -> New File -> R Markdown -> From Template -> "A Minimal Flipbook".

---

# How Flipbooking with Xaringan works

The flipbook you will be building here uses a member of the [rmarkdown](https://rmarkdown.rstudio.com/lesson-1.html) family called [Xaringan (presentation ninja)](https://github.com/yihui/xaringan), which creates a slide show in html.  Dynamic documents like `rmarkdown` documents allow you to co-mingle code and prose in a single document.

It may be obvious by now, if you are following along with the source template, that slide breaks are indicated with `---` (be careful trailing white space is not allowed)

---

Flipbooks are built by spawning new *partial* code chunks from a single, user-input code chunk.  The partial code chunks build up and are display consecutively in a slide show alongside its output; this yields a movie-like experience that should make each step easier to understand.

As you begin with flipbooks, I'd recommend using the code chunk option `include = F` for your "source" code chunks, and with no caching throughout.  As you begin to get more comfortable with flipbooking, you might change these choices.

---

## Set-up

We use the flipbookr package, of course! This does the work of disassembling a single code chunk and creating the "build" of multiple partial-code chunks.  You'll see the library call for flipbookr at the top of this file in the "setup" code chunk.

Also, at the top of this template in that "setup" code chunk, I set *code chunk* options for the code chunks that follow.  These will apply to the spawned code chunks.

```
Error in file(filename, "r", encoding = encoding) : 
  cannot open the connection
```

---

# Using `flipbookr::chunk_reveal()`

You will use the `chunk_reveal()` function [*inline*](https://rmarkdown.rstudio.com/lesson-4.html) to generate the derivative code chunks, so that the text that is generated is interpreted correctly when rendered.  The inline code will look something like this:

```markdown
`r chunk_reveal(chunk_name = "cars", break_type = "user")`
```

There are several modes that you might be interested in using for "flipbooking" your code and the next section is dedicated to demoing some of them below.

- **break type** -- *which lines of code should be revealed when*, `break_type` defaults to "auto"
- **display type** -- *display code and output, or just output, or just code?*, `display_type` defaults to "both"
- **assignment type** -- *does code chunk use left assignment?*, `left_assign` defaults to FALSE

---

At first we'll apply `chunk_reveal()` to the below input code - the code chunk is named "my_cars".  For now I set echo = TRUE for this code chunk, so you can see the code content but sometimes you might like to set echo to FALSE. This code uses tidyverse tools, so we loaded that too in the "setup" code chunk at the beginning of the template.

---

# `break_type`

There are several ways that input code can be revealed:

- auto
- user
- non_seq
- rotate
- 5 (set to an integer)

In the above input code, notice the regular comments and the special *#BREAK* comments, these will be used for a couple of the different `break_type` modes.

```r
cars %>%
  filter(speed > 4) %>%
  ggplot() +
  aes(x = speed) +
  aes(y = dist) + #BREAK
  geom_point(
    alpha = .8, #BREAK2
    color = "blue" #BREAK3
    ) + #BREAK
  aes(size = speed) #BREAK
```

---

## `break_type = "auto"`

The default break_type is "auto", in which appropriate breakpoints are determined automatically --- by finding where parentheses are balanced.

---

```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
```
]

---
count: false

```r
cars %>%
* filter(speed > 4)
```
]
 
.panel2-my_cars-auto[

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

---
count: false

```r
cars %>%
  filter(speed > 4) %>%
* ggplot()
```
]
 
.panel2-my_cars-auto[
<img src="skeleton_files/figure-html/my_cars_auto_03_output-1.png" width="432" />
]

---
count: false

```r
cars %>%
  filter(speed > 4) %>%
  ggplot() +
* aes(x = speed)
```
]
 
.panel2-my_cars-auto[
<img src="skeleton_files/figure-html/my_cars_auto_04_output-1.png" width="432" />
]

---
count: false

```r
cars %>%
  filter(speed > 4) %>%
  ggplot() +
  aes(x = speed) +
* aes(y = dist)
```
]
 
.panel2-my_cars-auto[
<img src="skeleton_files/figure-html/my_cars_auto_05_output-1.png" width="432" />
]

---
count: false

```r
cars %>%
  filter(speed > 4) %>%
  ggplot() +
  aes(x = speed) +
  aes(y = dist) +
* geom_point(
*   alpha = .8,
*   color = "blue"
*   )
```
]
 
.panel2-my_cars-auto[
<img src="skeleton_files/figure-html/my_cars_auto_06_output-1.png" width="432" />
]

---
count: false

```r
cars %>%
  filter(speed > 4) %>%
  ggplot() +
  aes(x = speed) +
  aes(y = dist) +
  geom_point(
    alpha = .8,
    color = "blue"
    ) +
* aes(size = speed)
```
]
 
.panel2-my_cars-auto[
<img src="skeleton_files/figure-html/my_cars_auto_07_output-1.png" width="432" />
]

---

## `break_type = "user"`, with #BREAK

If the break_type is set to "user", the breakpoints are those indicated by the user with the special comment #BREAK

---

```r
*cars %>%
* filter(speed > 4) %>%
* ggplot() +
* aes(x = speed) +
* aes(y = dist)
```
]
 
.panel2-my_cars-user[
<img src="skeleton_files/figure-html/my_cars_user_01_output-1.png" width="432" />
]

---
count: false

```r
cars %>%
  filter(speed > 4) %>%
  ggplot() +
  aes(x = speed) +
  aes(y = dist) +
* geom_point(
*   alpha = .8,
*   color = "blue"
*   )
```
]
 
.panel2-my_cars-user[
<img src="skeleton_files/figure-html/my_cars_user_02_output-1.png" width="432" />
]

---
count: false

```r
cars %>%
  filter(speed > 4) %>%
  ggplot() +
  aes(x = speed) +
  aes(y = dist) +
  geom_point(
    alpha = .8,
    color = "blue"
    ) +
* aes(size = speed)
```
]
 
.panel2-my_cars-user[
<img src="skeleton_files/figure-html/my_cars_user_03_output-1.png" width="432" />
]

---

## `break_type = "non_seq"`, with #BREAK2, #BREAK3

If the break_type is set to "non_seq", the breakpoints are those indicated by the user with the special numeric comment #BREAK2, #BREAK3 etc to indicate at which point in time the code should appear.

---

```r
cars %>%
  filter(speed > 4) %>%
  ggplot() +
  aes(x = speed) +
  aes(y = dist) +
  geom_point(
    ) +
  aes(size = speed)
```
]
 
.panel2-my_cars-non_seq[
<img src="skeleton_files/figure-html/my_cars_non_seq_01_output-1.png" width="432" />
]

---
count: false

```r
cars %>%
  filter(speed > 4) %>%
  ggplot() +
  aes(x = speed) +
  aes(y = dist) +
  geom_point(
*   alpha = .8,
    ) +
  aes(size = speed)
```
]
 
.panel2-my_cars-non_seq[
<img src="skeleton_files/figure-html/my_cars_non_seq_02_output-1.png" width="432" />
]

---
count: false

```r
cars %>%
  filter(speed > 4) %>%
  ggplot() +
  aes(x = speed) +
  aes(y = dist) +
  geom_point(
    alpha = .8,
*   color = "blue"
    ) +
  aes(size = speed)
```
]
 
.panel2-my_cars-non_seq[
<img src="skeleton_files/figure-html/my_cars_non_seq_03_output-1.png" width="432" />
]

---

## `break_type = "rotate"`

And break_type = "rotate" is used to to cycle through distinct lines of code. The special comment to indicate which lines should be cycled through is *#ROTATE*.

Sometimes, you will need to set the chunk option to eval = F, echo = F instead of include = F.  This will be true when the input code itself cannot be executed as code to be cycled through is incompatible and would throw an error.

---

```r
ggplot(data = cars) +
  aes(x = speed) +
  aes(y = dist) +
  geom_point(size = 8,
             shape = 21,
             alpha = .9,
             color = "snow") +
  aes(fill = speed) +
* scale_fill_viridis_c(option = "magma")
```
]
 
.panel2-my_rotate-rotate[
<img src="skeleton_files/figure-html/my_rotate_rotate_01_output-1.png" width="432" />
]

---
count: false

```r
ggplot(data = cars) +
  aes(x = speed) +
  aes(y = dist) +
  geom_point(size = 8,
             shape = 21,
             alpha = .9,
             color = "snow") +
  aes(fill = speed) +
* scale_fill_viridis_c(option = "cividis")
```
]
 
.panel2-my_rotate-rotate[
<img src="skeleton_files/figure-html/my_rotate_rotate_02_output-1.png" width="432" />
]

---
count: false

```r
ggplot(data = cars) +
  aes(x = speed) +
  aes(y = dist) +
  geom_point(size = 8,
             shape = 21,
             alpha = .9,
             color = "snow") +
  aes(fill = speed) +
* scale_fill_viridis_c(option = "plasma")
```
]
 
.panel2-my_rotate-rotate[
<img src="skeleton_files/figure-html/my_rotate_rotate_03_output-1.png" width="432" />
]

---

You might want to combine the reveal experience and rotate as one idea.  This can be done with the omit function.

---

```r
*ggplot(data = cars)
```
]
 
.panel2-omit-auto[
<img src="skeleton_files/figure-html/omit_auto_01_output-1.png" width="432" />
]

---
count: false

```r
ggplot(data = cars) +
* theme_minimal(base_size = 13)
```
]
 
.panel2-omit-auto[
<img src="skeleton_files/figure-html/omit_auto_02_output-1.png" width="432" />
]

---
count: false

```r
ggplot(data = cars) +
  theme_minimal(base_size = 13) +
* aes(x = speed)
```
]
 
.panel2-omit-auto[
<img src="skeleton_files/figure-html/omit_auto_03_output-1.png" width="432" />
]

---
count: false

```r
ggplot(data = cars) +
  theme_minimal(base_size = 13) +
  aes(x = speed) +
* aes(y = dist)
```
]
 
.panel2-omit-auto[
<img src="skeleton_files/figure-html/omit_auto_04_output-1.png" width="432" />
]

---
count: false

```r
ggplot(data = cars) +
  theme_minimal(base_size = 13) +
  aes(x = speed) +
  aes(y = dist) +
* geom_point(size = 8,
*            shape = 21,
*            alpha = .9,
*            color = "snow")
```
]
 
.panel2-omit-auto[
<img src="skeleton_files/figure-html/omit_auto_05_output-1.png" width="432" />
]

---
count: false

```r
ggplot(data = cars) +
  theme_minimal(base_size = 13) +
  aes(x = speed) +
  aes(y = dist) +
  geom_point(size = 8,
             shape = 21,
             alpha = .9,
             color = "snow") +
* aes(fill = speed)
```
]
 
.panel2-omit-auto[
<img src="skeleton_files/figure-html/omit_auto_06_output-1.png" width="432" />
]

---
count: false

```r
ggplot(data = cars) +
  theme_minimal(base_size = 13) +
  aes(x = speed) +
  aes(y = dist) +
  geom_point(size = 8,
             shape = 21,
             alpha = .9,
             color = "snow") +
  aes(fill = speed) +
* scale_fill_viridis_c(option = "viridis")
```
]
 
.panel2-omit-auto[
<img src="skeleton_files/figure-html/omit_auto_07_output-1.png" width="432" />
]

---
count: false

```r
ggplot(data = cars) +
  theme_minimal(base_size = 13) +
  aes(x = speed) +
  aes(y = dist) +
  geom_point(size = 8,
             shape = 21,
             alpha = .9,
             color = "snow") +
  aes(fill = speed) +
  scale_fill_viridis_c(option = "viridis") +
* labs(title = "Cars")
```
]
 
.panel2-omit-auto[
<img src="skeleton_files/figure-html/omit_auto_08_output-1.png" width="432" />
]

---
count: false

```r
ggplot(data = cars) +
  theme_minimal(base_size = 13) +
  aes(x = speed) +
  aes(y = dist) +
  geom_point(size = 8,
             shape = 21,
             alpha = .9,
             color = "snow") +
  aes(fill = speed) +
  scale_fill_viridis_c(option = "viridis") +
  labs(title = "Cars") +
* labs(speed = "Speed\n(mph)")
```
]
 
.panel2-omit-auto[
<img src="skeleton_files/figure-html/omit_auto_09_output-1.png" width="432" />
]

---
count: false

```r
ggplot(data = cars) +
  theme_minimal(base_size = 13) +
  aes(x = speed) +
  aes(y = dist) +
  geom_point(size = 8,
             shape = 21,
             alpha = .9,
             color = "snow") +
  aes(fill = speed) +
  scale_fill_viridis_c(option = "viridis") +
  labs(title = "Cars") +
  labs(speed = "Speed\n(mph)") +
* theme(legend.position = "none")
```
]
 
.panel2-omit-auto[
<img src="skeleton_files/figure-html/omit_auto_10_output-1.png" width="432" />
]

---

```r
ggplot(data = cars) +
  theme_minimal(base_size = 13) +
  aes(x = speed) +
  aes(y = dist) +
  geom_point(size = 8,
             shape = 21,
             alpha = .9,
             color = "snow") +
  aes(fill = speed) +
* scale_fill_viridis_c(option = "magma") +
  labs(title = "Cars") +
  labs(speed = "Speed\n(mph)") +
  theme(legend.position = "none")
```
]
 
.panel2-omit-rotate[
<img src="skeleton_files/figure-html/omit_rotate_01_output-1.png" width="432" />
]

---
count: false

```r
ggplot(data = cars) +
  theme_minimal(base_size = 13) +
  aes(x = speed) +
  aes(y = dist) +
  geom_point(size = 8,
             shape = 21,
             alpha = .9,
             color = "snow") +
  aes(fill = speed) +
* scale_fill_viridis_c(option = "cividis") +
  labs(title = "Cars") +
  labs(speed = "Speed\n(mph)") +
  theme(legend.position = "none")
```
]
 
.panel2-omit-rotate[
<img src="skeleton_files/figure-html/omit_rotate_02_output-1.png" width="432" />
]

---
count: false

```r
ggplot(data = cars) +
  theme_minimal(base_size = 13) +
  aes(x = speed) +
  aes(y = dist) +
  geom_point(size = 8,
             shape = 21,
             alpha = .9,
             color = "snow") +
  aes(fill = speed) +
* scale_fill_viridis_c(option = "plasma") +
  labs(title = "Cars") +
  labs(speed = "Speed\n(mph)") +
  theme(legend.position = "none")
```
]
 
.panel2-omit-rotate[
<img src="skeleton_files/figure-html/omit_rotate_03_output-1.png" width="432" />
]

---

## `break_type = 5` (or "entering the multiverse")

Another mode is to set break_type equal to a positive integer, indicating that you want the same code chunk to be displayed multiple times.

This makes the most sense in a setting where there is some randomization or random sampling and you want to see different realizations. Let's see this used on the user input code chunk "cars_multi", whose first step is to randomly sample rows from the data set cars with replacement.

---

```r
cars %>%
  sample_frac(size = 1, replace = TRUE) %>%
  ggplot() +
  aes(x = speed) +
  aes(y = dist) +
  geom_count(
    alpha = .7,
    color = "blue",
    size = 4
    ) +
  geom_smooth(method = lm, se = FALSE) +
  coord_cartesian(xlim = range(cars$speed),
                  ylim = range(cars$dist)) +
  theme(legend.position = c(.9, .2))
```
]
 
.panel2-cars_multi-3[
<img src="skeleton_files/figure-html/cars_multi_3_01_output-1.png" width="432" />
]

---
count: false

---
count: false

---

## `break_type = 1`

Of course gives you the side-by-side with no walk through, which is sometimes nice

---

```r
cars %>%
  sample_frac(size = 1, replace = TRUE) %>%
  ggplot() +
  aes(x = speed) +
  aes(y = dist) +
  geom_count(
    alpha = .7,
    color = "blue",
    size = 4
    ) +
  geom_smooth(method = lm, se = FALSE) +
  coord_cartesian(xlim = range(cars$speed),
                  ylim = range(cars$dist)) +
  theme(legend.position = c(.9, .2))
```
]
 
.panel2-cars_multi-1[
<img src="skeleton_files/figure-html/cars_multi_1_01_output-1.png" width="432" />
]

---

# `display_type`

There are also different display modes.

The default is `display_type = c("code", "output")` which will give you the classic flipbook --- code and output co-evolution. (Note this was formerly "both", but that is now deprecated)

---

Display type can be set to a vector of up to three (currently) inputs:

- "code"
- "output"
- "func"
- "output_lag"
- "code_lag"

Also "md" is allowed but the requires you to give an input for another argument `md` with is the markdown text that you would like displayed at each stage in the flipbook.

---

## `display_type = "output"`

Let's look at where only the *output* is displayed for the "my_cars" code chunk.

---

---
count: false

---
count: false

---
count: false

---
count: false

---
count: false

---

## `display_type = "code"`

And now where only the *code* is displayed for the "my_cars" code chunk.

---

```r
*cars
```

---
count: false

```r
cars %>%
* filter(speed > 4)
```

---
count: false

```r
cars %>%
  filter(speed > 4) %>%
* ggplot()
```

---
count: false

```r
cars %>%
  filter(speed > 4) %>%
  ggplot() +
* aes(x = speed)
```

---
count: false

```r
cars %>%
  filter(speed > 4) %>%
  ggplot() +
  aes(x = speed) +
* aes(y = dist)
```

---
count: false

```r
cars %>%
  filter(speed > 4) %>%
  ggplot() +
  aes(x = speed) +
  aes(y = dist) +
* geom_point(
*   alpha = .8,
*   color = "blue"
*   )
```

---
count: false

```r
cars %>%
  filter(speed > 4) %>%
  ggplot() +
  aes(x = speed) +
  aes(y = dist) +
  geom_point(
    alpha = .8,
    color = "blue"
    ) +
* aes(size = speed)
```

---

## `display_type = c("code", "output", "output_lag")`

If you want to allow for lateral comparison (so not just temporal displacement) of states of the output, using `output_lag` is the solution.

Sometimes we might want to compare the previous output or with the current one *laterally* -- i.e. spatial offset instead of temporal (temporal offset is the essence of flipbooks) but sometimes we might want to have that lateral (spatial) comparison as well. This is most true when differencing via motion detection is not easy.  i.e. when there are large jumps in the position of tabular/text output.

---

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

```
[1] "--"
```
]

---
count: false

```r
cars %>%
* ggplot()
```
]
 
.panel2-short-auto[
<img src="skeleton_files/figure-html/short_auto_02_output-1.png" width="432" />
]
 
.panel3-short-auto[

---
count: false

```r
cars %>%
  ggplot() +
* aes(x = dist)
```
]
 
.panel2-short-auto[
<img src="skeleton_files/figure-html/short_auto_03_output-1.png" width="432" />
]
 
.panel3-short-auto[
<img src="skeleton_files/figure-html/short_auto_03_output_lag-1.png" width="432" />
]

---

Another example follows, showing too how the color parameter can be set to deemphasize the lagged output.

---

```r
*list(1, 2)
```
]
 
.panel2-logical-auto[

```
[[1]]
[1] 1

[[2]]
[1] 2
```
]
 
.panel3-logical-auto[

```
[1] "--"
```
]

---
count: false

```r
list(1, 2) %>%
* list(1:5, 5,
*      ., letters[1:4])
```
]
 
.panel2-logical-auto[

```
[[1]]
[1] 1 2 3 4 5

[[2]]
[1] 5

[[3]]
[[3]][[1]]
[1] 1

[[3]][[2]]
[1] 2

[[4]]
[1] "a" "b" "c" "d"
```
]
 
.panel3-logical-auto[

```
[[1]]
[1] 1

[[2]]
[1] 2
```
]

---
count: false

```r
list(1, 2) %>%
  list(1:5, 5,
       ., letters[1:4]) %>%
* .[[4]]
```
]
 
.panel2-logical-auto[

```
[1] "a" "b" "c" "d"
```
]
 
.panel3-logical-auto[

```
[[1]]
[1] 1 2 3 4 5

[[2]]
[1] 5

[[3]]
[[3]][[1]]
[1] 1

[[3]][[2]]
[1] 2

[[4]]
[1] "a" "b" "c" "d"
```
]

---
count: false

```r
list(1, 2) %>%
  list(1:5, 5,
       ., letters[1:4]) %>%
  .[[4]] %>%
* .[3]
```
]
 
.panel2-logical-auto[

```
[1] "c"
```
]
 
.panel3-logical-auto[

```
[1] "a" "b" "c" "d"
```
]

---

## `display_type = c("code", "output", "output_target")`

Perhaps we want the target to appear on every slide as we build to this target...

---

```r
*ggplot(data = cars)
```
]
 
.panel2-goodbye-auto[
<img src="skeleton_files/figure-html/goodbye_auto_01_output-1.png" width="432" />
]
 
.panel3-goodbye-auto[
<img src="skeleton_files/figure-html/goodbye_auto_01_output_target-1.png" width="432" />
]

---
count: false

```r
ggplot(data = cars) +
* aes(x = speed)
```
]
 
.panel2-goodbye-auto[
<img src="skeleton_files/figure-html/goodbye_auto_02_output-1.png" width="432" />
]
 
.panel3-goodbye-auto[
<img src="skeleton_files/figure-html/goodbye_auto_02_output_target-1.png" width="432" />
]

---
count: false

```r
ggplot(data = cars) +
  aes(x = speed) +
* aes(y = dist)
```
]
 
.panel2-goodbye-auto[
<img src="skeleton_files/figure-html/goodbye_auto_03_output-1.png" width="432" />
]
 
.panel3-goodbye-auto[
<img src="skeleton_files/figure-html/goodbye_auto_03_output_target-1.png" width="432" />
]

---
count: false

```r
ggplot(data = cars) +
  aes(x = speed) +
  aes(y = dist) +
* geom_point(size = 8,
*            shape = 21,
*            alpha = .9,
*            color = "snow")
```
]
 
.panel2-goodbye-auto[
<img src="skeleton_files/figure-html/goodbye_auto_04_output-1.png" width="432" />
]
 
.panel3-goodbye-auto[
<img src="skeleton_files/figure-html/goodbye_auto_04_output_target-1.png" width="432" />
]

---
count: false

```r
ggplot(data = cars) +
  aes(x = speed) +
  aes(y = dist) +
  geom_point(size = 8,
             shape = 21,
             alpha = .9,
             color = "snow") +
* aes(fill = speed)
```
]
 
.panel2-goodbye-auto[
<img src="skeleton_files/figure-html/goodbye_auto_05_output-1.png" width="432" />
]
 
.panel3-goodbye-auto[
<img src="skeleton_files/figure-html/goodbye_auto_05_output_target-1.png" width="432" />
]

---
count: false

```r
ggplot(data = cars) +
  aes(x = speed) +
  aes(y = dist) +
  geom_point(size = 8,
             shape = 21,
             alpha = .9,
             color = "snow") +
  aes(fill = speed) +
* scale_fill_viridis_c(option = "magma")
```
]
 
.panel2-goodbye-auto[
<img src="skeleton_files/figure-html/goodbye_auto_06_output-1.png" width="432" />
]
 
.panel3-goodbye-auto[
<img src="skeleton_files/figure-html/goodbye_auto_06_output_target-1.png" width="432" />
]

---

## `display_type = c("code", "output", "output_start")`

Or maybe we want the input to appear on every slide ...

---

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

---
count: false

```r
cars %>%
* ggplot(data = .)
```
]
 
.panel2-hello-auto[
<img src="skeleton_files/figure-html/hello_auto_02_output-1.png" width="432" />
]
 
.panel3-hello-auto[

---
count: false

```r
cars %>%
  ggplot(data = .) +
* aes(x = speed)
```
]
 
.panel2-hello-auto[
<img src="skeleton_files/figure-html/hello_auto_03_output-1.png" width="432" />
]
 
.panel3-hello-auto[

---
count: false

```r
cars %>%
  ggplot(data = .) +
  aes(x = speed) +
* aes(y = dist)
```
]
 
.panel2-hello-auto[
<img src="skeleton_files/figure-html/hello_auto_04_output-1.png" width="432" />
]
 
.panel3-hello-auto[

---
count: false

```r
cars %>%
  ggplot(data = .) +
  aes(x = speed) +
  aes(y = dist) +
* geom_point(size = 8,
*            shape = 21,
*            alpha = .9,
*            color = "snow")
```
]
 
.panel2-hello-auto[
<img src="skeleton_files/figure-html/hello_auto_05_output-1.png" width="432" />
]
 
.panel3-hello-auto[

---
count: false

```r
cars %>%
  ggplot(data = .) +
  aes(x = speed) +
  aes(y = dist) +
  geom_point(size = 8,
             shape = 21,
             alpha = .9,
             color = "snow") +
* aes(fill = speed)
```
]
 
.panel2-hello-auto[
<img src="skeleton_files/figure-html/hello_auto_06_output-1.png" width="432" />
]
 
.panel3-hello-auto[

---
count: false

```r
cars %>%
  ggplot(data = .) +
  aes(x = speed) +
  aes(y = dist) +
  geom_point(size = 8,
             shape = 21,
             alpha = .9,
             color = "snow") +
  aes(fill = speed) +
* scale_fill_viridis_c(option = "magma")
```
]
 
.panel2-hello-auto[
<img src="skeleton_files/figure-html/hello_auto_07_output-1.png" width="432" />
]
 
.panel3-hello-auto[

---

## `display_type = c("output", "code")`

Not sure why you'd want to do this, but you can flip output and code.

---

```r
*cars
```
]

---
count: false

```r
cars %>%
* filter(speed > 4)
```
]

---
count: false

.panel1-my_cars-auto[
<img src="skeleton_files/figure-html/my_cars_auto_03_output-1.png" width="432" />
]
 
.panel2-my_cars-auto[

```r
cars %>%
  filter(speed > 4) %>%
* ggplot()
```
]

---
count: false

.panel1-my_cars-auto[
<img src="skeleton_files/figure-html/my_cars_auto_04_output-1.png" width="432" />
]
 
.panel2-my_cars-auto[

```r
cars %>%
  filter(speed > 4) %>%
  ggplot() +
* aes(x = speed)
```
]

---
count: false

.panel1-my_cars-auto[
<img src="skeleton_files/figure-html/my_cars_auto_05_output-1.png" width="432" />
]
 
.panel2-my_cars-auto[

```r
cars %>%
  filter(speed > 4) %>%
  ggplot() +
  aes(x = speed) +
* aes(y = dist)
```
]

---
count: false

.panel1-my_cars-auto[
<img src="skeleton_files/figure-html/my_cars_auto_06_output-1.png" width="432" />
]
 
.panel2-my_cars-auto[

```r
cars %>%
  filter(speed > 4) %>%
  ggplot() +
  aes(x = speed) +
  aes(y = dist) +
* geom_point(
*   alpha = .8,
*   color = "blue"
*   )
```
]

---
count: false

.panel1-my_cars-auto[
<img src="skeleton_files/figure-html/my_cars_auto_07_output-1.png" width="432" />
]
 
.panel2-my_cars-auto[

```r
cars %>%
  filter(speed > 4) %>%
  ggplot() +
  aes(x = speed) +
  aes(y = dist) +
  geom_point(
    alpha = .8,
    color = "blue"
    ) +
* aes(size = speed)
```
]

---

## `display_type = c("md", "code"), md = c("hi", "by")`

Now to include a panel for markdown "md" should be one of the inputs of the display_type vector.  Then you'll enter markdown text as a vector for the argument md.

You'll probably plan on the length of the md vector will likely be the same length as the slides in the flipbook which is calculated from the number of breaks for the code sequence.

Double backslashes may be required for escape characters.

---

```r
*library(magrittr)
```
]

---
count: false

```r
library(magrittr)

*cars
```
]

---
count: false

```r
library(magrittr)

cars %$%
* cor(x = speed,
*     y = dist)
```
]

---

## `display_type = c("md", "md2")`

Sometimes, perhaps your only inputs will be markdown sequences.

---

---
count: false

---
count: false

---

## `display_type = "func"`

to display the contents of the functions of a pipeline, you can use display_type = c("code", "func").  The function panel will show the contents of composition of the function that is in the highlighted line.

This is work in progress - seems to be currently broken

---

```r
*rnorm(50)
```
]
 
.panel2-rnorm-auto[

```
function (n, mean = 0, sd = 1) 
.Call(C_rnorm, n, mean, sd)
<bytecode: 0x7fc990f84c00>
<environment: namespace:stats>
```
]
 
.panel3-rnorm-auto[

```
 [1] -0.74941173  0.40474678 -0.60637892  0.39587507  0.44770170  0.38020027
 [7] -0.74019496  1.95491316 -0.08183958  0.56129282  0.46972750  1.56562440
[13]  0.99074123  1.21726897  0.44021605 -0.32548567  0.72102660 -0.05190467
[19] -1.06848176  2.81436885 -0.41688685  0.11889744  0.12718310  1.11600044
[25]  0.50466049 -0.20242151  0.59030545 -0.04378365 -0.15829309  1.16186387
[31] -1.30222524 -0.48758736  0.39295936  1.20400274  1.26601323  2.81469820
[37] -0.93885128 -0.13835554  1.18091265 -0.37420928  0.43407275 -1.88669863
[43] -0.92796525  0.64812581 -0.22173266  0.35086042 -1.34200196  0.90665616
[49]  1.97617586 -0.33076006
```
]

---
count: false

```r
rnorm(50) %>%
* sd()
```
]
 
.panel2-rnorm-auto[

```
function (x, na.rm = FALSE) 
sqrt(var(if (is.vector(x) || is.factor(x)) x else as.double(x), 
    na.rm = na.rm))
<bytecode: 0x7fc9873c7520>
<environment: namespace:stats>
```
]
 
.panel3-rnorm-auto[

```
[1] 1.027467
```
]

---
count: false

```r
rnorm(50) %>%
  sd() %>%
* length()
```
]
 
.panel2-rnorm-auto[

```
function (x)  .Primitive("length")
```
]
 
.panel3-rnorm-auto[

```
[1] 1
```
]

---
class: middle, inverse, center

# `title = "## My title"`

You may give your flipbook slides a consistent title if you like that will show throughout the code evolution.

---

# `widths = c(32, 32, 33)`

Depending on how many display panels you have, you can also adjust relative widths with a vector.

---

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

---
count: false
 
## Using a title and custom widths
.panel1-cars3-auto[

```r
cars %>%
* ggplot()
```
]
 
.panel2-cars3-auto[
<img src="skeleton_files/figure-html/cars3_auto_02_output-1.png" width="432" />
]

---
count: false
 
## Using a title and custom widths
.panel1-cars3-auto[

```r
cars %>%
  ggplot() +
* aes(x = speed)
```
]
 
.panel2-cars3-auto[
<img src="skeleton_files/figure-html/cars3_auto_03_output-1.png" width="432" />
]

---
count: false
 
## Using a title and custom widths
.panel1-cars3-auto[

```r
cars %>%
  ggplot() +
  aes(x = speed) +
* aes(y = dist)
```
]
 
.panel2-cars3-auto[
<img src="skeleton_files/figure-html/cars3_auto_04_output-1.png" width="432" />
]

---
count: false
 
## Using a title and custom widths
.panel1-cars3-auto[

```r
cars %>%
  ggplot() +
  aes(x = speed) +
  aes(y = dist) +
* geom_point()
```
]
 
.panel2-cars3-auto[
<img src="skeleton_files/figure-html/cars3_auto_05_output-1.png" width="432" />
]

---
count: false
 
## Using a title and custom widths
.panel1-cars3-auto[

```r
cars %>%
  ggplot() +
  aes(x = speed) +
  aes(y = dist) +
  geom_point() +
* aes(size = speed)
```
]
 
.panel2-cars3-auto[
<img src="skeleton_files/figure-html/cars3_auto_06_output-1.png" width="432" />
]

---

# Assignment

If you want to create an object in your flipbooks, it is most "natural" to use [right assignment](https://stat.ethz.ch/R-manual/R-devel/library/base/html/assignOps.html).  Working sequentially with a pipeline of code, you get feedback all along the way until you get to the point of assigning all of what you have done to a new object with right assignment.  Creating objects in one "source" code chunk, means that you can break up a pipeline of tasks into multiple code chunks.  Let's see this in action.

---

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

---
count: false

```r
cars %>%
* ggplot()
```
]
 
.panel2-plot_object-auto[
<img src="skeleton_files/figure-html/plot_object_auto_02_output-1.png" width="432" />
]

---
count: false

```r
cars %>%
  ggplot() +
* aes(x = speed)
```
]
 
.panel2-plot_object-auto[
<img src="skeleton_files/figure-html/plot_object_auto_03_output-1.png" width="432" />
]

---
count: false

```r
cars %>%
  ggplot() +
  aes(x = speed) +
* aes(y = dist)
```
]
 
.panel2-plot_object-auto[
<img src="skeleton_files/figure-html/plot_object_auto_04_output-1.png" width="432" />
]

---
count: false

```r
cars %>%
  ggplot() +
  aes(x = speed) +
  aes(y = dist) +
* geom_point()
```
]
 
.panel2-plot_object-auto[
<img src="skeleton_files/figure-html/plot_object_auto_05_output-1.png" width="432" />
]

---
count: false

```r
cars %>%
  ggplot() +
  aes(x = speed) +
  aes(y = dist) +
  geom_point() ->
*cars_plot
```
]
 
.panel2-plot_object-auto[

]

---

```r
*cars_plot
```
]
 
.panel2-further_building-auto[
<img src="skeleton_files/figure-html/further_building_auto_01_output-1.png" width="432" />
]

---
count: false

```r
cars_plot +
* labs(x = "Speed (mph)")
```
]
 
.panel2-further_building-auto[
<img src="skeleton_files/figure-html/further_building_auto_02_output-1.png" width="432" />
]

---
count: false

```r
cars_plot +
  labs(x = "Speed (mph)") +
* labs(y = "Stopping distance (ft)")
```
]
 
.panel2-further_building-auto[
<img src="skeleton_files/figure-html/further_building_auto_03_output-1.png" width="432" />
]

---

# `left_assign = TRUE`

With left assignment in R, you don't get any feedback, so flipbooking prefers this step at the end of a pipeline, so we can enjoy all the nice feedback. So the parameter left_assign is by default set to FALSE.

But, setting the left_assign parameter to T and using left assignment, you can still create a meaningful flipbook that gives you feedback.   When left_assign = TRUE, the first object that is created prints at the end of the derivative code chunks.

---

```r
*my_plot <- cars   # the data

my_plot
```
]
 
.panel2-left_assign-auto[

---
count: false

```r
my_plot <- cars %>%  # the data
* filter(speed > 4)   # subset

my_plot
```
]
 
.panel2-left_assign-auto[

---
count: false

```r
my_plot <- cars %>%  # the data
  filter(speed > 4) %>%  # subset
* ggplot()   # pipe to ggplot

my_plot
```
]
 
.panel2-left_assign-auto[
<img src="skeleton_files/figure-html/left_assign_auto_03_output-1.png" width="432" />
]

---
count: false

```r
my_plot <- cars %>%  # the data
  filter(speed > 4) %>%  # subset
  ggplot() +  # pipe to ggplot
* aes(x = speed)

my_plot
```
]
 
.panel2-left_assign-auto[
<img src="skeleton_files/figure-html/left_assign_auto_04_output-1.png" width="432" />
]

---
count: false

```r
my_plot <- cars %>%  # the data
  filter(speed > 4) %>%  # subset
  ggplot() +  # pipe to ggplot
  aes(x = speed) +
* aes(y = dist)

my_plot
```
]
 
.panel2-left_assign-auto[
<img src="skeleton_files/figure-html/left_assign_auto_05_output-1.png" width="432" />
]

---
count: false

```r
my_plot <- cars %>%  # the data
  filter(speed > 4) %>%  # subset
  ggplot() +  # pipe to ggplot
  aes(x = speed) +
  aes(y = dist) +
* geom_point()

my_plot
```
]
 
.panel2-left_assign-auto[
<img src="skeleton_files/figure-html/left_assign_auto_06_output-1.png" width="432" />
]

---

# Manageing source code chunks

So, it is pretty cool that we can create a bunch of derivative code chunks from one input code chunk (a foundational blog post by Emi Tanaka on this [here](https://emitanaka.rbind.io/post/knitr-knitr-code/)).

But there are some considerations then for this source chunk.  What should its chunk options be?  The easy way is to set all "source" code chunks to include = F, as I do throughout the book.  However, you might consider a combination of `eval` and `echo` instead; you can come back to this idea as you become a more seasoned flipbooker.

---

# Beyond the tidyverse

It is no surprise that Flipbooks are born in the context of the popularity of the tidyverse tools --- tools that are designed be be used in sequential pipelines and that give a satisfying amount of feedback along the way!

But base R techniques and other popular tools can certainly also be employed.

---

# "chaining" by overwriting objects

---

```r
*cars_mod <- cars

cars_mod
```
]
 
.panel2-left_assign2-auto[

---
count: false

```r
cars_mod <- cars
*cars_mod$half_dist <- cars$dist / 2

cars_mod
```
]
 
.panel2-left_assign2-auto[

```
   speed dist half_dist
1      4    2       1.0
2      4   10       5.0
3      7    4       2.0
4      7   22      11.0
5      8   16       8.0
6      9   10       5.0
7     10   18       9.0
8     10   26      13.0
9     10   34      17.0
10    11   17       8.5
11    11   28      14.0
12    12   14       7.0
13    12   20      10.0
14    12   24      12.0
15    12   28      14.0
16    13   26      13.0
17    13   34      17.0
18    13   34      17.0
19    13   46      23.0
20    14   26      13.0
21    14   36      18.0
22    14   60      30.0
23    14   80      40.0
24    15   20      10.0
25    15   26      13.0
26    15   54      27.0
27    16   32      16.0
28    16   40      20.0
29    17   32      16.0
30    17   40      20.0
31    17   50      25.0
32    18   42      21.0
33    18   56      28.0
34    18   76      38.0
35    18   84      42.0
36    19   36      18.0
37    19   46      23.0
38    19   68      34.0
39    20   32      16.0
40    20   48      24.0
41    20   52      26.0
42    20   56      28.0
43    20   64      32.0
44    22   66      33.0
45    23   54      27.0
46    24   70      35.0
47    24   92      46.0
48    24   93      46.5
49    24  120      60.0
50    25   85      42.5
```
]

---
count: false

```r
cars_mod <- cars
cars_mod$half_dist <- cars$dist / 2
*names(cars_mod)[2] <- "distance"

cars_mod
```
]
 
.panel2-left_assign2-auto[

```
   speed distance half_dist
1      4        2       1.0
2      4       10       5.0
3      7        4       2.0
4      7       22      11.0
5      8       16       8.0
6      9       10       5.0
7     10       18       9.0
8     10       26      13.0
9     10       34      17.0
10    11       17       8.5
11    11       28      14.0
12    12       14       7.0
13    12       20      10.0
14    12       24      12.0
15    12       28      14.0
16    13       26      13.0
17    13       34      17.0
18    13       34      17.0
19    13       46      23.0
20    14       26      13.0
21    14       36      18.0
22    14       60      30.0
23    14       80      40.0
24    15       20      10.0
25    15       26      13.0
26    15       54      27.0
27    16       32      16.0
28    16       40      20.0
29    17       32      16.0
30    17       40      20.0
31    17       50      25.0
32    18       42      21.0
33    18       56      28.0
34    18       76      38.0
35    18       84      42.0
36    19       36      18.0
37    19       46      23.0
38    19       68      34.0
39    20       32      16.0
40    20       48      24.0
41    20       52      26.0
42    20       56      28.0
43    20       64      32.0
44    22       66      33.0
45    23       54      27.0
46    24       70      35.0
47    24       92      46.0
48    24       93      46.5
49    24      120      60.0
50    25       85      42.5
```
]

---
count: false

```r
cars_mod <- cars
cars_mod$half_dist <- cars$dist / 2
names(cars_mod)[2] <- "distance"
*cars_mod <- cars_mod[cars_mod$distance > 10,]

cars_mod
```
]
 
.panel2-left_assign2-auto[

```
   speed distance half_dist
4      7       22      11.0
5      8       16       8.0
7     10       18       9.0
8     10       26      13.0
9     10       34      17.0
10    11       17       8.5
11    11       28      14.0
12    12       14       7.0
13    12       20      10.0
14    12       24      12.0
15    12       28      14.0
16    13       26      13.0
17    13       34      17.0
18    13       34      17.0
19    13       46      23.0
20    14       26      13.0
21    14       36      18.0
22    14       60      30.0
23    14       80      40.0
24    15       20      10.0
25    15       26      13.0
26    15       54      27.0
27    16       32      16.0
28    16       40      20.0
29    17       32      16.0
30    17       40      20.0
31    17       50      25.0
32    18       42      21.0
33    18       56      28.0
34    18       76      38.0
35    18       84      42.0
36    19       36      18.0
37    19       46      23.0
38    19       68      34.0
39    20       32      16.0
40    20       48      24.0
41    20       52      26.0
42    20       56      28.0
43    20       64      32.0
44    22       66      33.0
45    23       54      27.0
46    24       70      35.0
47    24       92      46.0
48    24       93      46.5
49    24      120      60.0
50    25       85      42.5
```
]

---
count: false

```r
cars_mod <- cars
cars_mod$half_dist <- cars$dist / 2
names(cars_mod)[2] <- "distance"
cars_mod <- cars_mod[cars_mod$distance > 10,]
*cars_mod <- cars_mod["distance"]

cars_mod
```
]
 
.panel2-left_assign2-auto[

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

---

## using the .[] and .[[]] syntax with the migrittr pipe - %>%

Flipbooking can also be applied to logical indexing workflows if the steps are broken up using the %>% followed by .[] and .[[]].

---

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

---
count: false

```r
cars %>%
* .[cars$speed > median(cars$speed),]
```
]
 
.panel2-dot_notation-auto[

```
   speed dist
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
```
]

---
count: false

```r
cars %>%
  .[cars$speed > median(cars$speed),] %>%
* .["speed"]
```
]
 
.panel2-dot_notation-auto[

```
   speed
27    16
28    16
29    17
30    17
31    17
32    18
33    18
34    18
35    18
36    19
37    19
38    19
39    20
40    20
41    20
42    20
43    20
44    22
45    23
46    24
47    24
48    24
49    24
50    25
```
]

---
count: false

```r
cars %>%
  .[cars$speed > median(cars$speed),] %>%
  .["speed"] %>%
* .[,1]
```
]
 
.panel2-dot_notation-auto[

```
 [1] 16 16 17 17 17 18 18 18 18 19 19 19 20 20 20 20 20 22 23 24 24 24 24 25
```
]

---
count: false

```r
cars %>%
  .[cars$speed > median(cars$speed),] %>%
  .["speed"] %>%
  .[,1] ->
*top_speeds
```
]
 
.panel2-dot_notation-auto[

]

---

# Base R plotting

Let's see how flipbookr might be used with base R graphics.

---

```r
*plot(cars, xlab = "Speed (mph)",
*    ylab = "Stopping distance (ft)",
*    las = 1)
```
]
 
.panel2-base_r_plotting-auto[
<img src="skeleton_files/figure-html/base_r_plotting_auto_01_output-1.png" width="432" />
]

---
count: false

```r
plot(cars, xlab = "Speed (mph)",
     ylab = "Stopping distance (ft)",
     las = 1)
*lines(lowess(cars$speed, cars$dist,
*            f = 2/3, iter = 3),
*     col = "red")
```
]
 
.panel2-base_r_plotting-auto[
<img src="skeleton_files/figure-html/base_r_plotting_auto_02_output-1.png" width="432" />
]

---
count: false

```r
plot(cars, xlab = "Speed (mph)",
     ylab = "Stopping distance (ft)",
     las = 1)
lines(lowess(cars$speed, cars$dist,
             f = 2/3, iter = 3),
      col = "red")
*title(main = "the `cars` data")
```
]
 
.panel2-base_r_plotting-auto[
<img src="skeleton_files/figure-html/base_r_plotting_auto_03_output-1.png" width="432" />
]

---
count: false

```r
plot(cars, xlab = "Speed (mph)",
     ylab = "Stopping distance (ft)",
     las = 1)
lines(lowess(cars$speed, cars$dist,
             f = 2/3, iter = 3),
      col = "red")
title(main = "the `cars` data")
*title(sub = "Data is from Ezekiel's (1930) 'Methods of Correlation Analysis'.")
```
]
 
.panel2-base_r_plotting-auto[
<img src="skeleton_files/figure-html/base_r_plotting_auto_04_output-1.png" width="432" />
]

---

```r
## An example of polynomial regression
*plot(cars, xlab = "Speed (mph)",
*    ylab = "Stopping distance (ft)",
*   las = 1, xlim = c(0, 25))
```
]
 
.panel2-cars_anova-auto[
<img src="skeleton_files/figure-html/cars_anova_auto_01_output-1.png" width="432" />
]

---
count: false

```r
## An example of polynomial regression
plot(cars, xlab = "Speed (mph)",
     ylab = "Stopping distance (ft)",
    las = 1, xlim = c(0, 25))

*lm(dist ~ poly(speed, 3),
*  data = cars)
```
]
 
.panel2-cars_anova-auto[
<img src="skeleton_files/figure-html/cars_anova_auto_02_output-1.png" width="432" />

```

Call:
lm(formula = dist ~ poly(speed, 3), data = cars)

Coefficients:
    (Intercept)  poly(speed, 3)1  poly(speed, 3)2  poly(speed, 3)3  
          42.98           145.55            23.00            13.80  
```
]

---
count: false

```r
## An example of polynomial regression
plot(cars, xlab = "Speed (mph)",
     ylab = "Stopping distance (ft)",
    las = 1, xlim = c(0, 25))

lm(dist ~ poly(speed, 3),
   data = cars) ->
*model
```
]
 
.panel2-cars_anova-auto[
<img src="skeleton_files/figure-html/cars_anova_auto_03_output-1.png" width="432" />
]

---
count: false

```r
## An example of polynomial regression
plot(cars, xlab = "Speed (mph)",
     ylab = "Stopping distance (ft)",
    las = 1, xlim = c(0, 25))

lm(dist ~ poly(speed, 3),
   data = cars) ->
model

*seq(0, 25, length.out = 25)
```
]
 
.panel2-cars_anova-auto[
<img src="skeleton_files/figure-html/cars_anova_auto_04_output-1.png" width="432" />

```
 [1]  0.000000  1.041667  2.083333  3.125000  4.166667  5.208333  6.250000
 [8]  7.291667  8.333333  9.375000 10.416667 11.458333 12.500000 13.541667
[15] 14.583333 15.625000 16.666667 17.708333 18.750000 19.791667 20.833333
[22] 21.875000 22.916667 23.958333 25.000000
```
]

---
count: false

```r
## An example of polynomial regression
plot(cars, xlab = "Speed (mph)",
     ylab = "Stopping distance (ft)",
    las = 1, xlim = c(0, 25))

lm(dist ~ poly(speed, 3),
   data = cars) ->
model

seq(0, 25, length.out = 25) ->
*inputs_of_x
```
]
 
.panel2-cars_anova-auto[
<img src="skeleton_files/figure-html/cars_anova_auto_05_output-1.png" width="432" />
]

---
count: false

```r
## An example of polynomial regression
plot(cars, xlab = "Speed (mph)",
     ylab = "Stopping distance (ft)",
    las = 1, xlim = c(0, 25))

lm(dist ~ poly(speed, 3),
   data = cars) ->
model

seq(0, 25, length.out = 25) ->
inputs_of_x

*predict(model,
*       data.frame(speed = inputs_of_x))
```
]
 
.panel2-cars_anova-auto[
<img src="skeleton_files/figure-html/cars_anova_auto_06_output-1.png" width="432" />

```
         1          2          3          4          5          6          7 
-19.505049 -12.788379  -6.760989  -1.353352   3.504057   7.880764  11.846296 
         8          9         10         11         12         13         14 
 15.470179  18.821939  21.971103  24.987195  27.939743  30.898273  33.932311 
        15         16         17         18         19         20         21 
 37.111382  40.505014  44.182731  48.214061  52.668530  57.615663  63.124987 
        22         23         24         25 
 69.266028  76.108312  83.721366  92.174715 
```
]

---
count: false

```r
## An example of polynomial regression
plot(cars, xlab = "Speed (mph)",
     ylab = "Stopping distance (ft)",
    las = 1, xlim = c(0, 25))

lm(dist ~ poly(speed, 3),
   data = cars) ->
model

seq(0, 25, length.out = 25) ->
inputs_of_x

predict(model,
        data.frame(speed = inputs_of_x)) ->
*prediction_y
```
]
 
.panel2-cars_anova-auto[
<img src="skeleton_files/figure-html/cars_anova_auto_07_output-1.png" width="432" />
]

---
count: false

```r
## An example of polynomial regression
plot(cars, xlab = "Speed (mph)",
     ylab = "Stopping distance (ft)",
    las = 1, xlim = c(0, 25))

lm(dist ~ poly(speed, 3),
   data = cars) ->
model

seq(0, 25, length.out = 25) ->
inputs_of_x

predict(model,
        data.frame(speed = inputs_of_x)) ->
prediction_y

*lines(inputs_of_x,
*     prediction_y,
*     col = "blue")
```
]
 
.panel2-cars_anova-auto[
<img src="skeleton_files/figure-html/cars_anova_auto_08_output-1.png" width="432" />
]

---

# And arithmetic operations

We can do some numeric calculations too.  But this should be done with care.  *The order of operations hold -- PEMDAS -- which is not the logic of the magrittr pipelines (sequential ordering).*

---

```r
*(4 + 5)   # just be careful
```
]
 
.panel2-arith-auto[

```
[1] 9
```
]

---
count: false

```r
(4 + 5) /  # just be careful
* 6   # because order of operations
```
]
 
.panel2-arith-auto[

```
[1] 1.5
```
]

---
count: false

```r
(4 + 5) /  # just be careful
  6 *  # because order of operations
* 7   # hold
```
]
 
.panel2-arith-auto[

```
[1] 10.5
```
]

---
count: false

```r
(4 + 5) /  # just be careful
  6 *  # because order of operations
  7 -  # hold
* 3   # contrasting to pipe logic
```
]
 
.panel2-arith-auto[

```
[1] 7.5
```
]

---
count: false

```r
(4 + 5) /  # just be careful
  6 *  # because order of operations
  7 -  # hold
  3 *  # contrasting to pipe logic
* 12  # PEMDAS
```
]
 
.panel2-arith-auto[

```
[1] -25.5
```
]

---
count: false

```r
(4 + 5) /  # just be careful
  6 *  # because order of operations
  7 -  # hold
  3 *  # contrasting to pipe logic
  12  # PEMDAS

*1:10
```
]
 
.panel2-arith-auto[

```
[1] -25.5
```

```
 [1]  1  2  3  4  5  6  7  8  9 10
```
]

---
count: false

```r
(4 + 5) /  # just be careful
  6 *  # because order of operations
  7 -  # hold
  3 *  # contrasting to pipe logic
  12  # PEMDAS

1:10 %%
* 3
```
]
 
.panel2-arith-auto[

```
[1] -25.5
```

```
 [1] 1 2 0 1 2 0 1 2 0 1
```
]

---
count: false

```r
(4 + 5) /  # just be careful
  6 *  # because order of operations
  7 -  # hold
  3 *  # contrasting to pipe logic
  12  # PEMDAS

1:10 %%
  3

*1:10
```
]
 
.panel2-arith-auto[

```
[1] -25.5
```

```
 [1] 1 2 0 1 2 0 1 2 0 1
```

```
 [1]  1  2  3  4  5  6  7  8  9 10
```
]

---
count: false

```r
(4 + 5) /  # just be careful
  6 *  # because order of operations
  7 -  # hold
  3 *  # contrasting to pipe logic
  12  # PEMDAS

1:10 %%
  3

1:10 %/%
* 3
```
]
 
.panel2-arith-auto[

```
[1] -25.5
```

```
 [1] 1 2 0 1 2 0 1 2 0 1
```

```
 [1] 0 0 1 1 1 2 2 2 3 3
```
]

---
count: false

```r
(4 + 5) /  # just be careful
  6 *  # because order of operations
  7 -  # hold
  3 *  # contrasting to pipe logic
  12  # PEMDAS

1:10 %%
  3

1:10 %/%
  3

*33
```
]
 
.panel2-arith-auto[

```
[1] -25.5
```

```
 [1] 1 2 0 1 2 0 1 2 0 1
```

```
 [1] 0 0 1 1 1 2 2 2 3 3
```

```
[1] 33
```
]

---
count: false

```r
(4 + 5) /  # just be careful
  6 *  # because order of operations
  7 -  # hold
  3 *  # contrasting to pipe logic
  12  # PEMDAS

1:10 %%
  3

1:10 %/%
  3

33 %%
* 15
```
]
 
.panel2-arith-auto[

```
[1] -25.5
```

```
 [1] 1 2 0 1 2 0 1 2 0 1
```

```
 [1] 0 0 1 1 1 2 2 2 3 3
```

```
[1] 3
```
]

---
count: false

```r
(4 + 5) /  # just be careful
  6 *  # because order of operations
  7 -  # hold
  3 *  # contrasting to pipe logic
  12  # PEMDAS

1:10 %%
  3

1:10 %/%
  3

33 %%
  15

*4 
```
]
 
.panel2-arith-auto[

```
[1] -25.5
```

```
 [1] 1 2 0 1 2 0 1 2 0 1
```

```
 [1] 0 0 1 1 1 2 2 2 3 3
```

```
[1] 3
```

```
[1] 4
```
]

---
count: false

```r
(4 + 5) /  # just be careful
  6 *  # because order of operations
  7 -  # hold
  3 *  # contrasting to pipe logic
  12  # PEMDAS

1:10 %%
  3

1:10 %/%
  3

33 %%
  15

4 %/%
* 2
```
]
 
.panel2-arith-auto[

```
[1] -25.5
```

```
 [1] 1 2 0 1 2 0 1 2 0 1
```

```
 [1] 0 0 1 1 1 2 2 2 3 3
```

```
[1] 3
```

```
[1] 2
```
]

---
count: false

```r
(4 + 5) /  # just be careful
  6 *  # because order of operations
  7 -  # hold
  3 *  # contrasting to pipe logic
  12  # PEMDAS

1:10 %%
  3

1:10 %/%
  3

33 %%
  15

4 %/%
  2

*4 
```
]
 
.panel2-arith-auto[

```
[1] -25.5
```

```
 [1] 1 2 0 1 2 0 1 2 0 1
```

```
 [1] 0 0 1 1 1 2 2 2 3 3
```

```
[1] 3
```

```
[1] 2
```

```
[1] 4
```
]

---
count: false

```r
(4 + 5) /  # just be careful
  6 *  # because order of operations
  7 -  # hold
  3 *  # contrasting to pipe logic
  12  # PEMDAS

1:10 %%
  3

1:10 %/%
  3

33 %%
  15

4 %/%
  2

4 ^
* 5
```
]
 
.panel2-arith-auto[

```
[1] -25.5
```

```
 [1] 1 2 0 1 2 0 1 2 0 1
```

```
 [1] 0 0 1 1 1 2 2 2 3 3
```

```
[1] 3
```

```
[1] 2
```

```
[1] 1024
```
]

---
count: false

```r
(4 + 5) /  # just be careful
  6 *  # because order of operations
  7 -  # hold
  3 *  # contrasting to pipe logic
  12  # PEMDAS

1:10 %%
  3

1:10 %/%
  3

33 %%
  15

4 %/%
  2

4 ^
  5

*matrix(1:4, ncol = 1)
```
]
 
.panel2-arith-auto[

```
[1] -25.5
```

```
 [1] 1 2 0 1 2 0 1 2 0 1
```

```
 [1] 0 0 1 1 1 2 2 2 3 3
```

```
[1] 3
```

```
[1] 2
```

```
[1] 1024
```

```
     [,1]
[1,]    1
[2,]    2
[3,]    3
[4,]    4
```
]

---
count: false

```r
(4 + 5) /  # just be careful
  6 *  # because order of operations
  7 -  # hold
  3 *  # contrasting to pipe logic
  12  # PEMDAS

1:10 %%
  3

1:10 %/%
  3

33 %%
  15

4 %/%
  2

4 ^
  5

matrix(1:4, ncol = 1) %*%
* matrix(1:4, nrow = 1)
```
]
 
.panel2-arith-auto[

```
[1] -25.5
```

```
 [1] 1 2 0 1 2 0 1 2 0 1
```

```
 [1] 0 0 1 1 1 2 2 2 3 3
```

```
[1] 3
```

```
[1] 2
```

```
[1] 1024
```

```
     [,1] [,2] [,3] [,4]
[1,]    1    2    3    4
[2,]    2    4    6    8
[3,]    3    6    9   12
[4,]    4    8   12   16
```
]

---
count: false

```r
(4 + 5) /  # just be careful
  6 *  # because order of operations
  7 -  # hold
  3 *  # contrasting to pipe logic
  12  # PEMDAS

1:10 %%
  3

1:10 %/%
  3

33 %%
  15

4 %/%
  2

4 ^
  5

matrix(1:4, ncol = 1) %*%
  matrix(1:4, nrow = 1)

*matrix(1:4, ncol = 4)
```
]
 
.panel2-arith-auto[

```
[1] -25.5
```

```
 [1] 1 2 0 1 2 0 1 2 0 1
```

```
 [1] 0 0 1 1 1 2 2 2 3 3
```

```
[1] 3
```

```
[1] 2
```

```
[1] 1024
```

```
     [,1] [,2] [,3] [,4]
[1,]    1    2    3    4
[2,]    2    4    6    8
[3,]    3    6    9   12
[4,]    4    8   12   16
```

```
     [,1] [,2] [,3] [,4]
[1,]    1    2    3    4
```
]

---
count: false

```r
(4 + 5) /  # just be careful
  6 *  # because order of operations
  7 -  # hold
  3 *  # contrasting to pipe logic
  12  # PEMDAS

1:10 %%
  3

1:10 %/%
  3

33 %%
  15

4 %/%
  2

4 ^
  5

matrix(1:4, ncol = 1) %*%
  matrix(1:4, nrow = 1)

matrix(1:4, ncol = 4) %*%
* matrix(1:4, nrow = 4)
```
]
 
.panel2-arith-auto[

```
[1] -25.5
```

```
 [1] 1 2 0 1 2 0 1 2 0 1
```

```
 [1] 0 0 1 1 1 2 2 2 3 3
```

```
[1] 3
```

```
[1] 2
```

```
[1] 1024
```

```
     [,1] [,2] [,3] [,4]
[1,]    1    2    3    4
[2,]    2    4    6    8
[3,]    3    6    9   12
[4,]    4    8   12   16
```

```
     [,1]
[1,]   30
```
]

---

A new addition is the %$% pipe from the magrittr library.  And example follows.

---

```r
*library(magrittr)
```
]
 
.panel2-new_pipe-auto[

]

---
count: false

```r
library(magrittr)

*cars
```
]
 
.panel2-new_pipe-auto[

---
count: false

```r
library(magrittr)

cars %$%
* cor(x = speed,
*     y = dist)
```
]
 
.panel2-new_pipe-auto[

```
[1] 0.8068949
```
]

---
class: middle, inverse, center

# `text_reveal`

Instead of `chunk_reveal()` you may use `text_reveal(text = ?)` to deliver a slow deliberate message.

The input is a character string, and delimiter can be defined using the `sep` argument.

---

---
class: inverse, middle, center
# This
---
class: inverse, middle, center
# is
---
class: inverse, middle, center
# my
---
class: inverse, middle, center
# text.

---

---
class: inverse, middle, center
# Sometimes, it's helpful to slow down and look at exactly one decision.
---
class: inverse, middle, center
#  Flipbooks present code step-by-step and side-by-side with output.
---
class: inverse, middle, center
#  They parse code pipelines.
---
class: inverse, middle, center
#  And reconstruct code into partial builds.
---
class: inverse, middle, center
#  Then present those builds with their output.
---
class: inverse, middle, center
#  Both code and output are superimposed on the previous state. 
---
class: inverse, middle, center
#  This makes seeing what changed --- both in code and output --- easy.

---

---

## Xaringan slide show look and feel

To quickly change the look and feel of your {xaringan} slide show, you might check out the [available themes](https://github.com/yihui/xaringan/wiki/Themes#avaliable-themes) from the xaringan package and [xaringanthemer](https://github.com/gadenbuie/xaringanthemer) package.

Another extremely useful resource for xaringan styling is Alison Hill's ["Meet xaringan: Making slides in R Markdown"](https://arm.rbind.io/slides/xaringan.html).

---

# Sharing your flipbooks

Flipbooks created with Xaringan are multi-file creations.  The figures produced are stored separately from the main html document.  This presents a little bit of a challenge for sharing your work.  You can zip up all the associated files and share that way.  Alternatively, you can share as a website.  I've shared my work on github with github pages.

- flip, zip, and ship
- get it on github, with github pages.  A good walk through is the one that I learned with (to get [the ggplot2 flipbook](https://evamaerey.github.io/ggplot_flipbook/ggplot_flipbook_xaringan.html) online) is by Brian Caffo https://www.youtube.com/watch?v=BBCesiebEuQ  Larger flipbooks will take longer to load in the browser - something to keep in mind as you are building. 
- print to pdf using pagedown::chrome_print()

---

## Convert to pdf

to create a pdf from you may use the pagedown package as follows to use chrome print to pdf (here, eval is set to FALSE):

```r
pagedown::chrome_print(input = "my_flipbook.Rmd")

# or (recommended):

pagedown::chrome_print(input = "my_flipbook.html")
```

Note:  This works for flipbooks when css is set as it is in the last css code chunk (the media print part) else only the last frame from the flipbooked chunks will display in the pdf.  Thanks to Bryan Shalloway for thinking about conversion to pdf, [the exposition of this last frame problem, and proposing a solution](https://github.com/EvaMaeRey/flipbookr/issues/21) and also to Antoine Bichat! Be sure to preview your work before you present --- translation might not be 100% visual match!

---

## flipbook preview -- as gif

If you want to create a preview of your flipbook, you can pass the pdf to functions from magick (here, eval is set to FALSE):

```r
# then create gif as follows
magick::image_read_pdf(path = "my_flipbook.pdf", density = 100) %>% # create images
  magick::image_write_gif(path = "my_flipbook.gif", delay = .4) # images to gif
```

Bryan Shalloway proposed this workflow.  Thanks Bryan!

Coming soon, build a previews, using [viztoc](https://github.com/EvaMaeRey/viztoc). Development package!  Breaking changes are the norm!

---
class: middle, center

The flipbooked portion of this presentation was created with the new {flipbookr} package.  Get it with remotes::install_github("EvaMaeRey/flipbookr")

---

```r
*for (i in 1:1){
     
    print(i)
     
}
```
]
 
.panel2-for_loop-inject_vector[

```
[1] 1
```
]

---
count: false

```r
*for (i in 1:2){
     
    print(i)
     
}
```
]
 
.panel2-for_loop-inject_vector[

```
[1] 1
[1] 2
```
]

---
count: false

```r
*for (i in 1:3){
     
    print(i)
     
}
```
]
 
.panel2-for_loop-inject_vector[

```
[1] 1
[1] 2
[1] 3
```
]

---

# The End!

@media print {
  .has-continuation {
    display: block;
  }
}
</style>