MATH/COSC 3570 Data Science

# MATH/COSC 3570 Data Science
## ⚔<br />Presentation - xaringan Example
### Dr. Cheng-Han Yu
### Marquette University
### 2021/12/25 (updated: 2021-12-25)

---

# xaringan

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

.pull-left[
<img src="data:image/png;base64,#https://upload.wikimedia.org/wikipedia/commons/b/be/Sharingan_triple.svg" width="70%" style="display: block; margin: auto;" />

]
.pull-right[
<img src="data:image/png;base64,#https://raw.githubusercontent.com/rstudio/hex-stickers/master/PNG/xaringan.png" width="70%" style="display: block; margin: auto;" />

]

???

Image credit: [Wikimedia Commons](https://commons.wikimedia.org/wiki/File:Sharingan_triple.svg)

---
# Install the **xaringan** Package

```r
## install from CRAN
install.packages('xaringan')
```

```r
# from GitHub
remotes::install_github('yihui/xaringan')
```

???
- or use the [RStudio Addin](https://rstudio.github.io/rstudioaddins/)<sup>2</sup> "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.

[2] See [#2](https://github.com/yihui/xaringan/issues/2) if you do not see the template or addin in RStudio.
]

---
# Xaringan Template
`File > New File > R Markdown > From Template > Ninja Presentation`

---
# YAML Metadata

- The output is `xaringan::moon_reader`

```yaml
---
title: "MATH/COSC 3570 Data Science"
subtitle: "⚔<br/>Presentation - xaringan Example"
author: "Dr. Cheng-Han Yu"
institute: "Marquette University"
date: "2021/12/25 (updated: 2021-12-25)"
output:
  xaringan::moon_reader:
    lib_dir: libs
    nature:
      highlightStyle: github
      highlightLines: true
      countIncrementalSlides: false
---
```

See the help page ?xaringan::moon_reader for all possible options that you can use.

---
# Seperate Slides

- We use `---` to generate a new slide.
- The dashes must be directly followed by a line break.
- There must not be any other characters after the dashes (not even white spaces!)

```md
---

One slide

---

Another slide
```

---
# Property `class`

### Horizontal

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

<hr>

### Vertical

```
*top, 
middle, 
bottom 
```

]

```r
---

*class: center, middle

# Slide with centered content in the middle

My name is Cheng-Han. I love data science!

---
```
]

---

# Slide with centered content in the middle

My name is Cheng-Han. I love data science!

---

# Align some text only

```
.left[words]

```r
---

# Slide with some aligned text

My name is Cheng-Han. I love

*.left[data science]

---
```
]

---

# Slide with some aligned text

My name is Cheng-Han. I love

---
# Incremental Slides

```
# Hi there

My name is Cheng-Han

I love data science

`#Rprogramming`

and Marquette!
```
]

### Hi there

My name is Cheng-Han
{{content}}

]

I love data science
{{content}}

`#Rprogramming`
{{content}}

and Marquette!

---

# Dark Background and Light Words

```r
---

# Dark Background and Light Words
```

- You can define your own CSS rules, and include the CSS file (say, `my-style.css`) via the `css` option.

```yaml
---
output:
  xaringan::moon_reader:
    css: "my-style.css"
---
```

---
# Background images

Like `class`, add the background image properties right below `---` before slide content.

```r
---
class: center, middle
background-size: initial
background-image: url(https://bit.ly/3syBdIo)
```

- `background-image: url(https://blah.bla)`
- `background-size:`
    - `cover` --> rescales + crops with no empty space
    - `contain` --> rescales only
