Beyond Beamer

background-color: #006DAE
class: middle center hide-slide-number

<div class="shade_black"  style="width:60%;right:0;bottom:0;padding:10px;border: dashed 4px white;margin: auto;">
<i class="fas fa-exclamation-circle"></i> These slides are viewed best by Chrome and occasionally need to be refreshed if elements did not load properly. See <a href=/>here for PDF <i class="fas fa-file-pdf"></i></a>. 
</div>

<br>

---

background-image: url(images/bg1.jpg)
background-size: cover
class: hide-slide-number title-slide
count: false

<h1 class="monash-blue">Beyond Beamer</h1>

<h2 style="font-weight:900!important;">Modern and Dynamic Presentations with<br> R Markdown</h2>

</div>

.bottom_abs.width100.shade_black[

**Emi Tanaka**

Department of Econometrics and Business Statistics

<span><i class="fas  fa-envelope faa-float animated "></i></span>  emi.tanaka@monash.edu
<span><i class="fab  fa-twitter faa-float animated "></i></span>  @statsgen

30th Jun 2020 @ SSA NSW/Canberra x R-Ladies Sydney/Canberra | via Zoom

]

---

.footer[
<a href="https://twitter.com/statsgen"><i class="fab fa-twitter"></i>@statsgen</a> <i class="fas fa-link"></i> <a href="http://emitanaka.org/slides/rladiesSSA2020/#1">emitanaka.org/slides/rladiesSSA2020/</a>
]

---

# Link to all the materials

