Introduction To Xaringan

class: title-slide left top
background-image: url(data:image/png;base64,#img/tea1.jpg)
background-size: cover

# .white[<br>Introduction<br>To Xaringan]

## .white[Mutasim Billah]

---

.pull-left[
.center[<svg aria-hidden="true" role="img" viewBox="0 0 448 512" style="height:2em;width:1.75em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:currentColor;overflow:visible;position:relative;"><path d="M0 32v448h448V32H0zm243.8 349.4c0 43.6-25.6 63.5-62.9 63.5-33.7 0-53.2-17.4-63.2-38.5l34.3-20.7c6.6 11.7 12.6 21.6 27.1 21.6 13.8 0 22.6-5.4 22.6-26.5V237.7h42.1v143.7zm99.6 63.5c-39.1 0-64.4-18.6-76.7-43l34.3-19.8c9 14.7 20.8 25.6 41.5 25.6 17.4 0 28.6-8.7 28.6-20.8 0-14.4-11.4-19.5-30.7-28l-10.5-4.5c-30.4-12.9-50.5-29.2-50.5-63.5 0-31.6 24.1-55.6 61.6-55.6 26.8 0 46 9.3 59.8 33.7L368 290c-7.2-12.9-15-18-27.1-18-12.3 0-20.1 7.8-20.1 18 0 12.6 7.8 17.7 25.9 25.6l10.5 4.5c35.8 15.3 55.9 31 55.9 66.2 0 37.8-29.8 58.6-69.7 58.6z"/></svg><br>**JavaScript**

<img src="data:image/png;base64,#https://raw.githubusercontent.com/rstudio/hex-stickers/master/PNG/rmarkdown.png" width="20%"/><br>**R Markdown**
]
]

.pull-right[
> .small[
.my-coral[The xaringan package (Xie 2022) is an R Markdown extension] .fade[based on the JavaScript library remark.js] to generate HTML5 presentations.
]

---

```r
install.packages("xaringan")
```
.center[
<img src="data:image/png;base64,#img/naruto.gif" width="75%"/>
]

---

----

.pull-left[
.center[**New File**<br><svg aria-hidden="true" role="img" viewBox="0 0 448 512" style="height:2em;width:1.75em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:currentColor;overflow:visible;position:relative;"><path d="M201.4 342.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 274.7 86.6 137.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z"/></svg><br>**R Markdown**<br><svg aria-hidden="true" role="img" viewBox="0 0 448 512" style="height:2em;width:1.75em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:currentColor;overflow:visible;position:relative;"><path d="M201.4 342.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 274.7 86.6 137.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z"/></svg><br>**From Template**<br><svg aria-hidden="true" role="img" viewBox="0 0 448 512" style="height:2em;width:1.75em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:currentColor;overflow:visible;position:relative;"><path d="M201.4 342.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 274.7 86.6 137.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z"/></svg><br>**Ninja Presentation**]
]

---
.center[
## YAML Header
]

```r
title: "Presentation Ninja"
subtitle: "⚔<br/>with xaringan"
author: "Yihui Xie"
institute: "RStudio, PBC"
date: "2016/12/12 (updated: `r Sys.Date()`)"
```

]

```r
output:
  xaringan::moon_reader:
    lib_dir: libs                        # creates directory for libraries
    nature:
      highlightStyle: github             # highlighting syntax for code
      highlightLines: true               # true: enables code line highlighting 
      countIncrementalSlides: false      # false: disables counting of incremental slides
```
More options `xaringan::moon_reader`

]

.panel[.panel-name[Result]
<iframe src="https://slides.yihui.org/xaringan" width="100%" height="400px" data-external="1"></iframe>
]
]

---

```r
---
class: middle right
background-image: url(img/'banana.jpg')
background-size: cover

# Knock-Knock

## Who's there?

## Banana!
```

.right[.my-coral[result on next slide <svg aria-hidden="true" role="img" viewBox="0 0 512 512" style="height:1em;width:1em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:currentColor;overflow:visible;position:relative;"><path d="M0 256a256 256 0 1 0 512 0A256 256 0 1 0 0 256zM281 385c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l71-71L136 280c-13.3 0-24-10.7-24-24s10.7-24 24-24l182.1 0-71-71c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0L393 239c9.4 9.4 9.4 24.6 0 33.9L281 385z"/></svg> ]]

