flipbookr empathy

---
class: inverse

####From source .Rmd:

---

```default
title: "flipbookr empathy"
author: "Dr. Evangeline Reynolds"
output:
  xaringan::moon_reader:
    lib_dir: libs
    css: [default, hygge, ninjutsu]
    seal: false
    nature:
      ratio: 16:9
      highlightStyle: github
      highlightLines: true
      countIncrementalSlides: false
      seal: false
      beforeInit: "https://platform.twitter.com/widgets.js"
```

---
class: inverse

####From source .Rmd:

---

````default

class: inverse, bottom
background-image: url(https://images.unsplash.com/photo-1532012197267-da84d127e765?q=80&w=1587&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D)
background-size: cover

# .Large[flipbooks]
## .small[past, present, future]
## .small[bit.ly/flipbooks-llnl]
#### .tiny[Dr. Evangeline Reynolds | 2023-11-16 | Lawrence Livermore National Lab R Users Meetup , Image credit: Jaredd Craig, Upsplash]

???

```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE, message = F)
options(tidyverse.quiet = TRUE)
library(flipbookr)
```

````
---

???

---
class: inverse

####From source .Rmd:

---

```default
class: center, middle, inverse

# flipbooks: An unfolding tale about empathy...

draft manuscript:  https://github.com/EvaMaeRey/flipbookr/blob/master/docs/draft_jasa_submission.pdf

```
---
class: center, middle, inverse

# flipbooks: An unfolding tale about empathy...

draft manuscript:  https://github.com/EvaMaeRey/flipbookr/blob/master/docs/draft_jasa_submission.pdf

---
class: inverse

####From source .Rmd:

---

```default
class: inverse

# Abstract:  
--
Flipbooks reveal code pipe-lines 
--
line-by-line 
--
and side-by-side with output, 
--
which yields an animated experience.

```
---
class: inverse

# Abstract:  
--
Flipbooks reveal code pipe-lines 
--
line-by-line 
--
and side-by-side with output, 
--
which yields an animated experience.

---
class: inverse

####From source .Rmd:

---

````default

`r chunk_reveal("scatter", title = "## A code 'flipbook'")`

```{r scatter, include = F}
library(ggplot2)
gapminder::gapminder %>% 
  dplyr::filter(year == 2002) %>% 
  ggplot() + 
  aes(y = lifeExp) + 
  aes(x = gdpPercap) + 
  geom_point() + 
  aes(size = pop/1000000000) + 
  aes(color = continent) 
```

````
---

```r
*library(ggplot2)
```
]
 
.panel2-scatter-auto[

]

---
count: false
 
## A code 'flipbook'
.panel1-scatter-auto[

```r
library(ggplot2)
*gapminder::gapminder
```
]
 
.panel2-scatter-auto[

```
## # A tibble: 1,704 × 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.
## # ℹ 1,694 more rows
```
]

---
count: false
 
## A code 'flipbook'
.panel1-scatter-auto[

```r
library(ggplot2)
gapminder::gapminder %>%
* dplyr::filter(year == 2002)
```
]
 
.panel2-scatter-auto[

```
## # A tibble: 142 × 6
##    country     continent  year lifeExp       pop gdpPercap
##    <fct>       <fct>     <int>   <dbl>     <int>     <dbl>
##  1 Afghanistan Asia       2002    42.1  25268405      727.
##  2 Albania     Europe     2002    75.7   3508512     4604.
##  3 Algeria     Africa     2002    71.0  31287142     5288.
##  4 Angola      Africa     2002    41.0  10866106     2773.
##  5 Argentina   Americas   2002    74.3  38331121     8798.
##  6 Australia   Oceania    2002    80.4  19546792    30688.
##  7 Austria     Europe     2002    79.0   8148312    32418.
##  8 Bahrain     Asia       2002    74.8    656397    23404.
##  9 Bangladesh  Asia       2002    62.0 135656790     1136.
## 10 Belgium     Europe     2002    78.3  10311970    30486.
## # ℹ 132 more rows
```
]

---
count: false
 
## A code 'flipbook'
.panel1-scatter-auto[

```r
library(ggplot2)
gapminder::gapminder %>%
  dplyr::filter(year == 2002) %>%
* ggplot()
```
]
 
.panel2-scatter-auto[
![](flipbooks-lawrence-livermore_double_crochet_files/figure-html/scatter_auto_04_output-1.png)
]

---
count: false
 
## A code 'flipbook'
.panel1-scatter-auto[

```r
library(ggplot2)
gapminder::gapminder %>%
  dplyr::filter(year == 2002) %>%
  ggplot() +
* aes(y = lifeExp)
```
]
 
.panel2-scatter-auto[
![](flipbooks-lawrence-livermore_double_crochet_files/figure-html/scatter_auto_05_output-1.png)
]

---
count: false
 