* This slide is made using R markdown via the `xaringan` R-package 📦
* You can find [all material here <i class="fab fa-github"></i> ](https://github.com/emitanaka/rladiesSSA2020) or [download as zip here <i class="fa fa-download"></i> ](https://github.com/emitanaka/rladiesSSA2020/zipball/master/)

---

<br>

This talk is NOT about:

<br>

<i class='fa fa-times'></i> how to present well or communicate

<br>

<i class='fa fa-times'></i> how to design your slides

---

<br>

<i class='fas fa-check'></i> Learn about Beamer <i class="fas fa-handshake"></i> R Markdown

<br>

<i class='fas fa-check'></i> Why care about R Markdown?

<br>

<i class='fas fa-check'></i> Get started with `xaringan` = R Markdown <i class="fas fa-handshake"></i> `remark.js` <i class="fas fa-user-plus"></i> HTML/CSS/JS

<br>

<i class='fas fa-check'></i> Why HTML slides?

<br>

<i class="fas fa-question-circle"></i> Questions? Do ask away! <span style="font-size:3em">👩🏻‍💻</span>

---

<div class="cursive-font" style="font-size:34pt!important;position:absolute;top:50%;left:30%;transform:rotate(6deg);width:500px;">
For the beamer users who are yet to use <br>R Markdown
</div>

---

# Beamer LaTeX document class

.scroll-fit50[
````{=latex}
\documentclass[10pt,aspectratio=169]{beamer}
\usepackage{amssymb,amsmath}
\usepackage{lmodern}
\usepackage{hyperref, url}
\usetheme{Copenhagen}
\usecolortheme{dolphin}
\usefonttheme{structurebold}

\title{This is a Beamer presentation made using \LaTeX}
\subtitle{}
\author{Emi Tanaka}
\date{30th June 2020}
\institute{Monash University}

\begin{document}
\frame{\titlepage}

\begin{frame}
  \tableofcontents[hideallsubsections]
\end{frame}

\section{Basics}

\begin{frame}{Setting up the YAML}

\begin{block}{R Markdown YAML}

\texttt{output:\ beamer\_presentation}

\end{block}

Also check out the
\href{https://github.com/eddelbuettel/binb}{\texttt{binb} R-package}.

\end{frame}

\section{Clean syntax}

\begin{frame}{Example: Writing mathematics is as usual}

Consider a general linear mixed models:

$\boldsymbol{y} = \mathbf{X}\boldsymbol{\beta} + \mathbf{Z}\boldsymbol{u} + \boldsymbol{e}$
where

\begin{itemize}
\item
  $\boldsymbol{y}$ is a $n\times 1$ vector of observations,
\item
  $\mathbf{X}$ is a $n\times p$ design matrix for fixed effects
  $\boldsymbol{\beta}$,
\item
  $\mathbf{Z}$ is a $n\times q$ design matrix for fixed effects
  $\boldsymbol{u}$, and
\item
  $\boldsymbol{e}$ is a $n\times 1$ vector of random error.
\end{itemize}

\end{frame}

\begin{frame}[fragile]{Simplified content writing: itemized list}

\begin{columns}[T]
\begin{column}{0.48\textwidth}
\begin{block}{Plain \LaTeX}

\small

\begin{verbatim}
\begin{itemize}
\item 
  $\boldsymbol{y}$ is a 
  $n\times 1$ vector of 
  observations,
\item
  $\mathbf{X}$ is a $n\times p$ 
  design matrix for fixed effects
  $\boldsymbol{\beta}$$,
\item
  $\mathbf{Z}$ is a $n\times q$ 
  design matrix for fixed effects
  $\boldsymbol{u}$, and
\item
  $\boldsymbol{e}$ is a $n\times 1$ 
  vector of random error.
\end{itemize}
\end{verbatim}

\end{block}
\end{column}

\begin{column}{0.48\textwidth}
\begin{block}{Markdown syntax}

\small

\vspace{0.5cm}

\begin{verbatim}
* $\boldsymbol{y}$ is a $n\times 1$ 
  vector of observations,
  
* $\mathbf{X}$ is a $n\times p$ 
  design matrix for fixed effects 
  $\boldsymbol{\beta}$,
  
* $\mathbf{Z}$ is a $n\times q$ 
  design matrix for fixed effects 
  $\boldsymbol{u}$, and
  
* $\boldsymbol{e}$ is a $n\times 1$ 
  vector of random error.
\end{verbatim}

\end{block}
\end{column}
\end{columns}

\end{frame}

\begin{frame}[fragile]{Make new frame}

\begin{columns}[T]
\begin{column}{0.48\textwidth}
Instead of

\begin{block}{\LaTeX}

\begin{verbatim}
\begin{frame}{Title}
Content
\ end{frame}
\end{verbatim}

\end{block}

\begin{block}{markdown}

\begin{verbatim}
## Title
Content
\end{verbatim}

\end{block}
\end{column}

\begin{column}{0.48\textwidth}
In the \textbf{R Markdown YAML} set:

\begin{verbatim}
output:
  beamer_presentation:
    slide_level: 2
\end{verbatim}

\begin{itemize}
\item
  then a heading at slide level starts a new frame; or
\item
  a horizontal line, like \texttt{-\/-\/-}, starts a new frame.
\end{itemize}
\end{column}
\end{columns}

\end{frame}

\begin{frame}[fragile]{Multi-column output}

Stick with \LaTeX or Pandoc syntax (both will work)

\begin{columns}[T]
\begin{column}{0.48\textwidth}
\begin{block}{Plain \LaTeX}

\begin{verbatim}
\begin{columns}
\begin{column}{0.5\textwidth}
Column 1 content
\end{column}
\begin{column}{0.5\textwidth}
Column 2 content
\end{column}
\end{columns}
\end{verbatim}

\end{block}
\end{column}

\begin{column}{0.48\textwidth}
\begin{block}{Pandoc syntax}

\begin{verbatim}
:::: columns
::: column
Column 1 content
:::
::: column
Column 2 content
:::
::::
\end{verbatim}

\end{block}
\end{column}
\end{columns}

\end{frame}

\section{Appearance}

\begin{frame}[fragile]{Pandoc options}

\begin{itemize}
\item
  See
  \href{https://pandoc.org/MANUAL.html\#variables-for-beamer-slides}{Pandoc
  manual} for all the variables available to modify in the YAML.

\begin{itemize}
  \item
    E.g. \texttt{aspectratio:\ 43} for 4:3 ratio.
  \end{itemize}
\item
  See also
  \href{https://pandoc.org/MANUAL.html\#producing-slide-shows-with-pandoc}{Producing
  slide shows with pandoc}

\begin{itemize}
  \item
    E.g. Speaker notes
  \end{itemize}
\end{itemize}

\end{frame}

\begin{frame}[fragile,shrink]{Beamer frame atributes}

\begin{verbatim}
## Beamer frame atributes {.shrink}
\end{verbatim}

\begin{itemize}
\item
  The frame attributes in Section 8.1 of the
  \href{http://mirror.aarnet.edu.au/pub/CTAN/macros/latex/contrib/beamer/doc/beameruserguide.pdf}{Beamer
  User's Guide} can be used if inserted after header level as
  \texttt{\{.attribute\}} where \texttt{attribute} replaced with

\begin{itemize}
  \item
    \texttt{allowdisplaybreaks}
  \item
    \texttt{allowframebreaks}
  \item
    \texttt{b}
  \item
    \texttt{c}
  \item
    \texttt{t}
  \item
    \texttt{environment}
  \item
    \texttt{label}
  \item
    \texttt{plain}
  \item
    \texttt{shrink}
  \item
    \texttt{standout}
  \item
    \texttt{noframenumbering}
  \end{itemize}
\end{itemize}

\end{frame}

\section{Animation}

\begin{frame}[fragile]{Animation}

\begin{itemize}[<+->]
\item
  First step
\item
  Second step
\item
  Third step
\end{itemize}

\pause

You can also include pauses with \texttt{.\ .\ .}

\end{frame}

\end{document}
````
]]
.item[

`example-beamer-clean.pdf`

<br>

]
]

---

# Clean syntax with Markdown

.grid[
.item[
`example-beamer-clean.tex`
.scroll-fit50[
````latex
\documentclass[10pt,aspectratio=169]{beamer}
\usepackage{amssymb,amsmath}
\usepackage{lmodern}
\usepackage{hyperref, url}
\usetheme{Copenhagen}
\usecolortheme{dolphin}
\usefonttheme{structurebold}

\title{This is a Beamer presentation made using \LaTeX}
\subtitle{}
\author{Emi Tanaka}
\date{30th June 2020}
\institute{Monash University}

\begin{document}
\frame{\titlepage}

\begin{frame}
  \tableofcontents[hideallsubsections]
\end{frame}

\section{Basics}

\begin{frame}{Setting up the YAML}

\begin{block}{R Markdown YAML}

\texttt{output:\ beamer\_presentation}

\end{block}

Also check out the
\href{https://github.com/eddelbuettel/binb}{\texttt{binb} R-package}.

\end{frame}

\section{Clean syntax}

\begin{frame}{Example: Writing mathematics is as usual}

Consider a general linear mixed models:

$\boldsymbol{y} = \mathbf{X}\boldsymbol{\beta} + \mathbf{Z}\boldsymbol{u} + \boldsymbol{e}$
where

\end{frame}

\begin{frame}[fragile]{Simplified content writing: itemized list}

\begin{columns}[T]
\begin{column}{0.48\textwidth}
\begin{block}{Plain \LaTeX}

\small

\end{block}
\end{column}

\begin{column}{0.48\textwidth}
\begin{block}{Markdown syntax}

\small

\vspace{0.5cm}

\end{block}
\end{column}
\end{columns}

\end{frame}

\begin{frame}[fragile]{Make new frame}

\begin{columns}[T]
\begin{column}{0.48\textwidth}
Instead of

\begin{block}{\LaTeX}

\begin{verbatim}
\begin{frame}{Title}
Content
\ end{frame}
\end{verbatim}

\end{block}

\begin{block}{markdown}

\begin{verbatim}
## Title
Content
\end{verbatim}

\end{block}
\end{column}

\begin{column}{0.48\textwidth}
In the \textbf{R Markdown YAML} set:

\begin{verbatim}
output:
  beamer_presentation:
    slide_level: 2
\end{verbatim}

\begin{itemize}
\item
  then a heading at slide level starts a new frame; or
\item
  a horizontal line, like \texttt{-\/-\/-}, starts a new frame.
\end{itemize}
\end{column}
\end{columns}

\end{frame}

\begin{frame}[fragile]{Multi-column output}

Stick with \LaTeX or Pandoc syntax (both will work)

\begin{columns}[T]
\begin{column}{0.48\textwidth}
\begin{block}{Plain \LaTeX}

\begin{verbatim}
\begin{columns}
\begin{column}{0.5\textwidth}
Column 1 content
\end{column}
\begin{column}{0.5\textwidth}
Column 2 content
\end{column}
\end{columns}
\end{verbatim}

\end{block}
\end{column}

\begin{column}{0.48\textwidth}
\begin{block}{Pandoc syntax}

\begin{verbatim}
:::: columns
::: column
Column 1 content
:::
::: column
Column 2 content
:::
::::
\end{verbatim}

\end{block}
\end{column}
\end{columns}

\end{frame}

\section{Appearance}

\begin{frame}[fragile]{Pandoc options}

\begin{itemize}
\item
  See
  \href{https://pandoc.org/MANUAL.html\#variables-for-beamer-slides}{Pandoc
  manual} for all the variables available to modify in the YAML.

\begin{itemize}
  \item
    E.g. Speaker notes
  \end{itemize}
\end{itemize}

\end{frame}

\begin{frame}[fragile,shrink]{Beamer frame atributes}

\begin{verbatim}
## Beamer frame atributes {.shrink}
\end{verbatim}

\end{frame}

\section{Animation}

\begin{frame}[fragile]{Animation}

\begin{itemize}[<+->]
\item
  First step
\item
  Second step
\item
  Third step
\end{itemize}

\pause

You can also include pauses with \texttt{.\ .\ .}

\end{frame}

\end{document}
````
]
]
.item[
`example-beamer.Rmd`
.scroll-fit50[
````yaml
---
title: This is a Beamer presentation made using R Markdown
subtitle: "`rmarkdown::beamer_presentation`"
author: Emi Tanaka
institute: Monash University
date: "30th June 2020"
fontsize: 10pt
mathspec: true # for metropolis theme
aspectratio: 169 # 16:9
#classoption: handout
output:
 beamer_presentation:
   theme: "Copenhagen" 
   # https://deic-web.uab.cat/~iblanes/beamer_gallery/index_by_theme.html
   #theme: "metropolis" # special
   colortheme: "dolphin"
   # https://deic-web.uab.cat/~iblanes/beamer_gallery/index_by_color.html
   fonttheme: "structurebold"
   # https://deic-web.uab.cat/~iblanes/beamer_gallery/index_by_font.html
   latex_engine: xelatex # for metropolis theme
   toc: true
   slide_level: 2
   keep_tex: true
   #includes:
   #   in_header: preamble.tex
header-includes:
  - \usepackage{fancyvrb}
---
````
````markdown

# Basics

## Setting up the YAML

::: block
### R Markdown YAML

`output: beamer_presentation`
:::

Also check out the [`binb` R-package](https://github.com/eddelbuettel/binb).

# Clean syntax

## Example: Writing mathematics is as usual

Consider a general linear mixed models:

$$\boldsymbol{y} = \mathbf{X}\boldsymbol{\beta} + \mathbf{Z}\boldsymbol{u} + \boldsymbol{e}$$
where

* $\boldsymbol{y}$ is a $n\times 1$ vector of observations,
* $\mathbf{X}$ is a $n\times p$ design matrix for fixed effects $\boldsymbol{\beta}$,
* $\mathbf{Z}$ is a $n\times q$ design matrix for fixed effects $\boldsymbol{u}$, and
* $\boldsymbol{e}$ is a $n\times 1$ vector of random error.

## Simplified content writing: itemized list

:::::: columns
::: column

### Plain \LaTeX

\small

```
\begin{itemize}
\item 
  $\boldsymbol{y}$ is a 
  $n\times 1$ vector of 
  observations,
\item
  $\mathbf{X}$ is a $n\times p$ 
  design matrix for fixed effects
  $\boldsymbol{\beta}$$,
\item
  $\mathbf{Z}$ is a $n\times q$ 
  design matrix for fixed effects
  $\boldsymbol{u}$, and
\item
  $\boldsymbol{e}$ is a $n\times 1$ 
  vector of random error.
\end{itemize}
```

:::
::: column

### Markdown syntax

\small

\vspace{0.5cm}

```
* $\boldsymbol{y}$ is a $n\times 1$ 
  vector of observations,
  
* $\mathbf{X}$ is a $n\times p$ 
  design matrix for fixed effects 
  $\boldsymbol{\beta}$,
  
* $\mathbf{Z}$ is a $n\times q$ 
  design matrix for fixed effects 
  $\boldsymbol{u}$, and
  
* $\boldsymbol{e}$ is a $n\times 1$ 
  vector of random error.
```

:::
::::::

## Make new frame {.fragile}

::: columns

::: column

Instead of

::: block
### \LaTeX
```
\begin{frame}{Title}
Content
\ end{frame}
```
:::

### markdown

```
## Title
Content
```

:::
::: column

In the **R Markdown YAML** set:

```
output:
  beamer_presentation:
    slide_level: 2
```

* then a heading at slide level starts a new frame; or
* a horizontal line, like `---`, starts a new frame.

:::
:::

## Multi-column output

Stick with \LaTeX or Pandoc syntax (both will work)

:::: columns

::: column

### Plain \LaTeX

```
\begin{columns}
\begin{column}{0.5\textwidth}
Column 1 content
\end{column}
\begin{column}{0.5\textwidth}
Column 2 content
\end{column}
\end{columns}
```

:::
::: column

### Pandoc syntax

```
:::: columns
::: column
Column 1 content
:::
::: column
Column 2 content
:::
::::
```
:::
::::

# Appearance

## Pandoc options

* See [Pandoc manual](https://pandoc.org/MANUAL.html#variables-for-beamer-slides) for all the variables available to modify in the YAML.
  * E.g. `aspectratio: 43` for 4:3 ratio.

* See also [Producing slide shows with pandoc](https://pandoc.org/MANUAL.html#producing-slide-shows-with-pandoc)
  * E.g. Speaker notes

## Beamer frame atributes {.shrink}

```
## Beamer frame atributes {.shrink}
```

* The frame attributes in Section 8.1 of the [Beamer User's Guide](http://mirror.aarnet.edu.au/pub/CTAN/macros/latex/contrib/beamer/doc/beameruserguide.pdf) can be used if inserted after header level as `{.attribute}` where `attribute` replaced with 
  * `allowdisplaybreaks`
  * `allowframebreaks`
  * `b`
  * `c`
  * `t`
  * `environment`
  * `label`
  * `plain`
  * `shrink`
  * `standout`
  * `noframenumbering`

# Animation

::: incremental

* First step
* Second step
* Third step

:::

. . .

You can also include pauses with `. . . `

```{r export, include = FALSE}
library(pdftools)
pdf_convert("example-beamer.pdf", format = "png", dpi = 200)
fns <- list.files(pattern = "example-beamer_")
purrr::walk(fns, ~{
  file.copy(.x, paste0("images/", .x), overwrite = TRUE)
  file.remove(.x)
})
```
````
]
]
]

---

# Beamer LaTeX with R Markdown

.scroll-fit50[
````yaml
---
title: This is a Beamer presentation made using R Markdown
subtitle: "`rmarkdown::beamer_presentation`"
author: Emi Tanaka
institute: Monash University
date: "30th June 2020"
fontsize: 10pt
mathspec: true # for metropolis theme
aspectratio: 169 # 16:9
#classoption: handout
output:
 beamer_presentation:
   theme: "Copenhagen" 
   # https://deic-web.uab.cat/~iblanes/beamer_gallery/index_by_theme.html
   #theme: "metropolis" # special
   colortheme: "dolphin"
   # https://deic-web.uab.cat/~iblanes/beamer_gallery/index_by_color.html
   fonttheme: "structurebold"
   # https://deic-web.uab.cat/~iblanes/beamer_gallery/index_by_font.html
   latex_engine: xelatex # for metropolis theme
   toc: true
   slide_level: 2
   keep_tex: true
   #includes:
   #   in_header: preamble.tex
header-includes:
  - \usepackage{fancyvrb}
---
````
````markdown

# Basics

## Setting up the YAML

::: block
### R Markdown YAML

`output: beamer_presentation`
:::

Also check out the [`binb` R-package](https://github.com/eddelbuettel/binb).

# Clean syntax

## Example: Writing mathematics is as usual

Consider a general linear mixed models:

$$\boldsymbol{y} = \mathbf{X}\boldsymbol{\beta} + \mathbf{Z}\boldsymbol{u} + \boldsymbol{e}$$
where

## Simplified content writing: itemized list

:::::: columns
::: column

### Plain \LaTeX

\small

:::
::: column

### Markdown syntax

\small

\vspace{0.5cm}

:::
::::::

## Make new frame {.fragile}

::: columns

::: column

Instead of

::: block
### \LaTeX
```
\begin{frame}{Title}
Content
\ end{frame}
```
:::

### markdown

```
## Title
Content
```

:::
::: column

In the **R Markdown YAML** set:

```
output:
  beamer_presentation:
    slide_level: 2
```

* then a heading at slide level starts a new frame; or
* a horizontal line, like `---`, starts a new frame.

:::
:::

## Multi-column output

Stick with \LaTeX or Pandoc syntax (both will work)

:::: columns

::: column

### Plain \LaTeX

```
\begin{columns}
\begin{column}{0.5\textwidth}
Column 1 content
\end{column}
\begin{column}{0.5\textwidth}
Column 2 content
\end{column}
\end{columns}
```

:::
::: column

### Pandoc syntax

```
:::: columns
::: column
Column 1 content
:::
::: column
Column 2 content
:::
::::
```
:::
::::

# Appearance

## Pandoc options

* See [Pandoc manual](https://pandoc.org/MANUAL.html#variables-for-beamer-slides) for all the variables available to modify in the YAML.
  * E.g. `aspectratio: 43` for 4:3 ratio.

* See also [Producing slide shows with pandoc](https://pandoc.org/MANUAL.html#producing-slide-shows-with-pandoc)
  * E.g. Speaker notes

## Beamer frame atributes {.shrink}

```
## Beamer frame atributes {.shrink}
```

# Animation

::: incremental

* First step
* Second step
* Third step

:::

. . .

You can also include pauses with `. . . `

`example-beamer.pdf`

<br>

]
]

---

# Why care about R Markdown?

.info-box.margin50[
<i class='fas fa-check'></i> Clean syntax for writing content

<i class='fas fa-check'></i> Integrates code and output easily:
   * great for tutorials, workshops, lectures to demonstrate how to use code
   * great for presenting analytical results

<i class='fas fa-check'></i> Some code syntax highlighting code done for you

<br>

```text
mtcars %>% 
  mutate(new = 30, string = "hello")
```

]
.item.font_smaller[
*Syntax highlighting*

```r
mtcars %>% 
  mutate(new = 30, string = "hello")
```
(achieved commonly using `listings` package in LaTeX)
]
]

]

---

# R Markdown <i class="fas fa-handshake"></i> Beamer

.scroll-fit50[
````yaml
---
title: The Power of R Markdown
subtitle: "`rmarkdown::beamer_presentation`"
author: Emi Tanaka
institute: Monash University
date: "30th June 2020"
fontsize: 10pt
mathspec: true # for metropolis theme
aspectratio: 169 # 16:9
#classoption: handout
output:
 beamer_presentation:
   theme: "Madrid" 
   # https://deic-web.uab.cat/~iblanes/beamer_gallery/index_by_theme.html
   #theme: "metropolis" # special
   colortheme: "whale"
   # https://deic-web.uab.cat/~iblanes/beamer_gallery/index_by_color.html
   fonttheme: "professionalfonts"
   # https://deic-web.uab.cat/~iblanes/beamer_gallery/index_by_font.html
   latex_engine: xelatex # for metropolis theme
   toc: false
   slide_level: 2
   keep_tex: true
   #includes:
   #   in_header: preamble.tex
header-includes:
  - \usepackage{fancyvrb}
  - \usepackage{graphicx}
---
````
````markdown

# Power of R Markdown

## Example: my fancy graph

Behold! My plot that shows the linear trend!

```{r myplot, echo = FALSE, message = FALSE, fig.align = "center", fig.height = 2, fig.width = 4}
library(tidyverse)
ggplot(mtcars, aes(mpg, disp, color = factor(cyl))) + 
  geom_point() + theme_bw(base_size = 18)
```

## Example: code and output demonstration

This is how you use `tidyverse` to fit simple linear models to each level in `cyl` .

```{r pkgshow, message = FALSE}
library(tidyverse)
mtcars %>% 
   split(.$cyl) %>% 
   map_dfr(~{
      fit <- lm(mpg ~ disp, data = .)
      slope_ests <- coef(fit)
      c(cyl = .$cyl[1], n = nrow(.), slope_ests)
   })
```

## R Markdown Motivation: More robust to modifications

```{r, echo = FALSE, out.width = "100%"}
knitr::include_graphics("images/rmd-motivation.png")
```

```{r export, include = FALSE}
library(pdftools)
pdf_convert("example-beamer2.pdf", format = "png", dpi = 200)
fns <- list.files(pattern = "example-beamer2_")
purrr::walk(fns, ~{
  file.copy(.x, paste0("images/", .x), overwrite = TRUE)
  file.remove(.x)
})
```
````
]]
.item[

`example-beamer2.pdf`

<br>

]
]

---

<div class="cursive-font" style="font-size:30pt!important;position:absolute;top:60%;left:40%;transform:rotate(20deg);width:30%;">
For those that want to learn about `xaringan`
</div>

---

# Getting started with `xaringan`

---

# Check out Earo Wang's talk at R-Ladies Auckland

Slide + Code [here](https://earo.me/talk/rladiesakl20/).

---

# Also Alison Hill's slides!

---

# <i class="fas fa-user-ninja"></i> Getting started with `xaringan` slides

```r
install.packages("xaringan")
```

`RStudio > File > New File > R Markdown > From Template > Ninja Presentation`

<br>

* You do have to know HTML/CSS
* JS helps as well

* But if you don't know then

```r
install.packages("xaringanthemer")
```

`RStudio > File > New File > R Markdown > From Template > Ninja Themed Presentation`

---

# <i class="fab fa-html5"></i> Why HTML slides?

<span class=" faa-burst animated-hover " style=" color:purple; display: -moz-inline-stack; display: inline-block; transform: rotate(0deg);">Interactivity!</span> <span class=" faa-bounce animated " style=" color:blue; display: -moz-inline-stack; display: inline-block; transform: rotate(0deg);">Animate!</span>

```r
DT::datatable(mtcars)
```

<div id="htmlwidget-88fbb92153cf29bf6047" style="width:100%;height:auto;" class="datatables html-widget"></div>
<script type="application/json" data-for="htmlwidget-88fbb92153cf29bf6047">{"x":{"filter":"none","data":[["Mazda RX4","Mazda RX4 Wag","Datsun 710","Hornet 4 Drive","Hornet Sportabout","Valiant","Duster 360","Merc 240D","Merc 230","Merc 280","Merc 280C","Merc 450SE","Merc 450SL","Merc 450SLC","Cadillac Fleetwood","Lincoln Continental","Chrysler Imperial","Fiat 128","Honda Civic","Toyota Corolla","Toyota Corona","Dodge Challenger","AMC Javelin","Camaro Z28","Pontiac Firebird","Fiat X1-9","Porsche 914-2","Lotus Europa","Ford Pantera L","Ferrari Dino","Maserati Bora","Volvo 142E"],[21,21,22.8,21.4,18.7,18.1,14.3,24.4,22.8,19.2,17.8,16.4,17.3,15.2,10.4,10.4,14.7,32.4,30.4,33.9,21.5,15.5,15.2,13.3,19.2,27.3,26,30.4,15.8,19.7,15,21.4],[6,6,4,6,8,6,8,4,4,6,6,8,8,8,8,8,8,4,4,4,4,8,8,8,8,4,4,4,8,6,8,4],[160,160,108,258,360,225,360,146.7,140.8,167.6,167.6,275.8,275.8,275.8,472,460,440,78.7,75.7,71.1,120.1,318,304,350,400,79,120.3,95.1,351,145,301,121],[110,110,93,110,175,105,245,62,95,123,123,180,180,180,205,215,230,66,52,65,97,150,150,245,175,66,91,113,264,175,335,109],[3.9,3.9,3.85,3.08,3.15,2.76,3.21,3.69,3.92,3.92,3.92,3.07,3.07,3.07,2.93,3,3.23,4.08,4.93,4.22,3.7,2.76,3.15,3.73,3.08,4.08,4.43,3.77,4.22,3.62,3.54,4.11],[2.62,2.875,2.32,3.215,3.44,3.46,3.57,3.19,3.15,3.44,3.44,4.07,3.73,3.78,5.25,5.424,5.345,2.2,1.615,1.835,2.465,3.52,3.435,3.84,3.845,1.935,2.14,1.513,3.17,2.77,3.57,2.78],[16.46,17.02,18.61,19.44,17.02,20.22,15.84,20,22.9,18.3,18.9,17.4,17.6,18,17.98,17.82,17.42,19.47,18.52,19.9,20.01,16.87,17.3,15.41,17.05,18.9,16.7,16.9,14.5,15.5,14.6,18.6],[0,0,1,1,0,1,0,1,1,1,1,0,0,0,0,0,0,1,1,1,1,0,0,0,0,1,0,1,0,0,0,1],[1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,0,0,0,0,0,1,1,1,1,1,1,1],[4,4,4,3,3,3,3,4,4,4,4,3,3,3,3,3,3,4,4,4,3,3,3,3,3,4,5,5,5,5,5,4],[4,4,1,1,2,1,4,2,2,4,4,3,3,3,4,4,4,1,2,1,1,2,2,4,2,1,2,2,4,6,8,2]],"container":"<table class=\"display\">\n  <thead>\n    <tr>\n      <th> <\/th>\n      <th>mpg<\/th>\n      <th>cyl<\/th>\n      <th>disp<\/th>\n      <th>hp<\/th>\n      <th>drat<\/th>\n      <th>wt<\/th>\n      <th>qsec<\/th>\n      <th>vs<\/th>\n      <th>am<\/th>\n      <th>gear<\/th>\n      <th>carb<\/th>\n    <\/tr>\n  <\/thead>\n<\/table>","options":{"columnDefs":[{"className":"dt-right","targets":[1,2,3,4,5,6,7,8,9,10,11]},{"orderable":false,"targets":0}],"order":[],"autoWidth":false,"orderClasses":false}},"evals":[],"jsHooks":[]}</script>

---

# <i class="fas fa-mouse-pointer"></i> Interactive plots into html slides

```r
library(plotly) # for interactive plots
g <- ggplot(mtcars) +
  aes(mpg, disp, color = factor(cyl)) +
  geom_point() + 
  theme_bw(base_size = 20)
p <- ggplotly(g)
htmltools::save_html(p, file = "example-plotly.html")
```
Doable, but slightly fiddly to embed in slides ([see Di Cook's blog](http://dicook.org/2018/08/29/getting-past-the-little-hiccups-to-getting-plotly-animations-into-slides/)).
```
<iframe src="example-plotly.html" width="550" height="500"></iframe>
```

]
.item[

]

---

# <i class="fas fa-chalkboard-teacher"></i> Side-by-side code and output demo

* See also [`flipbooks` talk by Gina Reynolds](https://rstudio.com/resources/rstudioconf-2020/flipbooks-evangeline-reynolds/) and her [`flipbookr`](https://github.com/EvaMaeRey/flipbookr) R-package.
* This uses the code from [here by me](https://gist.github.com/emitanaka/99c5673ddc8f9103dd3c8fec05ab15ea) and shortened [here by Garrick](https://gist.github.com/gadenbuie/634060984f0007bf390a931dd3b31bab).

.grid[
.item[
.scroll-fit50[
````yaml
---
title: "ggplot tutorial"
subtitle: "with kunoichi + ninjutsu theme"
author: "<br><br> Emi Tanaka"
date: "<br>2018/09/16"
output:
  xaringan::moon_reader:
    lib_dir: libs2
    css: ["kunoichi", "ninjutsu"]
    nature:
      ratio: "16:9"
      highlightLines: true
---
````
````markdown

```{r setup, include=FALSE}
knitr::opts_chunk$set(echo=TRUE)
knitr::opts_chunk$set(fig.height=6, out.width="100%")
library(ggplot2)
# reveal lines up to `upto` and highlight lines `highlight`
reveal <- function(name, upto, highlight = upto) {
  content <- knitr:::knit_code$get(name)
  content[upto] <- gsub("+", "", content[upto], fixed=T)
  content[highlight] <- paste(content[highlight], "#<<")
  content[1:upto]
}
partial_knit_chunks <- function(chunk_name) {
  # Create slide for lines 1:N for each line N in the given chunk
  idx_lines <- seq_along(knitr:::knit_code$get(chunk_name))
  partial_knit_steps <- glue::glue(
    "class: split-40",
    "count: false",
    "",
    ".column[.content[",
    "```{r plot{{idx_lines}}, eval=FALSE, code=reveal('{{chunk_name}}', {{idx_lines}})}",
    "```",
    "]]",
    ".column[.content.center[",
    "```{r output{{idx_lines}}, echo=FALSE, code=reveal('{{chunk_name}}', {{idx_lines}})}",
    "```",
    "]]",
    .open = "{{", .close = "}}", .sep = "\n"
  )
  glue::glue_collapse(partial_knit_steps, "\n---\n")
}
```

```{r complete, eval=F, echo=F}
ggplot(iris) +
  aes(Sepal.Length, Sepal.Width) +
  geom_point() +
  labs(x = "Sepal Length") +
  labs(y = "Sepal Width") +
  labs(title="The famous iris data") + 
  labs(subtitle="Data collected by Anderson, Edgar (1935)") +
  aes(color= Species) +
  theme_bw(base_size=16)
```

`r paste(knitr::knit(text = partial_knit_chunks("complete")), collapse = "\n")`

```{css, eval=TRUE}
.remark-code{ line-height: 2; }
```
````
]]
.item[

]]

---

# <i class="fas fa-book"></i> Bibiliography and citations

See [here](https://github.com/yihui/xaringan/wiki/Bibliography-and-citations) for using bibtex citation in `xaringan` slides.

<br>

## References

<a name=bib-tidyverse></a>[[1]](#cite-tidyverse) H. Wickham, M.
Averick, J. Bryan, et al. "Welcome to the tidyverse". In: _Journal of
Open Source Software_ 4.43 (2019), p. 1686. DOI:
[10.21105/joss.01686](https://doi.org/10.21105%2Fjoss.01686).

<a name=bib-xaringan></a>[[2]](#cite-xaringan) Y. Xie. _xaringan:
Presentation Ninja_. R package version 0.16. 2020. URL:
[https://CRAN.R-project.org/package=xaringan](https://CRAN.R-project.org/package=xaringan).

---

background-image: url(images/bg1.jpg)
background-size: cover
class: hide-slide-number hide-footer

<br>
<h1 class="monash-blue" style="font-size:24pt!important"><i class="fas fa-link"></i> <a href="">emitanaka.org/slides/rladiesSSA2020</a></h1>

Where to get help?

<ul>
<li>Your local R-Ladies Meetup: <a href="https://www.meetup.com/en-AU/rladies-melbourne/">Melbourne</a>, <a href="https://www.meetup.com/rladies-sydney/">Sydney</a>, <a href="https://www.meetup.com/rladies-canberra/">Canberra</a>, <a href="https://www.meetup.com/en-AU/rladies-perth/">Perth</a>, <a href="https://www.meetup.com/en-AU/rladies-adelaide/">Adelaide</a>, <a href="https://www.meetup.com/en-AU/rladies-brisbane/">Brisbane</a></li>
<li><a href="https://www.rfordatasci.com/">R4DS Community Slack</a></li>
<li><a href="https://twitter.com/search?q=%23rstats">Twitter with hastag #rstats</a></li>
<li><a href="https://community.rstudio.com/">RStudio Community</a></li>
<li><a href="https://stackoverflow.com/questions/tagged/r">Stackoverflow</a> (I answer questions tagged with `xaringan` often)</li>
</ul>
We teach <a href="https://handbook.monash.edu/2020/units/ETC5523">Communicating with Data</a> in the <a href="https://www.monash.edu/business/master-of-business-analytics">Masters of Business Analytics</a> at Monash University
</div>

.bottom_abs.width100.shade_black[

**Emi Tanaka**

Department of Econometrics and Business Statistics

<span><i class="fas  fa-envelope faa-float animated "></i></span>  emi.tanaka@monash.edu
<span><i class="fab  fa-twitter faa-float animated "></i></span>  @statsgen

30th Jun 2020 @ SSA NSW/Canberra x R-Ladies Sydney/Canberra | via Zoom

]