Le pouvoir du xaringan : créez des présentations élégantes et reproductibles avec RMarkdown

class: title-slide
background-image: url(images/logo_chaire.jpg), url(images/background.jpg)
background-size: 30%, cover
background-position: 98% 98%, center

.titre-page-titre[Le pouvoir du xaringan : créez des présentations élégantes et reproductibles avec RMarkdown]
<br />
.sous-titre-page-titre[Séminaire d'été d'actuariat et de statistique]
<br />
<br />
***
<br />
<br />
.sous-sous-titre-page-titre[.mon-style-bleu[par] Francis Duval <br> .mon-style-bleu[à] l'Université du Québec à Montréal <br> .mon-style-bleu[le] 7 juin 2023] <br>
.sous-sous-titre-page-titre[.mon-style-bleu[lien:] .petit[francisduval.github.io/presentation_xaringan]]

---

background-image: url(images/slido.png)
background-size: 80%
background-position: 45% 85%

# Sondage

[.white[Lien]](https://wall.sli.do/event/2VxpnJFhrXsUnoKepmRMzy?section=e7bb533a-3ad6-4e64-9c83-51dd860c429a)

---

# Qu'est-ce que xaringan?

.left-column[
<br><br><br><br>
<img src="images/xaringan.png" width="90%" style="display: block; margin: auto;" />
]

.right-column[
<br><br><br><br>
.bleu-gros[1) RMarkdown avec fonctionnalités supplémentaires]
<br><br><br>
.bleu-gros[2) *Render* les diapositives] `$\boldsymbol{\rightarrow}$` .bleu-gros[page web HTML]
<br><br><br>
.bleu-gros[3) Styliser avec CSS]
]

---

# Démarrage

## Étape 1

**Se créer un projet R**

.pull-left[
<img src="images/projet_r.png" width="100%" style="display: block; margin: auto auto auto 0;" />
]

.pull-right[
- Cocher « Create a git repository » et « Use renv with this project » (recommandé)
]

---

# Démarrage

.pull-left[
## Étape 2

**Installer le package `xaringan`**

- `install.packages("xaringan")`

## Étape 3

**Créer une « présentation Ninja »**

- Nouveau document `$\rightarrow$` R Markdown... `$\rightarrow$` From Template `$\rightarrow$` Ninja Presentation
- Installer les packages si demandé
- Sauvegarder le document: index.rmd
]

.pull-right[
<img src="images/ninja_pres.png" width="100%" style="display: block; margin: auto;" />
]

---

# Démarrage

.pull-left[

## Étape 4
**Ouvrir « Infinite Moon Reader »**
- Addins `$\rightarrow$` Cliquer sur « Infinite Moon Reader »
- Alternativement, exécuter `xaringan::infinite_moon_reader()` dans la console.
- Visualiser les diapositives dans le *viewer*.

## Étape 5

**Commencer à créer votre présentation**

- Certains éléments se modifient en temps réel dans le viewer.
- Pour d'autres éléments (comme les images), il faut sauvegarder le fichier .rmd pour voir les changements.
]

.pull-right[
<img src="images/rstudio.png" width="100%" style="display: block; margin: auto;" />
]

---

# Thème de la Chaire

**Pour avoir le thème de la Chaire, il vous faudra:**

1) Ajouter le fichier de style `theme_cara.css` à votre dossier projet, que vous pouvez trouver ici: [github.com/francisduval/xaringan_template_cara](https://github.com/francisduval/xaringan_template_cara)

2) Changer le YAML pour ceci:
```
    title: "Titre"
    subtitle: "Sous-titre"
    author: "Prénom, Nom"
    institute: "Université du Québec à Montréal"
    date: "2023-06-07"
    output:
      xaringan::moon_reader:
        seal: false
        css: "theme_cara.css"
        lib_dir: libs
        nature:
          ratio: "16:9"
          highlightStyle: github
          highlightLines: true
          countIncrementalSlides: false
```

---

# Thème de la Chaire

**Pour avoir le thème de la Chaire, il vous faudra:**