---
class: middle right
background-image: url('img/banana.jpg')
background-size: cover

# Knock-Knock

## Who's there?

## Banana!

---

<img src ="data:image/png;base64,#img/infinite-moon-reader.png" width="75%"/>]
]

---
background-image: url("data:image/png;base64,#img/yihui.png")
background-size: contain

---
class: title-slide left top
background-image: url(data:image/png;base64,#img/tea1.jpg)
background-size: cover

# .white[Making It Better<br>]

.white[
<svg aria-hidden="true" role="img" viewBox="0 0 512 512" style="height:2em;width:2em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:currentColor;overflow:visible;position:relative;"><path d="M448 96V224H288V96H448zm0 192V416H288V288H448zM224 224H64V96H224V224zM64 288H224V416H64V288zM64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64z"/></svg> .black[some text for space] <svg aria-hidden="true" role="img" viewBox="0 0 512 512" style="height:2em;width:2em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:currentColor;overflow:visible;position:relative;"><path d="M448 80c8.8 0 16 7.2 16 16V415.8l-5-6.5-136-176c-4.5-5.9-11.6-9.3-19-9.3s-14.4 3.4-19 9.3L202 340.7l-30.5-42.7C167 291.7 159.8 288 152 288s-15 3.7-19.5 10.1l-80 112L48 416.3l0-.3V96c0-8.8 7.2-16 16-16H448zM64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64zm80 192a48 48 0 1 0 0-96 48 48 0 1 0 0 96z"/></svg>
]

---

Horizontally

```r
left,
*center,
right
```

----

Vertically

```r
top, 
*middle, 
bottom 
```
]

```r
---

*class: center, middle

# Slide with centered content in the middle

This content is also centered and in the middle of the slide

---
```

.right[.my-coral[example on next slide <svg aria-hidden="true" role="img" viewBox="0 0 512 512" style="height:1em;width:1em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:currentColor;overflow:visible;position:relative;"><path d="M0 256a256 256 0 1 0 512 0A256 256 0 1 0 0 256zM281 385c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l71-71L136 280c-13.3 0-24-10.7-24-24s10.7-24 24-24l182.1 0-71-71c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0L393 239c9.4 9.4 9.4 24.6 0 33.9L281 385z"/></svg> ]]
]

---
class: center, middle

## Slide with centered content and aligned with the middle

This content is also centered and aligned with the middle of the slide

---

```r
*.left[words]
.center[words]
*.right[words]
```
]

# Slide with some text aligned

*.left[We can start writing a sentence on the left...]

*.right[...and finish it on the right.]

---
```

]

---
class: center, middle

## Slide with some text aligned

---

.panelset[
.panel[.panel-name[Equal]
.pull-left[
**`.pull-left[]`** class pulls content to<br>the left 47%]

.panel[.panel-name[Narrow-Wide]
.left-column[
**`.left-column[]` places content into a column 20% wide**

And text is a little lighter
]

It also has a little bit of padding on the top]
]
]

---
.center[
## Panel
]

```r
xaringanExtra::use_panelset()
```
]

```r
.panelset[
.panel[.panel-name[Name]
A Panel
]

]
]

---
.center[
## Pictures
]
.panelset[

```r
knitr::include_graphics("img/book.jpg")
```
]

```markdown
![](img/book.jpg)
```
]
.pull-right[
![](data:image/png;base64,#img/book.jpg)]
]
]

