R Xaringan Package Slide Deck

# <code>R</code> Xaringan Package Slide Deck
## ScPo template
### Florian Oswald
### SciencesPo Paris </br> 2019-08-18

---

background-size: 100%
background-image: url(https://media.giphy.com/media/94iS62lx8CRQA/giphy.gif)

???

Image test. Taken from google.

---

background-size: 100%
background-image: url(https://media.giphy.com/media/J3GSVuDnnYeDEd4Nrr/giphy.gif)

???

Second Image test. Taken from google.

---

layout: true
  
<div class="my-footer"><img src="./img/logo/ScPo-shield.png" style="height: 60px;"/></div>

---

# Attribution

- This template is based on a fork of
[jvcasillas](https://github.com/jvcasillas/ru_xaringan) template for Rutgers University.

- I changed some small things in the CSS.
    1. Used SciencesPo Logos
    1. Added a ScPo logo in the footer of standard slides.
    
- The template is now here: https://github.com/ScPoEcon/scpo_xaringan. Visit to check out instructions.

---

# Maths without Beamer!

## You must be kidding me.

You can write `$\LaTeX$` math expressions inside a pair of dollar signs, e.g. `$\alpha+\beta$` renders `$\alpha+\beta$`. (No blanks after `$`!). You can use the display style with double dollar signs:

```latex
$$\bar{X}=\frac{1}{n}\sum_{i=1}^nX_i$$
```

`$$\bar{X}=\frac{1}{n}\sum_{i=1}^nX_i$$`

## OK, fine. What about multiple lines?

---

# Multiple Lines of Math

```latex
$$\begin{align}
x &= 3 \\
y &= \log z  \\
\psi &= \int \frac{x}{y} dx
\end{align}$$
```

`$$\begin{align}
x &= 3 \\
y &= \log{z} \\
\psi &= \int \frac{x}{y} dx
\end{align}$$`

* Must be written *exactly* like that (no spaces or linebreaks)

---

# (Working) Code in a Slideshow?

- Sometimes it is useful to show code.

- Particularly when teaching.

- You want that code to *actually work* (i.e. not just copy and paste input and output into your slides).

- Right?

---

# Standard slide with R code

This slide runs code and shows the output.

```r
library(tidyverse)
# can highlight lines of code!
ggplot(cars, aes(x = dist, y = speed)) + geom_point() + 
*   geom_smooth(method = 'lm', formula = y ~ poly(x, 2)) 
```

---

# Slide with table

A table directly generared from `R` code.

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

---

# Slide basics

- Unordered lists
  - can be created using "-"
  - and they can be nested using 2 or 4 spaces
- We can also make `blockquotes`
  - we can use `<ru-blockquote>text</ru-blockquote>` 
  - or `>`

<ru-blockquote>This is a blocked quote</ru-blockquote>

- Footnotes<sup>1</sup>

---

# More basics

### Ordered list

1. one
2. two 
3. three

- Spaced

- List

- with increments

An incremental 
--
sentence with 
--
separation.

---

---
background-image: url(https://github.com/yihui/xaringan/releases/download/v0.0.2/karl-moustache.jpg)
background-position: 50% 50%
class: center, bottom, inverse

# You only live once!

---

layout: true
  
<div class="my-footer"><img src="./img/logo/ScPo-shield.png" style="height: 60px;"/></div>

---
background-image: url("./img/logo/ScPo-econ.png")
background-position: 90% 50%
background-size: 300pt

# Another example

### Lists to the left

- We can place images
- anywhere on the screen
- by using **background-image**
- in conjunction with 
- **background-position**

### Image to the right

- This can replicate my 'float right' hack
- We can control the 
- size of the image
- by using the 
- **background-size** option

---

---
class: center, middle

# Text adjustments

It is also possible to change the .blue[color] of any  
text by using...

For example

will make text .grey[grey]

We can do this with white, .grey[grey], .black[black], .RUred[red] and .blue[blue].

To really make text stand out we can just use \*\*text\*\* like **this**.

---

layout: true
  
<div class="my-footer"><img src="./img/logo/ScPo-shield.png" style="height: 60px;"/></div>

---

# Two columns!

### Some things on the left

1. List of things

1. Plain Markdown;

1. blah blah

1. Plain Markdown;

]

### and other things on the right

1. We do this by using the

1. \.pull-left[] and \.pull-right[]

1. commands. Just put any text inside the

1. brackets and you're good to go

]

---

# R code and highlighting (I never use this)

```r
    if (TRUE) {
    ** message("Very important!")
    }
    ```
Output:
```r
if (TRUE) {
* message("Very important!")
}
```

This is invalid R code, so it is a plain fenced code block that is not executed.
]

```{r tidy=FALSE}
    if (TRUE) {
    *{{ message("Very important!") }}
    }
    ```
Output:

```r
if (TRUE) {
* message("Very important!") 
}
```

```
## Very important!
```

It is valid R code so you can run it.
]

