xaringan Extras

class: title

<div class="scene f2 absolute top-0 left-0 w-10 bg-red bg-blue">3</div>
<h1>xaringan Extras</h1>
<h2>xaringanExtra</h2>
<div class="conf-logo"></div>
<div class="talk-meta">
<p class="talk-author">Garrick Aden-Buie & Silvia Canelón</p>
<p class="talk-date">
<a href="https://presentable-user2021.netlify.app" class="underline f-lato" style="color: var(--text-light); text-underline-offset: 7px;">Professional, Polished, Presentable</a>
</p>
</div>

---

# That little bit &#x2728; .dark-green[extra] &#x2728;

Using .pkg[xaringan] or .pkg[rmarkdown]

1. Presenter notes
1. Separate code chunks and their output

Using .pkg[xaringanExtra]

---
class: break center middle

# .f-marker[Presenter<br/>Notes]

---
class: f5

```md
---

## Popular Cultural References to Lemurs

1. Madagascar, the movie
```

---
class: f5

```md
---

## Popular Cultural References to Lemurs

1. Madagascar, the movie

???

Popular cultural references to lemurs include the Disney movie Madagascar. Really, it's all anyone knows about lemurs.
```

---

## Popular Cultural References to Lemurs

1. Madagascar, the movie

.absolute.bottom-1.left-2.f5[
Press <kbd>P</kbd> to toggle **presenter mode**
]

???

Popular cultural references to lemurs
include the Disney movie Madagascar.
Really, it's all anyone knows about lemurs.

---

## Presenter Mode Tips

- The notes don't have to be just for you!

- If they are for you...

???

The notes in presenter mode aren't just to remind you of your script,
they can also be very helpful to others who find your slides online!

How can you view the presenter notes and share your screen at the same time?

### Presenting in video

1. .relative[Present from the private browser window .dark-red[without moon reader] <img src="assets/img/rstudio-viewer-popout.png" alt="RStudio Viewer Popout Button" class="v-btm" style="height: 52px;position: absolute;top: -10px;">]

2. Clone the slides into a new window with <kbd>C</kbd>

3. Pick the full browser or the cloned window to share

4. Press <kbd>P</kbd> in the other window

???

Don't try to present from inside RStudio.
Instead, use a **private** browser window,
either from the slides shared online
or using the **knit** button.

Clone the slides into a new window and then choose either the small window or the full browser to share.
If you want people to only see the slides, share the cloned window.
If you want to share browser tabs, use the full browser.
Press

---
class: fullscreen

---

class: break break-shiny

# Code + Plots

.f-lato.f6.i[
The greatest hard thing about xaringan.
]

---

```r
library(dplyr)
library(ggplot2)
lemurs <- readRDS("lemurs.rds")

lemurs %>%
  filter(
    common_name == "Ring-Tailed Lemur",
    between(age_at_wt_y, 1, 5)
  ) %>%
  ggplot() +
  aes(x = age_at_wt_y, y = weight) +
  geom_point() +
  labs(
    x = "Age at Weight",
    y = "Weight (g)",
    title = "Weight Gain of Young Ring-Tailed Lemurs"
  )
```

.absolute.right-1.top-0.bottom-0.w-35.blue.f3.tr[
How can we<br>show the **code**<br>and the **plot**<br>separately?
]

---
layout: true

# Two Little Things to Control Output

---

````
```{r lemur-weight}
# any R code ...
```
````
---

````
```{r lemur-weight, eval=FALSE}
# any R code ...
```
````

---

````
```{r lemur-weight, eval=FALSE}
# any R code ...
```

---

```{r ref.label="lemur-weight", echo=FALSE}

```
````

---

````
```{r lemur-weight}
# plotting R code ...
```
````

---

````
```{r lemur-weight}
# plotting R code ...
```

![](slide_files/figure-html/lemur-weight-1.png)
````

---

````
```{r lemur-weight, fig.show="hide"}
# plotting R code ...
```

![](`r knitr::fig_chunk("lemur-weight", "png")`)
````

---

````
```{r lemur-weight, fig.show="hide"}
# plotting R code ...
```

---

![](`r knitr::fig_chunk("lemur-weight", "png")`)
````

---

````
```{r lemur-weight, fig.show="hide"}
# plotting R code ...
```

---
background-image: url(`r knitr::fig_chunk("lemur-weight", "png")`)
background-size: cover

````

---