## A code 'flipbook'
.panel1-scatter-auto[

```r
library(ggplot2)
gapminder::gapminder %>%
  dplyr::filter(year == 2002) %>%
  ggplot() +
  aes(y = lifeExp) +
* aes(x = gdpPercap)
```
]
 
.panel2-scatter-auto[
![](flipbooks-lawrence-livermore_double_crochet_files/figure-html/scatter_auto_06_output-1.png)
]

---
count: false
 
## A code 'flipbook'
.panel1-scatter-auto[

```r
library(ggplot2)
gapminder::gapminder %>%
  dplyr::filter(year == 2002) %>%
  ggplot() +
  aes(y = lifeExp) +
  aes(x = gdpPercap) +
* geom_point()
```
]
 
.panel2-scatter-auto[
![](flipbooks-lawrence-livermore_double_crochet_files/figure-html/scatter_auto_07_output-1.png)
]

---
count: false
 
## A code 'flipbook'
.panel1-scatter-auto[

```r
library(ggplot2)
gapminder::gapminder %>%
  dplyr::filter(year == 2002) %>%
  ggplot() +
  aes(y = lifeExp) +
  aes(x = gdpPercap) +
  geom_point() +
* aes(size = pop/1000000000)
```
]
 
.panel2-scatter-auto[
![](flipbooks-lawrence-livermore_double_crochet_files/figure-html/scatter_auto_08_output-1.png)
]

---
count: false
 
## A code 'flipbook'
.panel1-scatter-auto[

```r
library(ggplot2)
gapminder::gapminder %>%
  dplyr::filter(year == 2002) %>%
  ggplot() +
  aes(y = lifeExp) +
  aes(x = gdpPercap) +
  geom_point() +
  aes(size = pop/1000000000) +
* aes(color = continent)
```
]
 
.panel2-scatter-auto[
![](flipbooks-lawrence-livermore_double_crochet_files/figure-html/scatter_auto_09_output-1.png)
]

---
class: inverse

####From source .Rmd:

---

```default

# Talk outline

## Chapter 1: Pairing code and independent plot elements is elegant, and *empathetic* (Lelend Wilkinson, Hadley Wickham)

--
## Chapter 2: step-by-step code-output reveal is gentle and *empathetic* (Garrick Aden-Bui, others)

--
## Backstory Chapter 3.0: Explaining your plot bit by bit makes your presentation stronger, because it is *empathetic* (Matt Blackwell; Hans Rosling)

```
---

# Talk outline

## Chapter 1: Pairing code and independent plot elements is elegant, and *empathetic* (Lelend Wilkinson, Hadley Wickham)

--
## Chapter 2: step-by-step code-output reveal is gentle and *empathetic* (Garrick Aden-Bui, others)

--
## Backstory Chapter 3.0: Explaining your plot bit by bit makes your presentation stronger, because it is *empathetic* (Matt Blackwell; Hans Rosling)

---
class: inverse

####From source .Rmd:

---

```default

## Chapter 3: Sequential reveal allows for automating paired reveal, which is *self-empathetic* (Me; Emi Tanaka; Garrick Aden-Bui)

```
---

## Chapter 3: Sequential reveal allows for automating paired reveal, which is *self-empathetic* (Me; Emi Tanaka; Garrick Aden-Bui)

---
class: inverse

####From source .Rmd:

---

```default

## Chapter 4: {flipbookr} package is born.

```
---

## Chapter 4: {flipbookr} package is born.

---
class: inverse

####From source .Rmd:

---

```default

## Next Chapter: chunk_reveal_live()... Making flipbook making more accessible is *empathetic.*   (via Kelly Bodwin; rstudioapi; Me)

```
---

## Next Chapter: chunk_reveal_live()... Making flipbook making more accessible is *empathetic.*   (via Kelly Bodwin; rstudioapi; Me)

---
class: inverse

####From source .Rmd:

---

```default

## Yet another Chapter:  Flipbookr for quarto: Keeping it up-to-date is empathetic (Kieran Healey; Kelly Bodwin; me?)

```
---

## Yet another Chapter:  Flipbookr for quarto: Keeping it up-to-date is empathetic (Kieran Healey; Kelly Bodwin; me?)

---
class: inverse

####From source .Rmd:

---

```default

# Chapter 1: pairing code with plot element is elegant and empathetic...

```
---

# Chapter 1: pairing code with plot element is elegant and empathetic...

---
class: inverse

####From source .Rmd:

---

```default

## Leland Wilkinson's Grammar of Graphics work kind of discover the 'natural language' of chart definition.

## different gg implementations (Tableau, spss' etc) allow us great ability to express ourselves!

```
---

## Leland Wilkinson's Grammar of Graphics work kind of discover the 'natural language' of chart definition.

## different gg implementations (Tableau, spss' etc) allow us great ability to express ourselves!

---
class: inverse

####From source .Rmd:

---

````default

## Leland Wilkinson identified orthogonal elements in 'The Grammar of Graphics'. Wilkinson on the Policy Viz Podcast [here](https://policyviz.com/podcast/episode-201-leland-wilkinson/).