---
class: middle, bottom
background-image: url(./img/logo/ScPo-shield.png)
background-size: contain

### <grey>You can</grey>  
### <grey>fill the</grey>  
### <grey>screen with </grey>  
### **background-size: contain**

---

# Macros

- We can insert javascript macros into our presentations
- For example, if we put the following code into `macros.js`...

```js
remark.macros.scale = function (percentage) {
  var url = this;
  return '<img src="' + url + '" style="width: ' + percentage + '" />';
};
```

- ...we can use the markdown call to resize images...

```md
![:scale 25%](./img/logo/ScPo-econ.png)
```

- These calls can also be put inside html divs so as to control where they appear.

<div align="center">
![:scale 20%](./img/logo/ScPo-econ.png)
</div>

- All we need to do is include `beforeInit: "macros.js"` under nature in our YAML front matter

---

# ScPo stuff

### General

- The theme was designed to work with a 16:9 aspect ratio
- Set the aspect ratio under the **nature** output parameter...  
    nature:  
      &nbsp; &nbsp; ratio: "16:9"

### Sections

- We can create section dividers with ScPo red and grey by using the `class` call:

```md
class: title-slide-section-red
```

```md
class: title-slide-section-grey
```

---
class: title-slide-section-red

# ScPo red section divider

### This is the H3 font color

- Our text goes here

- We can use **bold**

- and .blue[blue]

- and also .grey[grey]

---
class: title-slide-section-grey

# ScPo grey section divider

### This is the H3 font color

- Our text goes here

- We can use **bold**

- and .blue[blue]

- and also .black[black]

---

# Tables

### Centering

- Tables are centered by default in **xaringan**. 
- We can override this using...

|  This |  is |   a    |    Table     |
| :---- | :-- | :----- | :----------: |
| It is | now | pulled | to the right |
| 12    | 34  | 56     |      78      |

]

---
background-image: url(https://upload.wikimedia.org/wikipedia/commons/b/be/Sharingan_triple.svg)
background-size: 100px
background-position: 90% 8%

# xaringan

- Press `h` or `?` to see the possible ninjutsu you can use in remark.js.

- You can see all the goodies like this.

- Check out more in-depth tutorial [here](https://slides.yihui.name/xaringan/#1)

---
class: title-slide-final, middle
background-image: url(./img/logo/ScPo-Econ.png)
background-size: 250px
background-position: 9% 19%

# Thanks!

## This is the final slide

### you can add your email, twitter, github, etc. info here

Here is an example:

|                                                                                                            |                                   |
| :--------------------------------------------------------------------------------------------------------- | :-------------------------------- |
| <a href="mailto:florian.oswald@sciencespo.fr">.ScPored[<i class="fa fa-paper-plane fa-fw"></i>]               | florian.oswald@sciencespo.fr       |
| <a href="https://scpoecon.github.io/scpo_xaringan">.ScPored[<i class="fa fa-link fa-fw"></i>] | slides |
| <a href="http://twitter.com/ScPoEcon">.ScPored[<i class="fa fa-twitter fa-fw"></i>]                          | @ScPoEcon                         |
| <a href="http://github.com/ScPoEcon">.ScPored[<i class="fa fa-github fa-fw"></i>]                          | @ScPoEcon                       |