- `background-position:` play with [this](https://www.w3schools.com/cssref/pr_background-position.asp)

If it is a url: `url(https://bit.ly/3syBdIo)`

If it is a local image, use relative file paths: `url(./img/mu_white.png)`

---
class: center, middle
background-size: initial
background-image: url(data:image/png;base64,#https://bit.ly/3syBdIo)

# background-size: initial

Image size: 721 × 627

---
class: center, middle
background-image: url(data:image/png;base64,#https://bit.ly/3syBdIo)
background-size: cover

# background-size: cover

---
background-image: url(data:image/png;base64,#https://bit.ly/3syBdIo)
background-size: contain
class: center, middle

# background-size: contain

---
.left-column[
# Two-columns
```
.pull-left[
words...
![](image-link)
]

![Image of Momtocat](data:image/png;base64,#http://bit.ly/momtocat)

]

![Image of Poptocat2](data:image/png;base64,#https://octodex.github.com/images/poptocat_v2.png)

]
]

[2] You can also similarly use `.left-column[]` and `.right-column[]`. The sizes are then 20% and 75%, respectively.
]

---
# Code Highlighting

Why? It makes it more readable 👀

```r
---
title: "MATH/COSC 3570 Data Science"
subtitle: "⚔<br/>Presentation - xaringan Example"
author: "Dr. Cheng-Han Yu"
date: "`r Sys.Date()`"
output: 
  xaringan::moon_reader:
*   nature:
*     highlightStyle: github
*     highlightLines: true
---
```

The [highlight style options are](https://github.com/gnab/remark/wiki/Configuration):

+ `arta`, `ascetic`, `dark`, `default`, `far`, `github`, `googlecode`,   `idea`, `ir-black`, `magula`, `monokai`, `rainbow`, `solarized-dark`, `solarized-light`, `sunburst`, `tomorrow`, `tomorrow-night-blue`, `tomorrow-night-bright`, `tomorrow-night`, `tomorrow-night-eighties`, `vs`, `zenburn`.
  
  
---

# Highlight Code Input

Using the trailing comment `#<<` to highlight code input lines:

````markdown
```{r tidy=FALSE}
library(ggplot2)
ggplot(mtcars) + 
  aes(mpg, disp) + 
  geom_point() +   #<<
  geom_smooth()    #<<
```
````
]

```r
library(ggplot2)
ggplot(mtcars) + 
  aes(mpg, disp) + 
* geom_point() +
* geom_smooth()
```
]

---
# Highlight Code Output

````md
```{r, highlight.output=c(1, 3)}
head(iris)
```
````

```
*##   Sepal.Length Sepal.Width Petal.Length Petal.Width Species
## 1          5.1         3.5          1.4         0.2  setosa
*## 2          4.9         3.0          1.4         0.2  setosa
## 3          4.7         3.2          1.3         0.2  setosa
## 4          4.6         3.1          1.5         0.2  setosa
## 5          5.0         3.6          1.4         0.2  setosa
## 6          5.4         3.9          1.7         0.4  setosa
```

Other options:

+ `highlight.output = TRUE`
+ `highlight.output = 1:4`
+ `highlight.output = c(TRUE, FALSE)`

What do they mean?

---
# Tables

Make sure it is in the HTML format (instead of Markdown or other formats)

```r
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>

.footnote[
You can set this as a global option for all your slides using [`options(knitr.table.format = "html")`](https://github.com/yihui/knitr/blob/cf7664894e237e71e4fd9c633df9ae6cd87ea382/R/table.R)
]

---
# HTML Widgets

```r
library(leaflet)
leaflet() %>% addTiles() %>% setView(-87.931, 43.038, zoom = 17)
```

<div id="htmlwidget-e3bb332cd5702c077fba" style="width:100%;height:432px;" class="leaflet html-widget"></div>
<script type="application/json" data-for="htmlwidget-e3bb332cd5702c077fba">{"x":{"options":{"crs":{"crsClass":"L.CRS.EPSG3857","code":null,"proj4def":null,"projectedBounds":null,"options":{}}},"calls":[{"method":"addTiles","args":["//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",null,null,{"minZoom":0,"maxZoom":18,"tileSize":256,"subdomains":"abc","errorTileUrl":"","tms":false,"noWrap":false,"zoomOffset":0,"zoomReverse":false,"opacity":1,"zIndex":1,"detectRetina":false,"attribution":"© <a href=\"http://openstreetmap.org\">OpenStreetMap<\/a> contributors, <a href=\"http://creativecommons.org/licenses/by-sa/2.0/\">CC-BY-SA<\/a>"}]}],"setView":[[43.038,-87.931],17,[]]},"evals":[],"jsHooks":[]}</script>

---
# The Title Slide
- Has the classes `inverse`, `center`, `middle`, and `title-slide` by default.
- Either customize the `.title-slide` class, or provide a custom vector of classes via the `titleSlideClass` option under the `nature` option.

```yaml
---
output:
  xaringan::moon_reader:
    nature:
      titleSlideClass: ["right", "top", "my-title"]
---
```

- Disable the automatic title slide via the `seal` option and create one manually by yourself:

```r
---
output:
  xaringan::moon_reader:
    seal: false
---

# My Own Title

### Author

Whatever you want to put on the title slide.
```

---

# Creat Your Title Slide

]

From [.Rmd](https://github.com/juliasilge/deming2018/blob/master/intro.Rmd)

```r
output:
  xaringan::moon_reader:
*   seal: false

---

# Text Mining

### USING TIDY PRINCIPLES

---
```

]

---

# Built-in themes

For each, theme and fonts are separate files:

```r
names(xaringan:::list_css())
```

```
##  [1] "chocolate-fonts"  "chocolate"        "default-fonts"    "default"         
##  [5] "duke-blue"        "fc-fonts"         "fc"               "glasgow_template"
##  [9] "hygge-duke"       "hygge"            "ki-fonts"         "ki"              
## [13] "kunoichi"         "lucy-fonts"       "lucy"             "metropolis-fonts"
## [17] "metropolis"       "middlebury-fonts" "middlebury"       "nhsr-fonts"      
## [21] "nhsr"             "ninjutsu"         "rladies-fonts"    "rladies"         
## [25] "robot-fonts"      "robot"            "rutgers-fonts"    "rutgers"         
## [29] "shinobi"          "tamu-fonts"       "tamu"             "uio-fonts"       
## [33] "uio"              "uo-fonts"         "uo"               "uol-fonts"       
## [37] "uol"              "useR-fonts"       "useR"             "uwm-fonts"       
## [41] "uwm"
```

To use, edit your YAML (no file extensions):

```r
output:
  xaringan::moon_reader:
*   css: [default, metropolis, metropolis-fonts]
```

---
class: inverse
background-image: url(data:image/png;base64,#https://raw.githubusercontent.com/gadenbuie/xaringanthemer/main/man/figures/logo.png)
background-size: contain

# More Themes

---
# Things to Know

- If you know HTML/CSS, you'll be able to freely customize the style.

- The HTML output file generated from **xaringan** is not self-contained by default, meaning that **none** of the external dependencies such as images or JavaScript libraries will be embedded in the HTML output file by default.

- You can turn the self-contained mode on via:
```yaml
output:
  xaringan::moon_reader:
    self_contained: true
```

---

# Resources

- [Author Yihui Xie's Template](https://slides.yihui.org/xaringan/#1)
- [Advanced R Markdown Workshop](https://arm.rbind.io/)
- [MAKING GREAT SLIDES WITH XARINGAN](https://presentable-user2021.netlify.app/)