```{r, echo = F, eval = T, out.width="75%"}
knitr::include_graphics("https://miro.medium.com/max/1400/1*MMZuYgeC_YjXNC1r4D4sog.png")
```

````
---

## Leland Wilkinson identified orthogonal elements in 'The Grammar of Graphics'. Wilkinson on the Policy Viz Podcast [here](https://policyviz.com/podcast/episode-201-leland-wilkinson/).

---
class: inverse

####From source .Rmd:

---

```default

## But unlike natural languages, Japanese, English, Dutch... there wasn't anything freely available!

## Hadley Wickam reading the grammar of graphics: 'This is so beautiful, but there's no software."

```
---

## But unlike natural languages, Japanese, English, Dutch... there wasn't anything freely available!

## Hadley Wickam reading the grammar of graphics: 'This is so beautiful, but there's no software."

---
class: inverse

####From source .Rmd:

---

```default

### Hadley Wickham, ggplot2 author on it's motivation:

> ### And, you know, I'd get a dataset. And, *in my head I could very clearly kind of picture*, I want to put this on the x-axis. Let's put this on the y-axis, draw a line, put some points here, break it up by this variable.

--
> ### And then, like, getting that vision out of my head, and into reality, it's just really, really hard. Just, like, felt harder than it should be. Like, there's a lot of custom programming involved,

```
---

### Hadley Wickham, ggplot2 author on it's motivation:

---
class: inverse

####From source .Rmd:

---

```default

> ### where I just felt, like, to me, I just wanted to say, like, you know, *this is what I'm thinking, this is how I'm picturing this plot. Like you're the computer 'Go and do it'.*

--
> ### ... and I'd also been reading about the Grammar of Graphics by Leland Wilkinson, I got to meet him a couple of times and ... I was, like, this book has been, like, written for me.
https://www.trifacta.com/podcast/tidy-data-with-hadley-wickham/

```
---

> ### where I just felt, like, to me, I just wanted to say, like, you know, *this is what I'm thinking, this is how I'm picturing this plot. Like you're the computer 'Go and do it'.*

---
class: inverse

####From source .Rmd:

---

```default

# ggplot2 let us "... create graphical 'poems'." - Hadley Wickham (2010) in 'A Layered Grammar of Graphics', *Journal of Computational and Graphical Statistics*

```
---

# ggplot2 let us "... create graphical 'poems'." - Hadley Wickham (2010) in 'A Layered Grammar of Graphics', *Journal of Computational and Graphical Statistics*

---
class: inverse

####From source .Rmd:

---

````default

`r chunk_reveal("scatter2", title = "## ggplot2 code is a sussinct graphical narrative, where the orthogonal components may independently declared", display_type = "code")`

```{r, echo = F}
library(tidyverse)
gapminder_2002 <- gapminder::gapminder %>% filter(year == 2002)
```

```{r scatter2, include = F}
library(ggplot2)
ggplot(data = gapminder_2002) + 
  aes(y = lifeExp) + 
  aes(x = gdpPercap) + 
  geom_point() + 
  aes(size = pop/1000000000) + 
  aes(color = continent) 
```

````
---

count: false
## ggplot2 code is a sussinct graphical narrative, where the orthogonal components may independently declared

```r
*library(ggplot2)
```

---
count: false
## ggplot2 code is a sussinct graphical narrative, where the orthogonal components may independently declared

```r
library(ggplot2)
*ggplot(data = gapminder_2002)
```

---
count: false
## ggplot2 code is a sussinct graphical narrative, where the orthogonal components may independently declared

```r
library(ggplot2)
ggplot(data = gapminder_2002) +
* aes(y = lifeExp)
```

---
count: false
## ggplot2 code is a sussinct graphical narrative, where the orthogonal components may independently declared

```r
library(ggplot2)
ggplot(data = gapminder_2002) +
  aes(y = lifeExp) +
* aes(x = gdpPercap)
```

---
count: false
## ggplot2 code is a sussinct graphical narrative, where the orthogonal components may independently declared

```r
library(ggplot2)
ggplot(data = gapminder_2002) +
  aes(y = lifeExp) +
  aes(x = gdpPercap) +
* geom_point()
```

---
count: false
## ggplot2 code is a sussinct graphical narrative, where the orthogonal components may independently declared

```r
library(ggplot2)
ggplot(data = gapminder_2002) +
  aes(y = lifeExp) +
  aes(x = gdpPercap) +
  geom_point() +
* aes(size = pop/1000000000)
```

---
count: false
## ggplot2 code is a sussinct graphical narrative, where the orthogonal components may independently declared

```r
library(ggplot2)
ggplot(data = gapminder_2002) +
  aes(y = lifeExp) +
  aes(x = gdpPercap) +
  geom_point() +
  aes(size = pop/1000000000) +
* aes(color = continent)
```

