How I met xaringan

An R user who would like to share awesome things in R

Meet xaringan

Beautiful and concise layout

Meet xaringan

Code highlighting and live demos

Meet xaringan

Version control and easy distribution

Meet xaringan

It animates

Infinite moon reader 👩‍🚀

Do you use ctrl + K to render your slides?

• So, Are you tired from scrolling down to the page you were working on?

Turn on the Moon Reader from either the pacakge or the addins

From now on, the slides will auto-reload every time you save it

Infinite moon reader 👩‍🚀

Themes

• Built-in themes

names(xaringan:::list_css())

##  [1] "chocolate-fonts"  "chocolate"        "default-fonts"   
##  [4] "default"          "duke-blue"        "fc-fonts"        
##  [7] "fc"               "hygge-duke"       "hygge"           
## [10] "kunoichi"         "lucy-fonts"       "lucy"            
## [13] "metropolis-fonts" "metropolis"       "middlebury-fonts"
## [16] "middlebury"       "ninjutsu"         "rladies-fonts"   
## [19] "rladies"          "robot-fonts"      "robot"           
## [22] "rutgers-fonts"    "rutgers"          "shinobi"         
## [25] "tamu-fonts"       "tamu"             "uo-fonts"        
## [28] "uo"               "uol-fonts"        "uol"

These go to your YAML

output:
  xaringan::moon_reader:
    css: [default, rladies, rladies-fonts]

Somewhere in the middle?

Add my-style.css to the YAML with the current css file

output:
  xaringan::moon_reader:
    css: [default, rladies, lucy-fonts, my-style.css]

While sitting in my-style.css file,

.red { color: red; }
.remark-code-line-highlighted { background-color: #e8c9e9; }
.remark-code, .remark-inline-code { 
    color: #7c347f;
    font-weight: 300;
}

I've changed it to red.

Where to find the themes files?

You can find CSS files here. However, don't save your own CSS file here.

- start with an existing theme

- try change something and see what happens

Meet slidex

It converts PowerPoint slides to xaringan slides

Start with the YAML

---
title: "How to Make Slides in R"
output:
  xaringan::moon_reader
---

---
title: "How to Make Slides in R"
subtitle: "Using xaringan"
author: "Zhi Yang"
date: "2019/2/26"
output:
  xaringan::moon_reader:
    css: ["default", "rladies", 
          "lucy-fonts", 
          "my-style.css"]
    lib_dir: libs
    nature:
      highlightStyle: github
      highlightLines: true
      countIncrementalSlides: false
    #chakra: "remark.js" 
---

Make new slides

Three dashes --- gives a new slide

---
title: "How to Make Slides in R"
output:
  xaringan::moon_reader
---
A slide
---
Another slide

Align an entire slide

left,
center, 
right

top,
middle, 
bottom

---
class: center, middle 
# Demo slide
This is a center- and middle- aligned slide.

Align the text

.left[texts]
.center[texts] 
.right[texts]

---
class: center, middle  
# Demo slide
.right[This is a center- and middle- aligned slide.]

Incremental reveals

# Hi
Did you know
--
you can
--
do this?

Hi

Did you know

you can

do this?

Code and higtlight

use the trailing comment #<< to highlight specific lines of the code

```{r}
namedata <- babynames %>%
  filter(name == "Orange") %>% 
  filter(sex == "M") %>% #<< 
  arrange(year)
head(namedata) 
```

namedata <- babynames %>%
  filter(name == "Orange") %>% 
  filter(sex == "M") %>%
  arrange(year)
head(namedata)

Output and higtlight

use the chunk option highlight.output to highlight specific lines of the text output

```{r head, highlight.output=c(1, 3)}
namedata <- babynames %>%
  filter(name == "Orange") %>% 
  filter(sex == "M") %>% #<< 
  arrange(year)
head(namedata) 
```

## # A tibble: 6 x 5
##    year sex   name       n      prop
##   <dbl> <chr> <chr>  <int>     <dbl>
## 1  1881 M     Orange     9 0.0000831
## 2  1882 M     Orange     8 0.0000656
## 3  1883 M     Orange    11 0.0000978
## 4  1884 M     Orange    13 0.000106 
## 5  1885 M     Orange     8 0.000069 
## 6  1886 M     Orange     7 0.0000588

Two-columns

.pull-left[
```{r refname echo=TRUE, eval=FALSE}
your R code 
```
]
.pull-right[
```{r ref.label="refname" echo=FALSE, eval=TRUE}
```
]

.pull-left and .pull-right provide 47% width

namedata <- babynames %>%
  filter(name == "Orange") %>% 
  filter(sex == "M") %>%
  arrange(year)
head(namedata)

## # A tibble: 6 x 5
##    year sex   name       n      prop
##   <dbl> <chr> <chr>  <int>     <dbl>
## 1  1881 M     Orange     9 0.0000831
## 2  1882 M     Orange     8 0.0000656
## 3  1883 M     Orange    11 0.0000978
## 4  1884 M     Orange    13 0.000106 
## 5  1885 M     Orange     8 0.000069 
## 6  1886 M     Orange     7 0.0000588

Two-columns

.left-column[
```{r evel = FALSE}
Your R code
```
]
.right-column[
```{r evel = FALSE, echo = FALSE}
Your R code
```
]

.left-column and .right-column provide 20% and 75% width

head(gss_cat)

## # A tibble: 6 x 9
##    year marital     age race  rincome   partyid    relig    denom   tvhours
##   <int> <fct>     <int> <fct> <fct>     <fct>      <fct>    <fct>     <int>
## 1  2000 Never ma~    26 White $8000 to~ Ind,near ~ Protest~ Southe~      12
## 2  2000 Divorced     48 White $8000 to~ Not str r~ Protest~ Baptis~      NA
## 3  2000 Widowed      67 White Not appl~ Independe~ Protest~ No den~       2
## 4  2000 Never ma~    39 White Not appl~ Ind,near ~ Orthodo~ Not ap~       4
## 5  2000 Divorced     25 White Not appl~ Not str d~ None     Not ap~       1
## 6  2000 Married      25 White $20000 -~ Strong de~ Protest~ Southe~      NA

Add a table

head(iris, n = 3)

##   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

knitr::kable(head(iris, n = 3), format = "html")

Set the table to be the HTML format

Add a plot

par(mar = c(4, 4, 1, 0.1))
plot(cars, pch = 19, col = "darkgray", las = 1)

use fig.height and fig.width to control the size

Add an image

![](/imgs/ocrug.jpeg)

Resize it

Should it be something like ![](/imgs/ocrug.jpeg){width=10px} ? 😢

Option 1:

<img src="imgs/ocrug.jpeg" width="20%" />

Option 2:

```{r out.width = "20%", eval=TRUE}
knitr::include_graphics("imgs/ocrug.jpeg")
```

Full screen

background-image: url(/imgs/ocrug.jpeg)
background-size: cover

Rescale only

background-image: url(/imgs/ocrug.jpeg)
background-size: contain

Change position

background-image: url(/imgs/ocrug.jpeg)
background-size: contain
background-position: bottom

Use online image

background-image: url(https://secure.meetupstatic.com/photos/event/2/b/9/e/600_471491166.jpeg)
background-size: contain
background-position: bottom

Logos

background-image: url(imgs/ocrug_logo.png), url(imgs/ocrug_logo.png)
background-position: 0% 100%, 100% 0%
background-size: 30%, 10%

Hosting slides

Netlify 💻

Netlify 💻

Netlify 💻