xaringan.knit

background-image: url("https://images.unsplash.com/photo-1638366271870-8b3d428f27f8?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1771&q=80")
background-size: cover

# .black.big-text[Slide<br>Crafting]
## .black[Session - 5]

.footnote[
.white[Image credits:][Markus Spiske](https://images.unsplash.com/photo-1638366271870-8b3d428f27f8?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80)
]

---

background-image: url(images/xaringan-logo.png)
background-size: contain
background-position: right

# .big-text[R<br>Package]

---

# xaringan

- xaringan package to be a Presentation Ninja 🤺

- "for creating slideshows with remark.js through R Markdown"

- [Xie Yihui](https://yihui.org/en/)

---

# Packages required:

```r
library(palmerpenguins) # to access penguin data

library(xaringan)
library(xaringanthemer)
library(xaringanExtra)
```

---
class: center

# File `\(\longrightarrow\)` New File `\(\longrightarrow\)` R Markdown

---
class: center

# Template `\(\rightarrow\)` Ninja Presentation

---
class: center

# Save this Rmd file

---
class: center

<img src="images/xar3.png" width="65%" style="display: block; margin: auto;" />
]

### xaringan output

<img src="images/xar4.png" width="566" style="display: block; margin: auto;" />
]

---
class: center

<img src="images/xar3.png" width="65%" style="display: block; margin: auto;" />
]

### xaringan slide `\(\rightarrow\)` browser

<img src="images/xar5-browser.png" width="566" style="display: block; margin: auto;" />
]

- We need to click `Inifinite Moon Reader` only to start the slideshow. To see the changes made in the slides just save the document `ctrl + s`

---

# Using xaringan how to:

1. create a new slide

1. hide an existing slide

1. heading, subheadings, points and normal text

1. include images

--
    - as background
--
    - as part of slide
--

1. make plots

1. include tables

1. in-text R output

1. create columns

---

1. Use `---` to create a new slide

1. `exclude:true` To hide an existing slide

1. Slide text sizes:

- `#` for main heading

- `##` for sub-heading

- `####` for sub-sub-heading

* indented `*` for sub-point1
  * indented `*` for sub-point2
  * indented `*` for sub-point3

- `-` for normal text size

---

# To include images using:

###  CSS `background` option:

- `background-image: url("path of the image")` = path of the image

- `background-size: contain, cover, 50%, 70%` = size of the image

- `background-position: left top` = position of the image

---

# To include images using:

###  `knitr` chunk option:

```r
knitr::include_graphics("path of the image")
```

---

# To include plots

```r
library(palmerpenguins)
ggplot(penguins, aes(x = species)) +
  geom_bar()
```

---

# To include tables

```r
library(kableExtra)
library(tidyverse)

penguins %>% 
  drop_na() %>% 
  head() %>% 
  kable() 
```

<table>
 <thead>
  <tr>
   <th style="text-align:left;"> species </th>
   <th style="text-align:left;"> island </th>
   <th style="text-align:right;"> bill_length_mm </th>
   <th style="text-align:right;"> bill_depth_mm </th>
   <th style="text-align:right;"> flipper_length_mm </th>
   <th style="text-align:right;"> body_mass_g </th>
   <th style="text-align:left;"> sex </th>
   <th style="text-align:right;"> year </th>
  </tr>
 </thead>
<tbody>
  <tr>
   <td style="text-align:left;"> Adelie </td>
   <td style="text-align:left;"> Torgersen </td>
   <td style="text-align:right;"> 39.1 </td>
   <td style="text-align:right;"> 18.7 </td>
   <td style="text-align:right;"> 181 </td>
   <td style="text-align:right;"> 3750 </td>
   <td style="text-align:left;"> male </td>
   <td style="text-align:right;"> 2007 </td>
  </tr>
  <tr>
   <td style="text-align:left;"> Adelie </td>
   <td style="text-align:left;"> Torgersen </td>
   <td style="text-align:right;"> 39.5 </td>
   <td style="text-align:right;"> 17.4 </td>
   <td style="text-align:right;"> 186 </td>
   <td style="text-align:right;"> 3800 </td>
   <td style="text-align:left;"> female </td>
   <td style="text-align:right;"> 2007 </td>
  </tr>
  <tr>
   <td style="text-align:left;"> Adelie </td>
   <td style="text-align:left;"> Torgersen </td>
   <td style="text-align:right;"> 40.3 </td>
   <td style="text-align:right;"> 18.0 </td>
   <td style="text-align:right;"> 195 </td>
   <td style="text-align:right;"> 3250 </td>
   <td style="text-align:left;"> female </td>
   <td style="text-align:right;"> 2007 </td>
  </tr>
  <tr>
   <td style="text-align:left;"> Adelie </td>
   <td style="text-align:left;"> Torgersen </td>
   <td style="text-align:right;"> 36.7 </td>
   <td style="text-align:right;"> 19.3 </td>
   <td style="text-align:right;"> 193 </td>
   <td style="text-align:right;"> 3450 </td>
   <td style="text-align:left;"> female </td>
   <td style="text-align:right;"> 2007 </td>
  </tr>
  <tr>
   <td style="text-align:left;"> Adelie </td>
   <td style="text-align:left;"> Torgersen </td>
   <td style="text-align:right;"> 39.3 </td>
   <td style="text-align:right;"> 20.6 </td>
   <td style="text-align:right;"> 190 </td>
   <td style="text-align:right;"> 3650 </td>
   <td style="text-align:left;"> male </td>
   <td style="text-align:right;"> 2007 </td>
  </tr>
  <tr>
   <td style="text-align:left;"> Adelie </td>
   <td style="text-align:left;"> Torgersen </td>
   <td style="text-align:right;"> 38.9 </td>
   <td style="text-align:right;"> 17.8 </td>
   <td style="text-align:right;"> 181 </td>
   <td style="text-align:right;"> 3625 </td>
   <td style="text-align:left;"> female </td>
   <td style="text-align:right;"> 2007 </td>
  </tr>
</tbody>
</table>

---

# In-text R output

- penguins data have a sample of `\(n\)` = 344 on total 8 variables.

- math expressions

`\(a + b = \sigma - \sum{x}_2^2\)`

---

# Column division of slide

- a

- b
  - c
]

- apple
- boy
- cat
]

---

# Slide `class`

- class can be assigned to each slide

- it decides how all elements of one particular slide will look like

---
class: center

# Slide `class`

- class can be assigned to each slide

- it decides how all elements of one particular slide will look like

- `class: center`

---

# Slide `class`

- class can be assigned to each slide

- it decides how all elements of one particular slide will look like

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

---

# Extend the power of xaringan:

- using R packages like [xaringanExtra](https://pkg.garrickadenbuie.com/xaringanExtra/#/README?id=xaringanextra)

- learn little about [CSS](https://www.w3schools.com/css/)

- use [cheatsheets](https://rstudio.com/resources/cheatsheets/)

---

background-image: url("images/giphy.gif")
background-position: 10%
background-color: #353935
background-size: 35%