---
class: inverse

####From source .Rmd:

---

```default

# 'Here's what I have in my head, I'm going to translate that to a grammatical representation.'

```
---

# 'Here's what I have in my head, I'm going to translate that to a grammatical representation.'

---
class: inverse

####From source .Rmd:

---

```default
class: inverse, center, middle

> # "the Grammar of Graphics makes [building plots] easy because you've just got all these, like, little nice *decomposible components*" -- Hadley Wickham

### They actually map pretty well to how you might go about describing the sketch of the data visualization as you sketch it out.

```
---
class: inverse, center, middle

> # "the Grammar of Graphics makes [building plots] easy because you've just got all these, like, little nice *decomposible components*" -- Hadley Wickham

### They actually map pretty well to how you might go about describing the sketch of the data visualization as you sketch it out.

---
class: inverse

####From source .Rmd:

---

```default

# Chapter 2: *showing* pairing by coodinated reveal is gentle and empathetic (Garrick Aden-Bui, others)

```
---

# Chapter 2: *showing* pairing by coodinated reveal is gentle and empathetic (Garrick Aden-Bui, others)

---
class: inverse

####From source .Rmd:

---

```default

<blockquote class="twitter-tweet"><p lang="en" dir="ltr">Really dig how <a href="https://twitter.com/grrrck?ref_src=twsrc%5Etfw">@grrrck</a> builds up <a href="https://twitter.com/hashtag/ggplot2?src=hash&amp;ref_src=twsrc%5Etfw">#ggplot2</a> syntax w/ 📊:<br>📽 &quot;A Gentle Guide to the Grammar of Graphics with ggplot2&quot; <a href="https://t.co/2Okhri7Hox">https://t.co/2Okhri7Hox</a> <a href="https://twitter.com/hashtag/rstats?src=hash&amp;ref_src=twsrc%5Etfw">#rstats</a> <a href="https://twitter.com/hashtag/dataviz?src=hash&amp;ref_src=twsrc%5Etfw">#dataviz</a> <a href="https://t.co/qO43IeTtHG">pic.twitter.com/qO43IeTtHG</a></p>&mdash; Mara Averick (@dataandme) <a href="https://twitter.com/dataandme/status/995650384155693061?ref_src=twsrc%5Etfw">May 13, 2018</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

```
---

---
class: inverse

####From source .Rmd:

---

```default

# True to natural language aquisition... Point to each thing and name it... (like pair programming too.)

https://pkg.garrickadenbuie.com/gentle-ggplot2/#1

## ggplot2 lets you 'speaking your plot into existence'; write 'graphical poems'

## Garrick read the poem out loud (poetry slam!): Bedtime, picture book, where parent is pointing out new vocabulary in the pictures.

```
---

# True to natural language aquisition... Point to each thing and name it... (like pair programming too.)

https://pkg.garrickadenbuie.com/gentle-ggplot2/#1

## ggplot2 lets you 'speaking your plot into existence'; write 'graphical poems'

## Garrick read the poem out loud (poetry slam!): Bedtime, picture book, where parent is pointing out new vocabulary in the pictures.

---
class: inverse

####From source .Rmd:

---

```default

# Back Story for Chapter 3.

### Origins in presentation and *empathy* for your audience in presentation...

<blockquote class="twitter-tweet"><p lang="en" dir="ltr">My best tip on how to give better quantitative presentations is to (a) use more plots and (b) build up your plots on multiple overlays, as in:<br><br>- Just x-axis (explain it)<br>- Add y-axis (explain it)<br>- Add 1 data point (explain it)<br>- Plot the rest of the data (explain it)</p>&mdash; Matt Blackwell (@matt_blackwell) <a href="https://twitter.com/matt_blackwell/status/991004129198854145?ref_src=twsrc%5Etfw">April 30, 2018</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

```
---

# Back Story for Chapter 3.

### Origins in presentation and *empathy* for your audience in presentation...

---
class: inverse

####From source .Rmd:

---

```default

## you are practicing empathy by using data visualization (it's fast); gonna make seeing patterns in your data feel effortless

## Visual information channels are "preattentively processed" -- Cleveland and McGill 1984

## "preattentively processed" == effortlessness

```
---

## you are practicing empathy by using data visualization (it's fast); gonna make seeing patterns in your data feel effortless

## Visual information channels are "preattentively processed" -- Cleveland and McGill 1984

## "preattentively processed" == effortlessness

---
class: inverse

####From source .Rmd:

---

````default

### but you can encode so much in a data viz...

```{r, echo = F, out.width="80%"}
knitr::include_graphics("https://clauswilke.com/dataviz/aesthetic_mapping_files/figure-html/common-aesthetics-1.png")
```

Wilke's Fundamentals of data visualization

--
### ...So you really need to talk about *each* encoding (one by one) or the interpretation is lost.

````
---

### but you can encode so much in a data viz...

Wilke's Fundamentals of data visualization