---
class: title-slide left top
background-image: url(data:image/png;base64,#img/tea1.jpg)
background-size: cover

## .white[Don't Forget <svg aria-hidden="true" role="img" viewBox="0 0 581 512" style="height:2em;width:2.27em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:currentColor;overflow:visible;position:relative;"><path d="M581 226.6C581 119.1 450.9 32 290.5 32S0 119.1 0 226.6C0 322.4 103.3 402 239.4 418.1V480h99.1v-61.5c24.3-2.7 47.6-7.4 69.4-13.9L448 480h112l-67.4-113.7c54.5-35.4 88.4-84.9 88.4-139.7zm-466.8 14.5c0-73.5 98.9-133 220.8-133s211.9 40.7 211.9 133c0 50.1-26.5 85-70.3 106.4-2.4-1.6-4.7-2.9-6.4-3.7-10.2-5.2-27.8-10.5-27.8-10.5s86.6-6.4 86.6-92.7-90.6-87.9-90.6-87.9h-199V361c-74.1-21.5-125.2-67.1-125.2-119.9zm225.1 38.3v-55.6c57.8 0 87.8-6.8 87.8 27.3 0 36.5-38.2 28.3-87.8 28.3zm-.9 72.5H365c10.8 0 18.9 11.7 24 19.2-16.1 1.9-33 2.8-50.6 2.9v-22.1z"/></svg><br>]

.white[
<svg aria-hidden="true" role="img" viewBox="0 0 512 512" style="height:2em;width:2em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:currentColor;overflow:visible;position:relative;"><path d="M64 256V160H224v96H64zm0 64H224v96H64V320zm224 96V320H448v96H288zM448 256H288V160H448v96zM64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64z"/></svg> .black[text for space] <svg aria-hidden="true" role="img" viewBox="0 0 512 512" style="height:2em;width:2em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:currentColor;overflow:visible;position:relative;"><path d="M24 32c13.3 0 24 10.7 24 24V408c0 13.3 10.7 24 24 24H488c13.3 0 24 10.7 24 24s-10.7 24-24 24H72c-39.8 0-72-32.2-72-72V56C0 42.7 10.7 32 24 32zM128 136c0-13.3 10.7-24 24-24l208 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-208 0c-13.3 0-24-10.7-24-24zm24 72H296c13.3 0 24 10.7 24 24s-10.7 24-24 24H152c-13.3 0-24-10.7-24-24s10.7-24 24-24zm0 96H424c13.3 0 24 10.7 24 24s-10.7 24-24 24H152c-13.3 0-24-10.7-24-24s10.7-24 24-24z"/></svg>
]

---

<div class="datatables html-widget html-fill-item" id="htmlwidget-09ffa8ee2ab74c5914df" style="width:100%;height:auto;"></div>
<script type="application/json" data-for="htmlwidget-09ffa8ee2ab74c5914df">{"x":{"filter":"none","vertical":false,"fillContainer":false,"data":[["1","2","3","4","5","6"],[5.1,4.9,4.7,4.6,5,5.4],[3.5,3,3.2,3.1,3.6,3.9],[1.4,1.4,1.3,1.5,1.4,1.7],[0.2,0.2,0.2,0.2,0.2,0.4],["setosa","setosa","setosa","setosa","setosa","setosa"]],"container":"<table class=\"display\">\n  <thead>\n    <tr>\n      <th> <\/th>\n      <th>Sepal.Length<\/th>\n      <th>Sepal.Width<\/th>\n      <th>Petal.Length<\/th>\n      <th>Petal.Width<\/th>\n      <th>Species<\/th>\n    <\/tr>\n  <\/thead>\n<\/table>","options":{"pageLength":2,"columnDefs":[{"className":"dt-right","targets":[1,2,3,4]},{"orderable":false,"targets":0}],"order":[],"autoWidth":false,"orderClasses":false,"lengthMenu":[2,10,25,50,100]}},"evals":[],"jsHooks":[]}</script>

```r
DT::datatable(head(iris), fillContainer = TRUE, options = list(pageLength = 2))
```

---

## gt Table

---
class: center

## gt Table
<img src ="data:image/png;base64,#img/gt_tbl.png" width="38%"/>

---
class: center

## gt Table

---

## Plot (Default)

![](data:image/png;base64,#xaringan-intro_files/figure-html/unnamed-chunk-15-1.png)

---

## Plot (match the theme)

![](data:image/png;base64,#xaringan-intro_files/figure-html/unnamed-chunk-17-1.png)

---

---

```r
library(ggplot2)
(g <- ggplot(mpg) + aes(hwy, cty, color = class) + geom_point())
```
.center[
**Basic Plot with Default Theme**
]

```r
g + xaringanthemer::theme_xaringan(text_font_size = 16, title_font_size = 18) +
  ggtitle("A Plot About Cars")
```
.center[
**Plot with Matched Theme(theme defined by `xaringan-themer.css`)**
]

---