.panelset[

.panel[.panel-name[Code]

```r
lemurs %>%
  filter(
    common_name == "Ring-Tailed Lemur",
    between(age_at_wt_y, 1, 5)
  ) %>%
  ggplot() +
  aes(x = age_at_wt_y, y = weight) +
  geom_point() +
  labs(
    x = "Age at Weight",
    y = "Weight (g)",
    title = "Weight Gain of Young Ring-Tailed Lemurs"
  )
```

]

.panel[.panel-name[Output]

]

---
layout: false
class: break break-xaringanextra center middle white

/* -- silvia: commenting out in favor of green #2F8369 used in js4shiny-xaringan-base.css -- */
/*
.link-purple a {
  color: var(--purple);
  text-decoration: underline;
}
*/

.highlight-last-item > ul > li, 
.highlight-last-item > ol > li {
  opacity: 0.5;
}
.highlight-last-item > ul > li:last-of-type,
.highlight-last-item > ol > li:last-of-type {
  opacity: 1;
}
/* small fixes for scribble interacting with tachyons */
.xe-scribble__button {
  padding: 0 3px;
  height: 32px;
  line-height: 1;
}
:root {
  --primary: #4d8dc9;
  --secondary: #44bc96;
}
</style>

# .f-lato.normal[xaringanExtra]

---
layout: true
class: link-purple

# What can xaringanExtra do?

---

-   Add an overview of your presentation with [tile view](https://pkg.garrickadenbuie.com/xaringanExtra/#/tile-view)
-   Make your slides [editable](https://pkg.garrickadenbuie.com/xaringanExtra/#/editable)
-   Share your slides in style with [share again](https://pkg.garrickadenbuie.com/xaringanExtra/#/share-again)
-   Broadcast your slides in real time to viewers with [broadcast](https://pkg.garrickadenbuie.com/xaringanExtra/#/broadcast)
-   Scribble on your slides during your presentation with [scribble](https://pkg.garrickadenbuie.com/xaringanExtra/#/scribble)
-   Announce slide changes with a [subtle tone](https://pkg.garrickadenbuie.com/xaringanExtra/#/slide-tone)
-   Animate slide transitions with [animate.css](https://pkg.garrickadenbuie.com/xaringanExtra/#/animate-css)
-   Add tabbed panels to slides with [panelset](https://pkg.garrickadenbuie.com/xaringanExtra/#/panelset)
-   Add a logo to all of your slides with [logo](https://pkg.garrickadenbuie.com/xaringanExtra/#/logo)
-   Add a search box to search through your slides with [search](https://pkg.garrickadenbuie.com/xaringanExtra/#/search)
-   Use the [Tachyons CSS utility toolkit](https://pkg.garrickadenbuie.com/xaringanExtra/#/tachyons)
-   Add a live video feed of your [webcam](https://pkg.garrickadenbuie.com/xaringanExtra/#/webcam)
-   Add one-click code copying with [clipboard](https://pkg.garrickadenbuie.com/xaringanExtra/#/clipboard)
-   Always play gifs from the start with [freezeframe](https://pkg.garrickadenbuie.com/xaringanExtra/#/freezeframe)
-   Fit your slides to [fill the browser window](https://pkg.garrickadenbuie.com/xaringanExtra/#/fit-to-screen)
-   Add [extra CSS styles](https://pkg.garrickadenbuie.com/xaringanExtra/#/extra-styles)

---
layout: true
class: link-purple highlight-last-item

# **Some things** xaringanExtra can do

---

-   Add tabbed panels to slides with [panelset](https://pkg.garrickadenbuie.com/xaringanExtra/#/panelset)

-   Add an overview of your presentation with [tile view](https://pkg.garrickadenbuie.com/xaringanExtra/#/tile-view)

-   .can-edit[Make your slides [editable](https://pkg.garrickadenbuie.com/xaringanExtra/#/editable)]

-   Scribble on your slides during your presentation with [scribble](https://pkg.garrickadenbuie.com/xaringanExtra/#/scribble)

-   Share your slides in style with [share again](https://pkg.garrickadenbuie.com/xaringanExtra/#/share-again)

---
layout: false

# **How to use** xaringanExtra?

```r
library(remotes)
install_github("gadenbuie/xaringanExtra")
```

````markdown
```{r xaringanExtra, echo=FALSE}
library(xaringanExtra)
use_xaringan_extra(
  c("tile_view", "panelset", "share_again", "editable")
)
use_scribble(
  pen_color = "#d33f49", 
  pen_size = 4,
  palette = c("#d33f49", "#466683", "#338d70", "#c0af3f", "#ff6300")
)
```
````

---
layout: true

# How to use **panelsets**

---

````markdown
*.panelset[

*]
````

---

````markdown
.panelset[
*.panel[

*]
]
````

---

````markdown
.panelset[
.panel[
*This content will show up in panel 1!
]
]
````

---

````markdown
.panelset[
*.panel[.panel-name[First panel]

This content will show up in panel 1!
]
]
````

---

````markdown
.panelset[
.panel[.panel-name[First panel]

This content will show up in panel 1!
]

*.panel[.panel-name[Second panel]
*
*This content will show up in the **second panel**!
*]
]
````

---

.panelset[
.panel[.panel-name[First panel]

This content will show up in panel 1!
]

.panel[.panel-name[Second panel]

This content will show up in the **second panel**!
]
]

---

````markdown

```{r lemur-weight}
lemurs %>%
  filter(
    common_name == "Ring-Tailed Lemur",
    between(age_at_wt_y, 1, 5)
  ) %>%
  ggplot() +
  aes(x = age_at_wt_y, y = weight) +
  geom_point() +
  labs(
    x = "Age at Weight",
    y = "Weight (g)",
    title = "Weight Gain of Young Ring-Tailed Lemurs"
  )
```

````

---

````markdown
*.panelset[
```{r lemur-weight}
lemurs %>%
  filter(
    common_name == "Ring-Tailed Lemur",
    between(age_at_wt_y, 1, 5)
  ) %>%
  ggplot() +
  aes(x = age_at_wt_y, y = weight) +
  geom_point() +
  labs(
    x = "Age at Weight",
    y = "Weight (g)",
    title = "Weight Gain of Young Ring-Tailed Lemurs"
  )
```
*]
````

---

````markdown
.panelset[
*```{r lemur-weight, panelset = TRUE}
lemurs %>%
  filter(
    common_name == "Ring-Tailed Lemur",
    between(age_at_wt_y, 1, 5)
  ) %>%
  ggplot() +
  aes(x = age_at_wt_y, y = weight) +
  geom_point() +
  labs(
    x = "Age at Weight",
    y = "Weight (g)",
    title = "Weight Gain of Young Ring-Tailed Lemurs"
  )
```
]
````

---

.panelset[

.panel[.panel-name[Code]

]

.panel[.panel-name[Output]

]

---
class: header_background center middle

# Activity Time

.f4[
.blue[<svg aria-hidden="true" role="img" viewBox="0 0 640 512" style="height:1em;width:1.25em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:currentColor;overflow:visible;position:relative;"><path d="M206.86 245.15c-35.88 10.45-59.95 41.2-57.53 74.1 11.4-12.72 28.81-23.7 49.9-30.92l7.63-43.18zM95.81 295L64.08 115.49c-.29-1.62.28-2.62.24-2.65 57.76-32.06 123.12-49.01 189.01-49.01 1.61 0 3.23.17 4.85.19 13.95-13.47 31.73-22.83 51.59-26 18.89-3.02 38.05-4.55 57.18-5.32-9.99-13.95-24.48-24.23-41.77-27C301.27 1.89 277.24 0 253.32 0 176.66 0 101.02 19.42 33.2 57.06 9.03 70.48-3.92 98.48 1.05 126.58l31.73 179.51c14.23 80.52 136.33 142.08 204.45 142.08 3.59 0 6.75-.46 10.01-.8-13.52-17.08-28.94-40.48-39.5-67.58-47.61-12.98-106.06-51.62-111.93-84.79zm97.55-137.46c-.73-4.12-2.23-7.87-4.07-11.4-8.25 8.91-20.67 15.75-35.32 18.32-14.65 2.58-28.67.4-39.48-5.17-.52 3.94-.64 7.98.09 12.1 3.84 21.7 24.58 36.19 46.34 32.37 21.75-3.82 36.28-24.52 32.44-46.22zM606.8 120.9c-88.98-49.38-191.43-67.41-291.98-51.35-27.31 4.36-49.08 26.26-54.04 54.36l-31.73 179.51c-15.39 87.05 95.28 196.27 158.31 207.35 63.03 11.09 204.47-53.79 219.86-140.84l31.73-179.51c4.97-28.11-7.98-56.11-32.15-69.52zm-273.24 96.8c3.84-21.7 24.58-36.19 46.34-32.36 21.76 3.83 36.28 24.52 32.45 46.22-.73 4.12-2.23 7.87-4.07 11.4-8.25-8.91-20.67-15.75-35.32-18.32-14.65-2.58-28.67-.4-39.48 5.17-.53-3.95-.65-7.99.08-12.11zm70.47 198.76c-55.68-9.79-93.52-59.27-89.04-112.9 20.6 25.54 56.21 46.17 99.49 53.78 43.28 7.61 83.82.37 111.93-16.6-14.18 51.94-66.71 85.51-122.38 75.72zm130.3-151.34c-8.25-8.91-20.68-15.75-35.33-18.32-14.65-2.58-28.67-.4-39.48 5.17-.52-3.94-.64-7.98.09-12.1 3.84-21.7 24.58-36.19 46.34-32.37 21.75 3.83 36.28 24.52 32.45 46.22-.73 4.13-2.23 7.88-4.07 11.4z"/></svg>]
[materials/act-01/03-xaringan-extras](/materials/act-01/03-xaringan-extras/#activity)
]

Practice controlling code output and using panelsets.