Making slides with Rmarkdown

# Making slides with Rmarkdown
## my two cents about xaringan
### Cheng
### Wildco DM meeting
### 2021-08-11

---

# xaringan

### /ʃaː.'riŋ.ɡan/

---
# What is it and why should I be using it?

## What is it?

### 1. A simple, in-browser, R Markdown-driven slideshow tool

### 2. It has a basic presentation model

### 3. The output is a **html5** document

---

# What is it and why should I be using it?

## Why use it?

### 1. Same reason as we use R markdown

- The reproducible workflow:

---

background-image: url(https://journals.plos.org/plosone/article/figure/image?size=medium&id=info:doi/10.1371/journal.pone.0212390.g001)
background-size: 800px
background-position: 50% 50%

# What is it and why should I be using it?

---
background-image: url(https://psyteachr.github.io/msc-data-skills/images/memes/repro_reports.jpg)
background-size: 500px
background-position: 50% 65%

# What is it and why should I be using it?

---

# What is it and why should I be using it?

## Why use it?

### 1. Same reason as we use R markdown

- The reproducible workflow

### 2. Other reasons, e.g.:
- Focus on the content, expressing yourself in next to plain text not worrying what flashy graphics and disturbing effects
- Display it in any decent browser
- Use it offline
- Store it wherever you like: Github, Dropbox
- Version control

---
# Getting started

Install the **xaringan** package from [Github](https://github.com/yihui/xaringan):

```r
remotes::install_github("yihui/xaringan")
```

- Create a new R Markdown document from the menu `File -> New File -> R Markdown -> From Template -> Ninja Presentation`;<sup>1</sup>

- Use the [RStudio Addin](https://rstudio.github.io/rstudioaddins/) "Infinite Moon Reader" to live preview the slides (every time you update and save the Rmd document, the slides will be automatically reloaded in RStudio Viewer.

- Or run `xaringan::inf_mr()`in Console

---
background-image: url(https://wildlife.forestry.ubc.ca/files/2020/03/WildCo_Logo_Horizontal.png)
background-size:20%
background-position:50% 75%
class: center, middle

# Demo

---
# Some basics

## 1. How to create a new slide?

- Use `---`, `--`, and `-`

## 2. The presentation mode

- Press `C` then press `P`. Press `H` for shortcut information.

## 3. The speaker notes

- Write it after `???`

???

I am a note

---
background-image: url(https://wildlife.forestry.ubc.ca/files/2020/03/WildCo_Logo_Horizontal.png)
background-size:20%
background-position:50% 75%
class: center, middle

# Demo

---

# Some other basics

## 1. Use 'class' (inverse, center, middle) to format a slide

- Add `class: inverse, center, middle` at the beginning of a 'slide'

---

# Some other basics

## 1. Use 'class' (inverse, center, middle) to format a slide

- Add `class: inverse, center, middle` at the beginning of a 'slide'

---

# Some other basics

## 1. Use 'class' (inverse, center, middle) to format a slide

- Add `class: inverse, center, middle` at the beginning of a 'slide'

## 2. Pull left and pull right

- Use`.pull-left[]` and `.pull-right[]`

---

# Some other basics

- Add `class: inverse, center, middle` at the beginning of a 'slide']

- Use`.pull-left[]` and `.pull-right[]`]

---
# Some other useful basics

## 1. Use 'class' (inverse, center, middle) to format a slide

- Add `class: inverse, center, middle` at the beginning of a 'slide'

## 2. Pull left and pull right

- Use`.pull-left[]` and `.pull-right[]`

## 3. Add links

- Use `[](https://);`

## 4. The [remark.js Wiki](https://github.com/gnab/remark/wiki)

---
# The most important feature(s)

```r
data(iris)
knitr::kable(head(iris), format = 'html')
```

<table>
 <thead>
  <tr>
   <th style="text-align:right;"> Sepal.Length </th>
   <th style="text-align:right;"> Sepal.Width </th>
   <th style="text-align:right;"> Petal.Length </th>
   <th style="text-align:right;"> Petal.Width </th>
   <th style="text-align:left;"> Species </th>
  </tr>
 </thead>
<tbody>
  <tr>
   <td style="text-align:right;"> 5.1 </td>
   <td style="text-align:right;"> 3.5 </td>
   <td style="text-align:right;"> 1.4 </td>
   <td style="text-align:right;"> 0.2 </td>
   <td style="text-align:left;"> setosa </td>
  </tr>
  <tr>
   <td style="text-align:right;"> 4.9 </td>
   <td style="text-align:right;"> 3.0 </td>
   <td style="text-align:right;"> 1.4 </td>
   <td style="text-align:right;"> 0.2 </td>
   <td style="text-align:left;"> setosa </td>
  </tr>
  <tr>
   <td style="text-align:right;"> 4.7 </td>
   <td style="text-align:right;"> 3.2 </td>
   <td style="text-align:right;"> 1.3 </td>
   <td style="text-align:right;"> 0.2 </td>
   <td style="text-align:left;"> setosa </td>
  </tr>
  <tr>
   <td style="text-align:right;"> 4.6 </td>
   <td style="text-align:right;"> 3.1 </td>
   <td style="text-align:right;"> 1.5 </td>
   <td style="text-align:right;"> 0.2 </td>
   <td style="text-align:left;"> setosa </td>
  </tr>
  <tr>
   <td style="text-align:right;"> 5.0 </td>
   <td style="text-align:right;"> 3.6 </td>
   <td style="text-align:right;"> 1.4 </td>
   <td style="text-align:right;"> 0.2 </td>
   <td style="text-align:left;"> setosa </td>
  </tr>
  <tr>
   <td style="text-align:right;"> 5.4 </td>
   <td style="text-align:right;"> 3.9 </td>
   <td style="text-align:right;"> 1.7 </td>
   <td style="text-align:right;"> 0.4 </td>
   <td style="text-align:left;"> setosa </td>
  </tr>
</tbody>
</table>

---
# The most important feature(s)

```r
library(ggplot2)
p <- ggplot(data=iris, aes(x = Sepal.Length, y = Sepal.Width))+ 
  geom_point(aes(color=Species, shape=Species)) +
  xlab("Sepal Length") +  ylab("Sepal Width") +
  ggtitle("Sepal Length-Width")
p
```

---

# Other things to consider

## 1. You need to learn [CSS](https://slides.yihui.org/xaringan/#35) and [Macros](https://slides.yihui.org/xaringan/#33) (javascript functions) to really manipulate your slides.

## 2. There are options like [xaringanthemer](https://pkg.garrickadenbuie.com/xaringanthemer/articles/xaringanthemer.html).

---

background-image: url(https://pics.esmemes.com/drawing-tools-meme-template-pptx-powerpoint-transitions-animations-yout-calibri-body-set-41450991.png)
background-position:50% 75%

## 3. I really miss power point shape.

---

# Last but not least

## Deploy your slides on github

## 1. Push your html output (or just the whole project) to .

## 2. In that [Repository](https://github.com/ccheng91/xaringan_demo) -> Settings -> GitHub Pages -> Source -> main -> Save

## 3. Paste the showed up link and add your html file name at the end to view.

---