3) Créer un nouveau dossier « images » dans votre dossier projet et y déposer les 2 images nécessaires pour la page-titre, disponibles ici: [github.com/francisduval/xaringan_template_cara/tree/master/images](https://github.com/francisduval/xaringan_template_cara/tree/master/images)
  - logo_chaire.jpg
  - background.jpg

---

# Commandes RMarkdown

### Toutes les commandes RMarkdown fonctionnent en xaringan

---

.pull-left[
<span style="text-decoration: underline">Titres</span>
## Titre niveau 2
### Titre niveau 3

---

<span style="text-decoration: underline">Liste</span>
- **Texte en gras** 
- *Texte en italique*
- Saut de ligne: `<br>`
- Espace: `$~~$` (cette commande fait 2 espaces)
- [Lien](https://learntheweb.courses/topics/markdown-yaml-cheat-sheet/)
- ~~Barré~~
  - Sous-item
]

.pull-right[
<span style="text-decoration: underline">Liste numérotée</span>
1. Code R non-évalué: \``r mean(rnorm(10))`\`
2. Code R évalué: -0.0674418
3. Équation: `$\frac{d}{{dx}}\tan x = \sec ^2 x$`
4. Bloc *align* en LaTeX:
`\begin{align*}
  x &= x\\
  &= x + y
\end{align*}`

---

<span style="text-decoration: underline">Table simple</span>

Titre 1 | Titre 2
------------- | -------------
Cellule 1 | Cellule 2
Cellule 3 | Cellule 4
]

---

# Images

**2 manières d'inclure des images**

- Image d'arrière-plan (à placer au tout début de la diapositive):

```
background-image: url(images/wallpaper.jpg)
background-size: 100%
background-position: cover
```

- Image avec `knitr` (à placer dans un bloc de code `R`):
````
```{r echo = T, out.width = "60%", fig.align = "center"}
knitr::include_graphics("images/wallpaper.jpg")
```
````

Évidemment, dans les 2 cas, il y a plein d'options pour changer l'apparence de l'image (dimensions, position, opacité, etc.)

---

background-image: url(images/wallpaper.jpg)
background-size: 100%
background-position: cover

# Image d'arrière plan

<br><br><br><br><br><br>
**.white[C'est une image d'arrière-plan, donc on peut écrire par-dessus.]**

---

# Image avec knitr

```r
knitr::include_graphics("images/snorlax_gif.gif")
```

<div class="figure" style="text-align: center">
<img src="images/snorlax_gif.gif" alt="Un Snorlax qui rampe" width="40%" />
<p class="caption">Un Snorlax qui rampe</p>
</div>

**L'image peut également être un GIF!**

---

# Table de données avec kableExtra

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

Évidemment, il y a plein d'options pour personnaliser l'apparence dans la librairie `kableExtra`.

---

# Table interactive avec DT

```r
DT::datatable(mtcars, fillContainer = F, options = list(pageLength = 6))
```

<div class="datatables html-widget html-fill-item-overflow-hidden html-fill-item" id="htmlwidget-14a4c06f41ba41396c05" style="width:100%;height:auto;"></div>
<script type="application/json" data-for="htmlwidget-14a4c06f41ba41396c05">{"x":{"filter":"none","vertical":false,"fillContainer":false,"data":[["Mazda RX4","Mazda RX4 Wag","Datsun 710","Hornet 4 Drive","Hornet Sportabout","Valiant","Duster 360","Merc 240D","Merc 230","Merc 280","Merc 280C","Merc 450SE","Merc 450SL","Merc 450SLC","Cadillac Fleetwood","Lincoln Continental","Chrysler Imperial","Fiat 128","Honda Civic","Toyota Corolla","Toyota Corona","Dodge Challenger","AMC Javelin","Camaro Z28","Pontiac Firebird","Fiat X1-9","Porsche 914-2","Lotus Europa","Ford Pantera L","Ferrari Dino","Maserati Bora","Volvo 142E"],[21,21,22.8,21.4,18.7,18.1,14.3,24.4,22.8,19.2,17.8,16.4,17.3,15.2,10.4,10.4,14.7,32.4,30.4,33.9,21.5,15.5,15.2,13.3,19.2,27.3,26,30.4,15.8,19.7,15,21.4],[6,6,4,6,8,6,8,4,4,6,6,8,8,8,8,8,8,4,4,4,4,8,8,8,8,4,4,4,8,6,8,4],[160,160,108,258,360,225,360,146.7,140.8,167.6,167.6,275.8,275.8,275.8,472,460,440,78.7,75.7,71.1,120.1,318,304,350,400,79,120.3,95.1,351,145,301,121],[110,110,93,110,175,105,245,62,95,123,123,180,180,180,205,215,230,66,52,65,97,150,150,245,175,66,91,113,264,175,335,109],[3.9,3.9,3.85,3.08,3.15,2.76,3.21,3.69,3.92,3.92,3.92,3.07,3.07,3.07,2.93,3,3.23,4.08,4.93,4.22,3.7,2.76,3.15,3.73,3.08,4.08,4.43,3.77,4.22,3.62,3.54,4.11],[2.62,2.875,2.32,3.215,3.44,3.46,3.57,3.19,3.15,3.44,3.44,4.07,3.73,3.78,5.25,5.424,5.345,2.2,1.615,1.835,2.465,3.52,3.435,3.84,3.845,1.935,2.14,1.513,3.17,2.77,3.57,2.78],[16.46,17.02,18.61,19.44,17.02,20.22,15.84,20,22.9,18.3,18.9,17.4,17.6,18,17.98,17.82,17.42,19.47,18.52,19.9,20.01,16.87,17.3,15.41,17.05,18.9,16.7,16.9,14.5,15.5,14.6,18.6],[0,0,1,1,0,1,0,1,1,1,1,0,0,0,0,0,0,1,1,1,1,0,0,0,0,1,0,1,0,0,0,1],[1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,0,0,0,0,0,1,1,1,1,1,1,1],[4,4,4,3,3,3,3,4,4,4,4,3,3,3,3,3,3,4,4,4,3,3,3,3,3,4,5,5,5,5,5,4],[4,4,1,1,2,1,4,2,2,4,4,3,3,3,4,4,4,1,2,1,1,2,2,4,2,1,2,2,4,6,8,2]],"container":"<table class=\"display\">\n  <thead>\n    <tr>\n      <th> <\/th>\n      <th>mpg<\/th>\n      <th>cyl<\/th>\n      <th>disp<\/th>\n      <th>hp<\/th>\n      <th>drat<\/th>\n      <th>wt<\/th>\n      <th>qsec<\/th>\n      <th>vs<\/th>\n      <th>am<\/th>\n      <th>gear<\/th>\n      <th>carb<\/th>\n    <\/tr>\n  <\/thead>\n<\/table>","options":{"pageLength":6,"columnDefs":[{"className":"dt-right","targets":[1,2,3,4,5,6,7,8,9,10,11]},{"orderable":false,"targets":0}],"order":[],"autoWidth":false,"orderClasses":false,"lengthMenu":[6,10,25,50,100]}},"evals":[],"jsHooks":[]}</script>

---

`$$\DeclareMathOperator*{\argmin}{argmin}$$`

# Macros LaTeX

Exemple: on veut utiliser l'opérateur *argmin* dans une équation. Ce n'est pas dans les opérateurs de base en LaTeX. Il faut donc déclarer l'opérateur entre 2 double symboles de $, n'importe où dans le fichier .Rmd:

```
$$\DeclareMathOperator*{\argmin}{argmin}$$
```

On peut ensuite l'utiliser:

`\begin{align}
  \boldsymbol{w}^* &= \argmin_\boldsymbol{w} \frac{1}{n}\sum_{i=1}^n \ell(y, \widehat{y})\\
  &= \argmin_\boldsymbol{w} \frac{1}{n}\sum_{i=1}^n \ell(y, f(\boldsymbol{x}_i; \boldsymbol{w}))\\
  &= \argmin_\boldsymbol{w} J(\boldsymbol{w})
\end{align}`

---

# Panelsets

.panelset[
.panel[.panel-name[Instructions]
Pour pouvoir faire des panneaux, il faut avoir ce bloc de code n'importe où dans votre fichier .Rmd:

````
```{r xaringan-panelset, echo = F}
xaringanExtra::use_panelset()
```
````

]
.panel[.panel-name[Code]
```r
plot(mtcars$hp, mtcars$mpg)
```
]
.panel[.panel-name[Output]
<img src="index_files/figure-html/unnamed-chunk-9-1.png" width="40%" style="display: block; margin: auto;" />
]
]

---

# Panelsets

.panelset.sideways[
.panel[.panel-name[.bleu-gras[Code]]
```r
plot(mtcars$hp, mtcars$mpg)
plot(mtcars$disp, mtcars$mpg)
plot(mtcars$drat, mtcars$mpg)
plot(mtcars$qsec, mtcars$mpg)
```
]
.panel[.panel-name[mpg vs hp]
<img src="index_files/figure-html/unnamed-chunk-10-1.png" width="100%" style="display: block; margin: auto;" />
]
.panel[.panel-name[mpg vs disp]
<img src="index_files/figure-html/unnamed-chunk-11-1.png" width="100%" style="display: block; margin: auto;" />
]
.panel[.panel-name[mpg vs drat]
<img src="index_files/figure-html/unnamed-chunk-12-1.png" width="100%" style="display: block; margin: auto;" />
]
.panel[.panel-name[mpg vs qsec]
<img src="index_files/figure-html/unnamed-chunk-13-1.png" width="100%" style="display: block; margin: auto;" />
]
]

---

# Scribble

- Simplement inclure ce bout de code:

````
```{r xaringanExtra-scribble, echo = F}
xaringanExtra::use_scribble()
```
````

- On peut ensuite dessiner en temps réel sur les diapositives en appuyant sur « s ».
- Pour désactiver Scribble pour une diapositive en particulier: `class: no-scribble` au tout début de la diapositive.

---

# Overview

- Inclure ce bloc de code dans votre présentation:

````
```{r xaringan-tile-view, echo = FALSE}
xaringanExtra::use_tile_view()
```
````

- Vous pouvez ensuite visualiser un « overview » de vos diapositives en appuyant sur « o ».

---

# Diapositive avec notes

- Mettre 3 points d'interrogation (`???`) pour séparer le contenu de la diapositive des notes.
- Voici l'anatomie d'une diapositive avec notes:

```
---

# Titre

Contenu

???

Écrire les notes ici.

---

```

- Pour voir les notes, simplement appuyer sur « p ».
- Ça peut être d'une grande utilité lorsqu'on pratique la présentation.
- Les notes fonctionnent dans le *viewer* et dans un HTML, mais pas dans un PDF.

???

`$$\DeclareMathOperator*{\argmin}{argmin}$$`
- Note 1
- Note 2
- Équation: `$E = mc^2$`
- Bloc *align*:
`\begin{align}
  \boldsymbol{w}^* &= \argmin_\boldsymbol{w} \frac{1}{n}\sum_{i=1}^n \ell(y, \widehat{y})\\
  &= \argmin_\boldsymbol{w} \frac{1}{n}\sum_{i=1}^n \ell(y, f(\boldsymbol{x}_i; \boldsymbol{w}))\\
  &= \argmin_\boldsymbol{w} J(\boldsymbol{w})
\end{align}`

---

# Intégration de vidéos YouTube

**Vous pouvez facilement intégrer des vidéos dans une présentation xaringan. A titre d'exemple, voici les étapes à suivre pour intégrer des vidéos YouTube :**

1. Sur un ordinateur, accédez à la vidéo YouTube que vous souhaitez intégrer.
2. Sous la vidéo, cliquez sur SHARE
3. Cliquez sur Intégrer.
4. Dans la boîte qui s'affiche, copiez le code HTML.
5. Collez le code dans votre document xaringan.

.center[
<iframe width="560" height="300" src="https://www.youtube.com/embed/tPikgFoboBg" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
]

---

class: center, top, inverse

# Classes de diapositives

**Une diapositive peut avoir des propriétés, notamment `class` et `background-image`.**<br><br>
**Les propriétés doivent être écrites au début de la diapositive**<br><br>

.left[
- `left`, `center`, et `right` pour l'alignement horizontal de tous les éléments sur la diapositive.
- `top`, `middle`, et `bottom` peuvent être utilisés pour l'alignement vertical.
- `inverse` permet d'utiliser les couleurs « inverses ».
- Évidemment, les couleurs de la classe inverse peuvent être définies dans le fichier css.
]

**Voici l'anatomie de cette slide:**

```
---
class: center, top, inverse

# Classes de diapositives

Contenu

---
```

---

# Classes de contenu

- Vous pouvez attribuer des classes à n'importe quel élément d'une diapositive.
- La syntaxe est `.nomdelaclasse[contenu]`.
- Il est possible de styliser n'importe quel élément de votre présentation à l'aide de CSS.
  - Voici un site Internet qui semble intéressant pour générer du code CSS: [https://css-generator.netlify.app](https://css-generator.netlify.app)
- Il y a quelques classes « built-in »:
  - .left[`.left[]`]
  - .center[`.center[]`]
  - .right[`.right[]`]
- Exemple de classe personnalisée qui colore le texte en blanc (à mettre dans le fichier css):
```
.blanc {
  color: white;
}
```

**Exercice: à l'aide du [générateur de CSS](https://css-generator.netlify.app), créer une classe .maclass[] qui sert à écrire du texte blanc, sur un fond bleu et avec une bordure noire.**

.maclasse[Voici le résultat]

---

# `.pull-left[]` et `.pull-right[]`

Permet de séparer la diapositive en 2:

.pull-left[
**Éléments à gauche**

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown...
]

.pull-right[
**Éléments à droite**

Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock...
]

Anatomie de la diapositive:

```
---

# Titre

.pull-left[
Contenu à gauche
]

.pull-right[
Contenu à droite
]

---
```

---

# `.left-column[]` et `.right-column[]`

Même chose que `.pull-left[]` et `.pull-right[]`, sauf qu'au lieu d'avoir une séparation 50/50, on a une séparation 25/75:

.left-column[
<img src="images/snorlax.jpeg" height = "400px" width = "500px" />
]

.right-column[
**Éléments à droite**

Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock...

- Évidemment, avec CSS, on peut définir n'importe quel « layout ».
]

---

# xaringanthemer

- `xaringanthemer` est une librairie qui permet de styliser les diapositives.
- En fait, la plupart des fonctions de cette librairie servent à générer du code CSS.

Le bloc de code suivant sauvegarde un fichier .css (appelé par défaut `xaringan-themer.css`) avec l'information pour styliser une présentation `xaringan`:

```r
style_xaringan(
  text_color = "blue",
  inverse_background_color = "#31b09e",
  inverse_text_color = "red"
)
```

Donc c'est une librairie qui peut être utile pour générer du code CSS (plutôt que de coder à partir de rien).

---

# Exporter sa présentation

.left-column[
<div class="figure" style="text-align: center">
<img src="images/knit_moon_reader.png" alt="Knit to moon_reader" width="100%" />
<p class="caption">Knit to moon_reader</p>
</div>
]

.right-column[
- Knit -> Knit to moon_reader permet d'obtenir un fichier HTML des diapositives.
- Or, ce fichier HTML n'est pas « self-contained », c'est-à-dire qu'il peut seulement être ouvrir dans son contexte (ici, le dossier projet).

#### 1) Option 1: en faire un site internet avec GitHub pages

- « Pusher » vos modifications sur un repository GitHub
- Aller dans « settings », puis sur l'onglet « Pages ».
- Choisir la branche à publier (probablement « master »): appuyer sur « Save ».
- L'addresse de la page web créée apparaitra (peut prendre quelques minutes).
- Noter que votre repository doit être public et qu'il doit contenir un fichier nommé `index.html`.
  
#### 2) Option 2: en faire un fichier PDF

- Cette [page web](https://www.garrickadenbuie.com/blog/print-xaringan-chromote/) explique bien comment procéder. Noter que plusieurs fonctionnalités ne sont pas prises en charge par les fichiers PDF. xaringan est plutôt fait pour créer des pages HTML.
]

---

# GitHub pages

---

# Autres infos utiles

- Ajouter un logo à toutes les slides: [https://pkg.garrickadenbuie.com/xaringanExtra/#/logo](https://pkg.garrickadenbuie.com/xaringanExtra/#/logo)
- Diapositives modifiables en temps réel: [https://github.com/gadenbuie/xaringanExtra#-editable](https://github.com/gadenbuie/xaringanExtra#-editable)
- Animation lors des changements de diapositives:
  - [https://github.com/gadenbuie/xaringanExtra#-animatecss](https://github.com/gadenbuie/xaringanExtra#-animatecss)
- Vidéos sur xaringan:
  - [https://www.youtube.com/watch?v=FHy6NseH8yk&t=4378s](https://www.youtube.com/watch?v=FHy6NseH8yk&t=4378s)
  - [https://www.youtube.com/watch?v=RPFh3y9UAX4&t=5865s](https://www.youtube.com/watch?v=RPFh3y9UAX4&t=5865s)
  - [https://www.youtube.com/watch?v=3n9nASHg9gc&t=1935s](https://www.youtube.com/watch?v=3n9nASHg9gc&t=1935s)
- Lien GitHub du code pour les présentes diapositives: [https://github.com/francisduval/presentation_xaringan](https://github.com/francisduval/presentation_xaringan)

---

# Bonus - Blocs

.bloc.gris[
Un bloc gris avec du texte et une équation:
`\begin{align}
  E = mc^2
\end{align}`
]

.bloc.bleu[
Un bloc bleu avec du texte et une équation:
`\begin{align}
  E = mc^2
\end{align}`
]

.bloc.rouge[
Un bloc rouge avec du texte et une équation:
`\begin{align}
  E = mc^2
\end{align}`
]

---

# Bonus - Blocs avec bannière titrée

.titre-bloc.gris[
Théorème gris
]
.bloc.titre.gris[
Un bloc gris avec bannière titrée
]

.titre-bloc.bleu[
Théorème bleu
]
.bloc.titre.bleu[
Un bloc bleu avec bannière titrée
]

.titre-bloc.rouge[
Théorème rouge
]
.bloc.titre.rouge[
Un bloc rouge avec bannière titrée
]