--
### ...So you really need to talk about *each* encoding (one by one) or the interpretation is lost.

---
class: inverse

####From source .Rmd:

---

```default

# And when people do, this it is really appreciated... Hans Rosling & BBC in 2010

```
---

# And when people do, this it is really appreciated... Hans Rosling & BBC in 2010

---
class: inverse

####From source .Rmd:

---

````default

# 'Here we go. Life expectancy on the y-axis'

```{r, out.width="80%", echo =FALSE}
knitr::include_graphics("images/hans_y_axis.png")

```

````
---

# 'Here we go. Life expectancy on the y-axis'

---
class: inverse

####From source .Rmd:

---

````default

# 'On the x-axis, wealth'

```{r, out.width="80%", echo =FALSE}
knitr::include_graphics("images/hans_x_axis.png")

```

````
---

# 'On the x-axis, wealth'

---
class: inverse

####From source .Rmd:

---

````default

# 'Colors represent the different continents'

```{r, out.width="80%", echo =FALSE}
knitr::include_graphics("images/hans_colors.png")

```

````
---

# 'Colors represent the different continents'

---
class: inverse

####From source .Rmd:

---

````default

# 'Size represents population'

```{r, out.width="80%", echo =FALSE}
knitr::include_graphics("images/hans_size.png")
```

````
---

# 'Size represents population'

---
class: inverse

####From source .Rmd:

---

```default
class: inverse, center, middle

#  Response to empathic presentation?

# 10 million views...

(also does animation at the end... which I don't show)

```
---
class: inverse, center, middle

#  Response to empathic presentation?

# 10 million views...

(also does animation at the end... which I don't show)

---
class: inverse

####From source .Rmd:

---

```default

# Chapter 3. Sequential reveal and automation

## Not me: 'Wow, that is profoundly empathetic'. 🦉🦉🦉

## Me: 'Neat-o! That sounds a lot like the *layered* presentation of graphics.'  🤓🤓🤓

```
---

# Chapter 3. Sequential reveal and automation

## Not me: 'Wow, that is profoundly empathetic'. 🦉🦉🦉

## Me: 'Neat-o! That sounds a lot like the *layered* presentation of graphics.'  🤓🤓🤓

---
class: inverse

####From source .Rmd:

---

```default

<blockquote class="twitter-tweet"><p lang="en" dir="ltr">Good ideas! Very <a href="https://twitter.com/hashtag/ggplot?src=hash&amp;ref_src=twsrc%5Etfw">#ggplot</a>. A layered presentation of graphics. <a href="https://t.co/M4tRB9bGS5">https://t.co/M4tRB9bGS5</a></p>&mdash; Gina Reynolds (@EvaMaeRey) <a href="https://twitter.com/EvaMaeRey/status/991269331257487366?ref_src=twsrc%5Etfw">May 1, 2018</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

```
---

---
class: inverse

####From source .Rmd:

---

```default

<blockquote class="twitter-tweet"><p lang="en" dir="ltr">Here, building up a <a href="https://twitter.com/hashtag/ggplot2?src=hash&amp;ref_src=twsrc%5Etfw">#ggplot2</a> as slowly as possible, <a href="https://twitter.com/hashtag/rstats?src=hash&amp;ref_src=twsrc%5Etfw">#rstats</a>. Incremental adjustments. <a href="https://twitter.com/hashtag/rstatsteachingideas?src=hash&amp;ref_src=twsrc%5Etfw">#rstatsteachingideas</a> <a href="https://t.co/nUulQl8bPh">pic.twitter.com/nUulQl8bPh</a></p>&mdash; Gina Reynolds (@EvaMaeRey) <a href="https://twitter.com/EvaMaeRey/status/1029104656763572226?ref_src=twsrc%5Etfw">August 13, 2018</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

```
---

---
class: inverse

####From source .Rmd:

---

```default

## Emi Tanaka; Semi-automation...

<blockquote class="twitter-tweet"><p lang="en" dir="ltr">Inspired by <a href="https://twitter.com/grrrck?ref_src=twsrc%5Etfw">@grrrck</a> and <a href="https://twitter.com/EvaMaeRey?ref_src=twsrc%5Etfw">@EvaMaeRey</a>, made the kunoichi + ninjutsu (ninja-theme) version of <a href="https://twitter.com/hashtag/ggplot?src=hash&amp;ref_src=twsrc%5Etfw">#ggplot</a> tutorial although Garrick already does explaining this in his excellent blog <a href="https://t.co/msXfg14Ztn">https://t.co/msXfg14Ztn</a>. Gist for ninja-theme here: <a href="https://t.co/soHH4Qvz4F">https://t.co/soHH4Qvz4F</a> <a href="https://twitter.com/hashtag/rstats?src=hash&amp;ref_src=twsrc%5Etfw">#rstats</a> <a href="https://t.co/YlRHAGnaUm">pic.twitter.com/YlRHAGnaUm</a></p>&mdash; Emi Tanaka @emitanaka@fosstodon.org (@statsgen) <a href="https://twitter.com/statsgen/status/1041279648452108289?ref_src=twsrc%5Etfw">September 16, 2018</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

```
---

## Emi Tanaka; Semi-automation...

---
class: inverse

####From source .Rmd:

---

````default

`r chunk_reveal("pairing", break_type = "replace", replace = '20', replacements = 1:9, display_type = "output", title = "### Unpaired pipeline_steps & graphical_elements")`

```{r pairing, include = F}
tibble(function_name = paste0("ggplot2 func '", LETTERS[1:9],"'"),
  gg_element = paste("grammar move #", 1:9))[1:20,]
```

````
---

```
## # A tibble: 1 × 2
##   function_name    gg_element      
##   <chr>            <chr>           
## 1 ggplot2 func 'A' grammar move # 1
```

---
count: false
### Unpaired pipeline_steps & graphical_elements

```
## # A tibble: 2 × 2
##   function_name    gg_element      
##   <chr>            <chr>           
## 1 ggplot2 func 'A' grammar move # 1
## 2 ggplot2 func 'B' grammar move # 2
```

---
count: false
### Unpaired pipeline_steps & graphical_elements

```
## # A tibble: 3 × 2
##   function_name    gg_element      
##   <chr>            <chr>           
## 1 ggplot2 func 'A' grammar move # 1
## 2 ggplot2 func 'B' grammar move # 2
## 3 ggplot2 func 'C' grammar move # 3
```

---
count: false
### Unpaired pipeline_steps & graphical_elements

```
## # A tibble: 4 × 2
##   function_name    gg_element      
##   <chr>            <chr>           
## 1 ggplot2 func 'A' grammar move # 1
## 2 ggplot2 func 'B' grammar move # 2
## 3 ggplot2 func 'C' grammar move # 3
## 4 ggplot2 func 'D' grammar move # 4
```

---
count: false
### Unpaired pipeline_steps & graphical_elements

```
## # A tibble: 5 × 2
##   function_name    gg_element      
##   <chr>            <chr>           
## 1 ggplot2 func 'A' grammar move # 1
## 2 ggplot2 func 'B' grammar move # 2
## 3 ggplot2 func 'C' grammar move # 3
## 4 ggplot2 func 'D' grammar move # 4
## 5 ggplot2 func 'E' grammar move # 5
```

---
count: false
### Unpaired pipeline_steps & graphical_elements

```
## # A tibble: 6 × 2
##   function_name    gg_element      
##   <chr>            <chr>           
## 1 ggplot2 func 'A' grammar move # 1
## 2 ggplot2 func 'B' grammar move # 2
## 3 ggplot2 func 'C' grammar move # 3
## 4 ggplot2 func 'D' grammar move # 4
## 5 ggplot2 func 'E' grammar move # 5
## 6 ggplot2 func 'F' grammar move # 6
```

---
count: false
### Unpaired pipeline_steps & graphical_elements

```
## # A tibble: 7 × 2
##   function_name    gg_element      
##   <chr>            <chr>           
## 1 ggplot2 func 'A' grammar move # 1
## 2 ggplot2 func 'B' grammar move # 2
## 3 ggplot2 func 'C' grammar move # 3
## 4 ggplot2 func 'D' grammar move # 4
## 5 ggplot2 func 'E' grammar move # 5
## 6 ggplot2 func 'F' grammar move # 6
## 7 ggplot2 func 'G' grammar move # 7
```

---
count: false
### Unpaired pipeline_steps & graphical_elements

```
## # A tibble: 8 × 2
##   function_name    gg_element      
##   <chr>            <chr>           
## 1 ggplot2 func 'A' grammar move # 1
## 2 ggplot2 func 'B' grammar move # 2
## 3 ggplot2 func 'C' grammar move # 3
## 4 ggplot2 func 'D' grammar move # 4
## 5 ggplot2 func 'E' grammar move # 5
## 6 ggplot2 func 'F' grammar move # 6
## 7 ggplot2 func 'G' grammar move # 7
## 8 ggplot2 func 'H' grammar move # 8
```

---
count: false
### Unpaired pipeline_steps & graphical_elements

```
## # A tibble: 9 × 2
##   function_name    gg_element      
##   <chr>            <chr>           
## 1 ggplot2 func 'A' grammar move # 1
## 2 ggplot2 func 'B' grammar move # 2
## 3 ggplot2 func 'C' grammar move # 3
## 4 ggplot2 func 'D' grammar move # 4
## 5 ggplot2 func 'E' grammar move # 5
## 6 ggplot2 func 'F' grammar move # 6
## 7 ggplot2 func 'G' grammar move # 7
## 8 ggplot2 func 'H' grammar move # 8
## 9 ggplot2 func 'I' grammar move # 9
```

---
class: inverse

####From source .Rmd:

---

````default

### Usual pairing? (pairing at all is empathetic! output helps communicat intent of code. Afforeded by dynamic document systems: knitr, quarto, jupytr notebooks.)

#### Complete code pipeline

```{r, code = knitr::knit_code$get("scatter"), eval = F}

```

#### Complete plot

```{r, code = knitr::knit_code$get("scatter"), eval = T, echo = F, out.height="30%"}

```

````
---

### Usual pairing? (pairing at all is empathetic! output helps communicat intent of code. Afforeded by dynamic document systems: knitr, quarto, jupytr notebooks.)

#### Complete code pipeline

#### Complete plot

---
class: inverse

####From source .Rmd:

---

````default

### Possible pairings of functions and gg graphical moves.

```{r, echo = F}
tibble(function_name = paste0("ggplot2 func '", LETTERS[1:9],"'")) %>% 
         crossing(gg_element = paste("gg manipulation", 1:9)) %>% 
  mutate(combo = function_name %>%  paste(gg_element, sep = "->\n")) %>% 
  ggplot() + 
  aes(x = runif(81), y = runif(81)) + 
  geom_label(aes(label = combo)) 
```

# flipbook pairing is 'tidy', like vectors organized in a data frame...

````
---

### Possible pairings of functions and gg graphical moves.

![](flipbooks-lawrence-livermore_double_crochet_files/figure-html/unnamed-chunk-84-1.png)

# flipbook pairing is 'tidy', like vectors organized in a data frame...

---
class: inverse

####From source .Rmd:

---

````default

`r chunk_reveal("babynamesvectors", title = "## Pairing is powerful, 'tidy'; e.g. data frames\n### How many Minnies in 1880?")`

```{r babynamesvectors, include = F}
babynames::babynames$name[1:10]

babynames::babynames$n[1:10]

babynames::babynames$year[1:10]

# better when paired...
babynames::babynames %>% select(name, year, n) %>% .[1:10,]

```

````
---

count: false
 
## Pairing is powerful, 'tidy'; e.g. data frames
### How many Minnies in 1880?
.panel1-babynamesvectors-auto[

```r
*babynames::babynames$name[1:10]
```
]
 
.panel2-babynamesvectors-auto[

```
##  [1] "Mary"      "Anna"      "Emma"      "Elizabeth" "Minnie"    "Margaret"  "Ida"      
##  [8] "Alice"     "Bertha"    "Sarah"
```
]

---
count: false
 
## Pairing is powerful, 'tidy'; e.g. data frames
### How many Minnies in 1880?
.panel1-babynamesvectors-auto[

```r
babynames::babynames$name[1:10]

*babynames::babynames$n[1:10]
```
]
 
.panel2-babynamesvectors-auto[

```
##  [1] "Mary"      "Anna"      "Emma"      "Elizabeth" "Minnie"    "Margaret"  "Ida"      
##  [8] "Alice"     "Bertha"    "Sarah"
```

```
##  [1] 7065 2604 2003 1939 1746 1578 1472 1414 1320 1288
```
]

---
count: false
 
## Pairing is powerful, 'tidy'; e.g. data frames
### How many Minnies in 1880?
.panel1-babynamesvectors-auto[

```r
babynames::babynames$name[1:10]

babynames::babynames$n[1:10]

*babynames::babynames$year[1:10]
```
]
 
.panel2-babynamesvectors-auto[

```
##  [1] "Mary"      "Anna"      "Emma"      "Elizabeth" "Minnie"    "Margaret"  "Ida"      
##  [8] "Alice"     "Bertha"    "Sarah"
```

```
##  [1] 7065 2604 2003 1939 1746 1578 1472 1414 1320 1288
```

```
##  [1] 1880 1880 1880 1880 1880 1880 1880 1880 1880 1880
```
]

---
count: false
 
## Pairing is powerful, 'tidy'; e.g. data frames
### How many Minnies in 1880?
.panel1-babynamesvectors-auto[

```r
babynames::babynames$name[1:10]

babynames::babynames$n[1:10]

babynames::babynames$year[1:10]

# better when paired...
*babynames::babynames %>% select(name, year, n) %>% .[1:10,]
```
]
 
.panel2-babynamesvectors-auto[

```
##  [1] "Mary"      "Anna"      "Emma"      "Elizabeth" "Minnie"    "Margaret"  "Ida"      
##  [8] "Alice"     "Bertha"    "Sarah"
```

```
##  [1] 7065 2604 2003 1939 1746 1578 1472 1414 1320 1288
```

```
##  [1] 1880 1880 1880 1880 1880 1880 1880 1880 1880 1880
```

```
## # A tibble: 10 × 3
##    name       year     n
##    <chr>     <dbl> <int>
##  1 Mary       1880  7065
##  2 Anna       1880  2604
##  3 Emma       1880  2003
##  4 Elizabeth  1880  1939
##  5 Minnie     1880  1746
##  6 Margaret   1880  1578
##  7 Ida        1880  1472
##  8 Alice      1880  1414
##  9 Bertha     1880  1320
## 10 Sarah      1880  1288
```
]

---
count: false
 
## Pairing is powerful, 'tidy'; e.g. data frames
### How many Minnies in 1880?
.panel1-babynamesvectors-auto[

```r
babynames::babynames$name[1:10]

babynames::babynames$n[1:10]

babynames::babynames$year[1:10]

# better when paired...
babynames::babynames %>% select(name, year, n) %>% .[1:10,]
```
]
 
.panel2-babynamesvectors-auto[

```
##  [1] "Mary"      "Anna"      "Emma"      "Elizabeth" "Minnie"    "Margaret"  "Ida"      
##  [8] "Alice"     "Bertha"    "Sarah"
```

```
##  [1] 7065 2604 2003 1939 1746 1578 1472 1414 1320 1288
```

```
##  [1] 1880 1880 1880 1880 1880 1880 1880 1880 1880 1880
```

---
class: inverse

####From source .Rmd:

---

````default

### {flipbookr} was born

```{r, eval = F}
remotes::install.github("EvaMaeRey/flipbookr")
install.packages("xaringan")
```

RConsortium Grant. Thanks!

````
---

### {flipbookr} was born

```r
remotes::install.github("EvaMaeRey/flipbookr")
install.packages("xaringan")
```

RConsortium Grant. Thanks!

---
class: inverse

####From source .Rmd:

---

````default

# Live demo - with flipbookr

```{r, eval = F}
install.packages("xaringan")
remotes::install_github("EvaMaeRey/flipbookr")
```

## RStudio -> File -> New File -> R Markdown -> From Template -> Template: A Minimal Flipbook

````
---

# Live demo - with flipbookr

```r
install.packages("xaringan")
remotes::install_github("EvaMaeRey/flipbookr")
```

## RStudio -> File -> New File -> R Markdown -> From Template -> Template: A Minimal Flipbook

---
class: inverse

####From source .Rmd:

---

```default

# In the backgroud flipbookr::chunk_reveal():

## grabs code from chunk, 
--
parses it, 
--
explodes it into partial builds, 
--
inserts each partial build into individual slides for presentation in Xaringan

```
---

# In the backgroud flipbookr::chunk_reveal():

## grabs code from chunk, 
--
parses it, 
--
explodes it into partial builds, 
--
inserts each partial build into individual slides for presentation in Xaringan

---
class: inverse

####From source .Rmd:

---

```default

# Flipbooks feel magical...

# Flipbookr makes, creating a flipbook is manigeable, but not quite magical ...

```
---

# Flipbooks feel magical...

# Flipbookr makes, creating a flipbook is manigeable, but not quite magical ...

---
class: inverse

####From source .Rmd:

---

```default

### But it could magical w/ a chunk_reveal() modified behaivior for on-demand mini flipbooks from within live session (rmd/qmd).

--
### Using Bodwin's live chunk getting strategy as used in {flair}.  https://github.com/EvaMaeRey/knitcodegetlive,  (working)

--
### and rstudioapi::viewer... (not working) 
--
### and maybe addin... (to be added). 
--
### only getting started with .qmd (He)

```
---

### But it could magical w/ a chunk_reveal() modified behaivior for on-demand mini flipbooks from within live session (rmd/qmd).

--
### Using Bodwin's live chunk getting strategy as used in {flair}.  https://github.com/EvaMaeRey/knitcodegetlive,  (working)

--
### and rstudioapi::viewer... (not working) 
--
### and maybe addin... (to be added). 
--
### only getting started with .qmd (He)

---
class: inverse

####From source .Rmd:

---

```default

# Stats 101 classroom goal...

### New efforts to create `chunk_reveal_live` might put this tech in the hands of more coding newcomers; including on-the-fly classroom use.  Arguably the people that might find flipbooks the most useful --- people who aren't going to be able to 'just-read' a pipeline of code --- might find them even more engaging when they are used to review and present on the most interesting pipelines: their own explorations of their own data.

```
---

# Stats 101 classroom goal...

---
class: inverse

####From source .Rmd:

---

````default

`r chunk_reveal("stats_101")`

```{r stats_101, include = F}
library(ggplot2)
library(ggsmoothfit) # stat fit below

mtcars %>% 
  ggplot() + 
  aes(x = wt) + 
  aes(y = mpg) + 
  geom_point() + 
  geom_smooth(method = lm, se = F) + 
  stat_fit(method = lm, 
           geom = "point",
           color = "blue") + 
  stat_fit(method = lm, 
           geom = "segment",
           color = "red") + 
  geom_smooth(method = lm)
```

````
---

```r
*library(ggplot2)
```
]
 
.panel2-stats_101-auto[

]

---
count: false

```r
library(ggplot2)
*library(ggsmoothfit)  # stat fit below
```
]
 
.panel2-stats_101-auto[

]

---
count: false