Présentez vos travaux en Markdown

# Présentez vos travaux en Markdown
## <em>Xaringan</em> et <em>Xaringanthemer</em>
### ÉCOLE THÉMATIQUE SIGR
### Lambert, Giraud, Ysebaert
### 2021-06-28

---

---

# Les pour et les contre

## Avantages

- Tout se fait dans Rstudio
- Très adapté pour présenter du code
- Fichier texte léger facile à versionner (Github)
- Format web facile à partager (via Github ou Gitlab)
- Incite au partage public

## Inconvéniants

- Prise en main compliquée
- Il faut changer d'habitudes de travail
- Si on connait un peu le html et le CSS, ça aide

---
class: center

---

# Xaringan

Le package **xaringan** (Xie, 2021) est une extension R Markdown basée sur la bibliothèque JavaScript **remark.js** (https://remarkjs.com) pour générer des présentations HTML5 plutôt cool.

Le nom "xaringan" vient de Sharingan (Oeil Copieur Tournoyant) dans le manga et l'anime japonais "Naruto"

Reference : [https://yihui.org/en/2017/08/why-xaringan-remark-js/](https://yihui.org/en/2017/08/why-xaringan-remark-js/)

---
class: center

---

# Structure d'un document xaringan

```r
---
title: "Presentation Ninja"
subtitle: "with xaringan"
author: "Yihui Xie"
date: "2016/12/12"
output:
  xaringan::moon_reader:
    lib_dir: libs
    nature:
      highlightStyle: github
      countIncrementalSlides: false
---

One slide.

---

Another slide.
```

---

# Paramétrer la présentation (entête yaml)

**seal** : pour désactiver la diapositive de titre (et donc pour en créer une personnalisée)

**self_contained: true**  : compliler la présentation dans un fichier unique (plus facile à partager ou passer d'un ordinateur à l'autre)

**chakra: libs/remark-latest.min.js** : télécharger la librairie *remark-latest.min.js* et a lier manuellement permet de travailler et présenter offline.

**autoplay: 30000** : permet de défilement automatique des slides. Ici, toutes les 30 secondes

**countIncrementalSlides: true** : affiche les numéros des pages au format n/N

**ratio: 16:9** : permet de définir la taille de la présentation. *Largeur:hauteur*

**etc..**

---

# L'entête de cette présentation

```r
---
title: "Présentez vos travaux en Markdown"
subtitle: "*Xaringan* et *Xaringanthemer*"  
author: 
  - "ÉCOLE THÉMATIQUE SIGR"
  - "Lambert, Giraud, Ysebaert"
date: '`r Sys.Date()`'
output:
  xaringan::moon_reader:
    chakra: libs/remark-latest.min.js
    self_contained: false
    css: ["xaringan-themer.css", "extra.css"]
    nature:
      slideNumberFormat: "%current%"
      highlightLines: true
      ratio: 16:9
      countIncrementalSlides: true
```

---

# Gestion des diapositives

Pour séparer les diapositives, on utilise **trois tirets ---**.

Pour ajouter des éléments de façon incrémentielle dans une diapositive, on utiise **deux tirets --**.

```r
---
  
# Titre de la diapo

text text text text.....

Nouvel élément

encore un élement

---

# Nouvelle diapo
```

---

# Des raccourcis clavier hyper utiles

### P (presentation mode)

### F (full screen)

### C (clone slides to a new window)

### B (black out)

### M (mirror the slide)

### H (help)

???

Mes notes ici : parler des raccourcis clavier ^^

Pour ajouter des notes, on utilise `???`

---
class: inverse center middle

# Présenter du code

---

# Présenter du code

Pour afficher du code, on l'écrit dans un chunk {r, eval= FALSE}

L'option highlightLines: true dans nature va surligner les lignes de code qui commencent par *, sont entourées de doubles accolades {{ }}, ou ont des commentaires en fn de ligne #<<:

```r
mtq <- mf_get_mtq()
mf_map(mtq)
mf_map(mtq, var = "POP", type = "prop")
mf_map(mtq, var = "MED", type = "choro")
mf_map(mtq, var = "STATUS", type = "typo")
```

---

# Présenter du code

Pour afficher du code, on l'écrit dans un chunk {r, eval= FALSE}

L'option highlightLines: true dans nature va surligner les lignes de code qui commencent par *, sont entourées de doubles accolades {{ }}, ou ont des commentaires en fn de ligne #<<:

```r
*mtq <- mf_get_mtq()
mf_map(mtq)
mf_map(mtq, var = "POP", type = "prop")
mf_map(mtq, var = "MED", type = "choro")
mf_map(mtq, var = "STATUS", type = "typo")
```

---

# Présenter du code

Pour afficher du code, on l'écrit dans un chunk {r, eval= FALSE}

L'option highlightLines: true dans nature va surligner les lignes de code qui commencent par *, sont entourées de doubles accolades {{ }}, ou ont des commentaires en fn de ligne #<<:

```r
mtq <- mf_get_mtq()
*mf_map(mtq)
mf_map(mtq, var = "POP", type = "prop")
mf_map(mtq, var = "MED", type = "choro")
mf_map(mtq, var = "STATUS", type = "typo")
```

---

# Présenter du code

Pour afficher du code, on l'écrit dans un chunk {r, eval= FALSE}

L'option highlightLines: true dans nature va surligner les lignes de code qui commencent par *, sont entourées de doubles accolades {{ }}, ou ont des commentaires en fn de ligne #<<:

```r
mtq <- mf_get_mtq()
mf_map(mtq)
*mf_map(mtq, var = "POP", type = "prop")
*mf_map(mtq, var = "MED", type = "choro")
*mf_map(mtq, var = "STATUS", type = "typo")
```

---

### Il n'y a pas que R dans la vie, il y a javascript aussi

#### Code R

```r
ggplot(gapminder) +
  aes(x = gdpPercap, y = lifeExp, size = pop, color = country) +
  geom_point() +
  facet_wrap(~year)
```

#### JavaScript

```js
var fun = function lang(l) {
  dateformat.i18n = require('./lang/' + l)
  return true;
}
```

---
class: inverse center middle

# Les textes

---

# Big Topic or Inverse Slides `#`

## Slide Headings `##`

### Sub-slide Headings `###`

#### Bold Call-Out `####`

This is a normal paragraph text. Only use header levels 1-4.

##### Possible, but not recommended `#####`

###### Definitely don't use h6 `######`

---
class: center

## **gras**

`**gras**`

## *italic*

`*italic*`

## ~~barré~~

`~~barré~~`

## <ins>souligné</ins>

`<ins>souligné</ins>`

---

### Citations

> This is a blockquote following a header.
>
> When something is important enough, you do it even if the odds are not in your favor.

```
> This is a blockquote following a header.
>
> When something is important enough, you do it even if the odds are not in your favor.
```

### Notes

### Liens

```r
[texte à afficher](http://lien_vers_la_page.html)
```

---
class: inverse center middle

# Les classes

---
### ---<br/>(defaut)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nulla nisi, lacinia quis dapibus ut, porta sit amet nisl. Nunc congue nisl vitae justo sagittis ultrices. Ut eu facilisis sem. Vestibulum blandit elementum nisi eu euismod. Nullam vitae tortor quis turpis sodales suscipit fermentum non ipsum. Etiam sodales justo eu gravida dictum. Cras non lectus id justo imperdiet pretium quis ut eros. Donec gravida ac arcu ut aliquet.

Mauris consequat euismod enim ut iaculis. Morbi condimentum rutrum justo, non sollicitudin augue. Praesent lobortis arcu vel lorem ullamcorper, et efficitur erat bibendum. Proin ullamcorper lectus quis nibh faucibus, et vestibulum augue bibendum. Nam venenatis dui neque, non egestas lectus dignissim a. Nulla cursus elementum arcu, eu eleifend nunc ullamcorper sit amet. In porttitor enim at bibendum sodales. Donec vel enim rutrum, porta ipsum at, tristique eros. Sed eu leo ac lorem sollicitudin molestie ac vel ipsum.

---
class: center

### ---<br/>class: center

---
class: right

### ---<br/>class: right

---
class: middle

### ---<br/>class: middle

---
class: bottom

### ---<br/>class: bottom

---
class: bottom right

### ---<br/>class: bottom right

---
class: middle center

### ---<br/>class: middle center

---
class: inverse middle center

### ---<br/>class: inverse middle center

---

### className[...]

On peut également attribuer des classes à n'importe quel élément d'une diapositive. La syntaxe est **`.className[content]`**. Il s'agit d'une fonction très puissante de remark.js. Cela permet de donner un style à n'importe quel élément d'une diapositive par le biais de CSS. Il y a quelques classes de contenu intégrées : **`.left[]`**, **`.right[]`** et **`.center[]`**.

<br/>

---

### pull-left[...] et pull-right[...] (50% - 50%)

.pull-left[Vivamus sed erat facilisis, rhoncus justo nec, semper tellus. Donec blandit tempor erat in finibus. Nullam nisl orci, dictum a sagittis id, lacinia vitae leo. Donec in cursus purus. Duis et tellus ac lectus sollicitudin tempus. Praesent sem velit, tincidunt in placerat vel, fermentum eget orci. Donec sed velit vulputate, congue augue ut, rutrum dui. In nec venenatis diam. Sed non ligula neque. Donec in lectus semper, convallis tellus nec, elementum sapien. Curabitur facilisis libero porttitor ante placerat, quis accumsan eros cursus.]

.pull-right[Vivamus vitae odio in nisi porttitor egestas. Sed auctor diam id enim porta, ac eleifend lorem iaculis. Duis sed nibh faucibus, volutpat est eu, euismod augue. Proin interdum enim vitae leo tincidunt fringilla. Nulla rhoncus sapien sem, eu rhoncus justo vulputate pellentesque. Proin sit amet turpis mauris. Nam venenatis augue id enim efficitur gravida. Phasellus lobortis nunc ut ultrices semper. Quisque malesuada, lectus ac fringilla commodo, tortor dui ornare lectus, sit amet facilisis mi odio id tellus. Nulla sed imperdiet risus. Nullam ultrices urna fermentum pharetra mollis. Nam congue sem eu dapibus consectetur. Nullam sed ex luctus, porttitor justo eget, placerat elit. Nullam sit amet tincidunt urna, ac venenatis sapien. Pellentesque tempus felis massa, rhoncus elementum eros pulvinar sit amet. Pellentesque ut nulla sit amet massa porta placerat.]

---

### left-column[...] et right-column[...] (20% - 80%)

.left-column[
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel orci maximus, lobortis augue et, efficitur velit. Nam quis finibus urna. Cras gravida vestibulum euismod.]

.right-column[Vivamus vitae odio in nisi porttitor egestas. Sed auctor diam id enim porta, ac eleifend lorem iaculis. Duis sed nibh faucibus, volutpat est eu, euismod augue. Proin interdum enim vitae leo tincidunt fringilla. Nulla rhoncus sapien sem, eu rhoncus justo vulputate pellentesque. Proin sit amet turpis mauris. Nam venenatis augue id enim efficitur gravida. Phasellus lobortis nunc ut ultrices semper. Quisque malesuada, lectus ac fringilla commodo, tortor dui ornare lectus, sit amet facilisis mi odio id tellus. Nulla sed imperdiet risus. Nullam ultrices urna fermentum pharetra mollis. Nam congue sem eu dapibus consectetur. Nullam sed ex luctus, porttitor justo eget, placerat elit. Nullam sit amet tincidunt urna, ac venenatis sapien. Pellentesque tempus felis massa, rhoncus elementum eros pulvinar sit amet. Pellentesque ut nulla sit amet massa porta placerat.]

---

### Créez vos propres classes

Il est possible de creer ses propres styles. Ici, myclass[] est associé au style css .myclass{} dans le fichier local extra.css. En résumé, les possibilités de personnalisation sont infinies.

---
class: inverse center middle

# Les layout

```
---
layout: true
# Titre de la partie
<hr/>
### élément récurrent
```

---
layout: true
# Titre de la partie
<hr/>
### élément récurrent

---

**Voici un premier contenu**

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum varius dui eget tortor dignissim sollicitudin. Aliquam tincidunt pharetra magna quis rutrum. Nulla consectetur sem justo, eu semper ligula feugiat quis. Nunc tempor feugiat odio a rhoncus. Maecenas eleifend id orci eget vehicula. Etiam vel volutpat dolor. Quisque venenatis, ligula nec consequat posuere, odio sem consequat tellus, eu finibus tellus dolor quis urna.

---

**Et voilà un second contenu**

In molestie neque quis quam finibus vestibulum. Donec cursus mi quam, at facilisis justo bibendum at. Proin semper ligula eget tempor feugiat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Suspendisse ornare augue velit. In tempus lobortis tempus. Nullam pretium nunc ac ex varius laoreet. Quisque malesuada consequat pulvinar. Duis at sem id ante dapibus faucibus. Vivamus a facilisis odio. Etiam sit amet euismod lacus, tincidunt scelerisque tortor. Mauris eleifend rutrum vehicula. Etiam consectetur ac mi sit amet venenatis.

---
layout: false
class: inverse center middle

# Ajouter des images
```
Markdown ou html ?
```

---
class: center

### Intégrer une image large (syntaxe Markdown)

`![](img/waldesmuller.jpg)`

![](img/waldesmuller.jpg)

---
class: center

### Intégrer une image large (syntaxe Markdown)

---
class: center

### Intégrer une image (snytaxe html)

---
class: center

### Deux images en vis à vis

---
class: center

.left-column[.right[
<br/><br/>** Une carte et une légende**<br/><br/>
Les Feuilletons de Ptolémée : Le Scandale de Mercator. Premier Feuilleton de Ptolémée, consacré à la projection de Gérard Mercator : vous ne verrez plus la carte de votre salon de la même manière !<br/><br/>Source : les Savoirs ambulants, 2020]]

---
class: center middle

### <span style="color: #08335c">background-image: url(img/kangnido.png)
background-size: cover</span>

---
class: center middle

### <span style="color: #08335c">background-image: url(img/kangnido.png)
background-size: contain</span>

---
class: center

### <span style="color: white">Gif animé</span>

---

![](img/maillage3.png)

![](img/maillage4.png)

![](img/maillage6.png)

---
class: inverse center middle

# Dans une page web, il est possible d'intégrer tout ce qu'il est possible d'intégrer dans une page web<br/><br/>🤔

---
class: center

## Vidéo

---
class: center

## iframe

---
class: center

## Leaflet

```r
library(leaflet)
leaflet() %>% addTiles() %>% setView(-1.2489695165222745, 45.95151749498196, zoom = 17)
```

<div id="htmlwidget-b314e6e8c1a4541388fb" style="width:100%;height:360px;" class="leaflet html-widget"></div>
<script type="application/json" data-for="htmlwidget-b314e6e8c1a4541388fb">{"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":[[45.951517494982,-1.24896951652227],17,[]]},"evals":[],"jsHooks":[]}</script>

---
class: center

## Javascript

---
class: inverse center middle

## Et bien sûr, toutes les sorties générées directement en R via le code inclus dans la présentation

---

# Tableaux

```r
tibble::as_tibble(mtcars)
```

```
## # A tibble: 32 x 11
##      mpg   cyl  disp    hp  drat    wt  qsec    vs    am  gear  carb
##    <dbl> <dbl> <dbl> <dbl> <dbl> <dbl> <dbl> <dbl> <dbl> <dbl> <dbl>
##  1  21       6  160    110  3.9   2.62  16.5     0     1     4     4
##  2  21       6  160    110  3.9   2.88  17.0     0     1     4     4
##  3  22.8     4  108     93  3.85  2.32  18.6     1     1     4     1
##  4  21.4     6  258    110  3.08  3.22  19.4     1     0     3     1
##  5  18.7     8  360    175  3.15  3.44  17.0     0     0     3     2
##  6  18.1     6  225    105  2.76  3.46  20.2     1     0     3     1
##  7  14.3     8  360    245  3.21  3.57  15.8     0     0     3     4
##  8  24.4     4  147.    62  3.69  3.19  20       1     0     4     2
##  9  22.8     4  141.    95  3.92  3.15  22.9     1     0     4     2
## 10  19.2     6  168.   123  3.92  3.44  18.3     1     0     4     4
## # … with 22 more rows
```

---

# Tableaux

```r
knitr::kable(head(mtcars), format = 'html')
```

<table>
 <thead>
  <tr>
   <th style="text-align:left;">   </th>
   <th style="text-align:right;"> mpg </th>
   <th style="text-align:right;"> cyl </th>
   <th style="text-align:right;"> disp </th>
   <th style="text-align:right;"> hp </th>
   <th style="text-align:right;"> drat </th>
   <th style="text-align:right;"> wt </th>
   <th style="text-align:right;"> qsec </th>
   <th style="text-align:right;"> vs </th>
   <th style="text-align:right;"> am </th>
   <th style="text-align:right;"> gear </th>
   <th style="text-align:right;"> carb </th>
  </tr>
 </thead>
<tbody>
  <tr>
   <td style="text-align:left;"> Mazda RX4 </td>
   <td style="text-align:right;"> 21.0 </td>
   <td style="text-align:right;"> 6 </td>
   <td style="text-align:right;"> 160 </td>
   <td style="text-align:right;"> 110 </td>
   <td style="text-align:right;"> 3.90 </td>
   <td style="text-align:right;"> 2.620 </td>
   <td style="text-align:right;"> 16.46 </td>
   <td style="text-align:right;"> 0 </td>
   <td style="text-align:right;"> 1 </td>
   <td style="text-align:right;"> 4 </td>
   <td style="text-align:right;"> 4 </td>
  </tr>
  <tr>
   <td style="text-align:left;"> Mazda RX4 Wag </td>
   <td style="text-align:right;"> 21.0 </td>
   <td style="text-align:right;"> 6 </td>
   <td style="text-align:right;"> 160 </td>
   <td style="text-align:right;"> 110 </td>
   <td style="text-align:right;"> 3.90 </td>
   <td style="text-align:right;"> 2.875 </td>
   <td style="text-align:right;"> 17.02 </td>
   <td style="text-align:right;"> 0 </td>
   <td style="text-align:right;"> 1 </td>
   <td style="text-align:right;"> 4 </td>
   <td style="text-align:right;"> 4 </td>
  </tr>
  <tr>
   <td style="text-align:left;"> Datsun 710 </td>
   <td style="text-align:right;"> 22.8 </td>
   <td style="text-align:right;"> 4 </td>
   <td style="text-align:right;"> 108 </td>
   <td style="text-align:right;"> 93 </td>
   <td style="text-align:right;"> 3.85 </td>
   <td style="text-align:right;"> 2.320 </td>
   <td style="text-align:right;"> 18.61 </td>
   <td style="text-align:right;"> 1 </td>
   <td style="text-align:right;"> 1 </td>
   <td style="text-align:right;"> 4 </td>
   <td style="text-align:right;"> 1 </td>
  </tr>
  <tr>
   <td style="text-align:left;"> Hornet 4 Drive </td>
   <td style="text-align:right;"> 21.4 </td>
   <td style="text-align:right;"> 6 </td>
   <td style="text-align:right;"> 258 </td>
   <td style="text-align:right;"> 110 </td>
   <td style="text-align:right;"> 3.08 </td>
   <td style="text-align:right;"> 3.215 </td>
   <td style="text-align:right;"> 19.44 </td>
   <td style="text-align:right;"> 1 </td>
   <td style="text-align:right;"> 0 </td>
   <td style="text-align:right;"> 3 </td>
   <td style="text-align:right;"> 1 </td>
  </tr>
  <tr>
   <td style="text-align:left;"> Hornet Sportabout </td>
   <td style="text-align:right;"> 18.7 </td>
   <td style="text-align:right;"> 8 </td>
   <td style="text-align:right;"> 360 </td>
   <td style="text-align:right;"> 175 </td>
   <td style="text-align:right;"> 3.15 </td>
   <td style="text-align:right;"> 3.440 </td>
   <td style="text-align:right;"> 17.02 </td>
   <td style="text-align:right;"> 0 </td>
   <td style="text-align:right;"> 0 </td>
   <td style="text-align:right;"> 3 </td>
   <td style="text-align:right;"> 2 </td>
  </tr>
  <tr>
   <td style="text-align:left;"> Valiant </td>
   <td style="text-align:right;"> 18.1 </td>
   <td style="text-align:right;"> 6 </td>
   <td style="text-align:right;"> 225 </td>
   <td style="text-align:right;"> 105 </td>
   <td style="text-align:right;"> 2.76 </td>
   <td style="text-align:right;"> 3.460 </td>
   <td style="text-align:right;"> 20.22 </td>
   <td style="text-align:right;"> 1 </td>
   <td style="text-align:right;"> 0 </td>
   <td style="text-align:right;"> 3 </td>
   <td style="text-align:right;"> 1 </td>
  </tr>
</tbody>
</table>

---

# Tableaux

```r
DT::datatable(head(mtcars), fillContainer = FALSE, options = list(pageLength = 4))
```

<div id="htmlwidget-97c3b307528e1b36b239" style="width:100%;height:auto;" class="datatables html-widget"></div>
<script type="application/json" data-for="htmlwidget-97c3b307528e1b36b239">{"x":{"filter":"none","fillContainer":false,"data":[["Mazda RX4","Mazda RX4 Wag","Datsun 710","Hornet 4 Drive","Hornet Sportabout","Valiant"],[21,21,22.8,21.4,18.7,18.1],[6,6,4,6,8,6],[160,160,108,258,360,225],[110,110,93,110,175,105],[3.9,3.9,3.85,3.08,3.15,2.76],[2.62,2.875,2.32,3.215,3.44,3.46],[16.46,17.02,18.61,19.44,17.02,20.22],[0,0,1,1,0,1],[1,1,1,0,0,0],[4,4,4,3,3,3],[4,4,1,1,2,1]],"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":4,"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":[4,10,25,50,100]}},"evals":[],"jsHooks":[]}</script>

---

# Graphiques

```r
library(ggplot2)
(g <- ggplot(mpg) + aes(hwy, cty, color = class) + geom_point())
```

---

# Cartes

```r
library(mapsf)
# import the sample data set
mtq <- mf_get_mtq()
# set theme
mf_theme("dark")
# plot administrative status
mf_map(
  x = mtq, 
  var = "STATUS", type = "typo",pal = c("aquamarine4", "yellow3","wheat"), lwd = .5,
  val_order = c("Prefecture","Sub-prefecture", "Simple municipality"),
  leg_pos = "topright",leg_title = ""
)
# labels for a few  municipalities
mf_label(x = mtq[mtq$STATUS != "Simple municipality",], var = "LIBGEO",
         cex = 0.9, halo = TRUE, r = 0.15)
# layout
mf_layout(title = "Administrative Status", 
credits = paste0("Sources: Insee and IGN, 2018\n",
"mapsf ", 
ackageVersion("mapsf")))
```

---

# Cartes

---
class: inverse center middle

# Embellir et personnaliser les présentations

---
class: center middle

## Option 1 : apprendre le CSS

---
class: left

## Intégrer un ficher css

```r
title: "Faut-il se méfier des cartes ?"
subtitle: "Spoil : oui !"
author: "Nicolas Lambert"
institute: "CNRS / UMS RIATE"
date: "`r Sys.Date()`"
output:
  xaringan::moon_reader:
    chakra: libs/remark-latest.min.js
    lib_dir: libs
    nature:
      highlightStyle: github
      highlightLines: true
      countIncrementalSlides: true
    css:
      - default
      - default-fonts 
      - "libs/css/animate.min.css"
*     - "libs/css/lambert.css"
*     - "libs/css/lambert-font.css"
    seal: false
---
```

---
class: center middle

---
class: center middle

---
class: center middle

## Option 2 : xaringanthemer

```r
*library(xaringanthemer)
style_duo_accent(
  primary_color = "#449ac2",
  secondary_color = "#383838",
  inverse_header_color = "#ffae00",
  #background_image = "img/conception-fond-abstrait-blanc_23-2148825582.jpg"
  )
```

---
class: center middle

## Option 2 : xaringanthemer

---
class: center middle

## Option 2 : xaringanthemer

```r
g + xaringanthemer::theme_xaringan(text_font_size = 16, title_font_size = 18) +
  ggtitle("A Plot About Cars")
```

---
class: inverse center, middle

# Aller plus loin

---
class: center

# xaringanExtra

```r
# install.packages("devtools")
devtools::install_github("gadenbuie/xaringanExtra")
```

> https://github.com/gadenbuie/xaringanExtra

---

## `Animate.css`

Animate.css est une collection populaire d'animations CSS.

*use_animate_css()* est une fonction qui modifie automatiquement le CSS pour activer active l'animation entre les diapositives.

On peut télécharger et appeler manuellement le fichier css animate, ou bien l'appeler via le package *xaringanExtra* comme suit :

```r
{r xaringan-animate-css, echo=FALSE}
xaringanExtra::use_animate_css()
```

`---
class: inverse, center, middle, animated, bounceInDown
`
---
class: center

---

## `xaringan-tile-view`

### (Appuyer sur O pour Overview)

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

---

## `xaringan-editable`

```r
{r xaringan-editable, echo=FALSE}
xaringanExtra::use_editable(expires = 1)
```

## .can-edit.key-firstSlideTitle[Changez le titre de cette page]
Hello, .can-edit[world], bienvenue à Oléron

.can-edit.key-likes[
- premier truc
- deuxième truc
]

---

## `xaringan-scribble`

###(Appuyer sur S pour Scribble)

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

---

## `xaringan-spanelset`

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

---

```r
library(mapsf)
mtq <- mf_get_mtq()
mf_map(mtq,)
mf_annotation(
  x = c(711167.8, 1614764),
  txt = "Look!\nImportant feature\nhere!",
  pos = "bottomleft", cex = 1.2, font = 2,
  halo = TRUE, s = 1.5
)

mf_annotation(
  x = mtq[20, ],
  txt = "This is less\nimportant",
  cex = .7, font = 3, s = 1.3
)
```
]
.panel[.panel-name[Plot]
<img src="index_files/figure-html/unnamed-chunk-24-1.png" width="100%" />
]
.panel[.panel-name[Explanations]
ILorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean pulvinar vehicula ultricies. Etiam facilisis nunc non augue consectetur, at mattis tortor scelerisque. Aliquam aliquam metus lorem, id consequat odio semper vitae. Cras tellus ligula, aliquet in pulvinar a, tempor eget ipsum. Maecenas facilisis non orci id vestibulum. Vivamus pulvinar lacinia tincidunt. Cras mattis nunc vel velit dapibus tincidunt. Proin mattis leo velit, at finibus metus consectetur sit amet. Praesent molestie libero a urna dapibus, vitae pellentesque quam ultricies. Cras ligula mauris, facilisis id elit nec, lobortis semper augue. Cras at sem ac felis accumsan faucibus quis a ligula.

Mauris sed metus vel arcu feugiat pulvinar. Nam ligula metus, sodales id dignissim eget, euismod vitae metus. Vestibulum fringilla libero ultricies ante egestas sollicitudin. Aenean velit turpis, tristique vel dui quis, convallis venenatis nisi. In ac elementum felis. Cras sit amet nunc lectus. Nullam volutpat porttitor lectus. Nulla facilisi. Aliquam molestie nisi vel neque sagittis, vitae lacinia mi feugiat. Aenean sed urna ligula. Phasellus ac viverra mauris
]
]

---

## `xaringan-Extra-search`

### (Appuyer sur CTRL+F pour chercher)

```r
{` xaringanExtra-search, echo=FALSE}
xaringanExtra::use_search(show_icon = TRUE)
```

---

## Compte à rebours

```r
# devtools::install_github("gadenbuie/countdown")
library(countdown)
countdown(minutes = 10, seconds = 00, top = 0)
```

<div class="countdown" id="timer_60d9d495" style="top:0;right:0;" data-warnwhen="0">
<code class="countdown-time"><span class="countdown-digits minutes">10</span><span class="countdown-digits colon">:</span><span class="countdown-digits seconds">00</span></code>
</div>
---
class: inverse center middle

# À vous de jouer !

---

# À vous de jouer

#### 1 - Créer une présentation xaringan et parametrez l'entête (nom, titre...)

> File > new file > R Markdown > From template > Ninja Themed Presentation

#### 2- Ajoutez ou modifiez des éléments

> Une image, du code R et son résultat, du texte (vous pouvez reprendre les éléments de la veille)

#### 3 - Personalisez le style avec xaringanthemer

#### 4 - Essayez le paramètre *yolo = true * 😁

```r
output:
  xaringan::moon_reader:
*  yolo: true
```
> **Documentation** : https://bookdown.org/yihui/rmarkdown/xaringan.html

---
class: center middle

# Merci

Slides créés avec les packages R

[**xaringan**](https://github.com/yihui/xaringan) et [**xaringanthemer**](https://github.com/gadenbuie/xaringanthemer)

grâce à [**remark.js**](https://remarkjs.com), [**knitr**](http://yihui.name/knitr), et [**R Markdown**](https://rmarkdown.rstudio.com).

---
class: inverse center middle

# yolo = true

😜

---
class: center

Inspiré par une demande de fonctionnalité aléatoire provenant d'un tweet de Karthik Ram, (Data Science, Berkeley) **Xaringan::moon_reader** fournit une option nommée **yolo** (un acronyme de "on ne vit qu'une fois"). Si vous lui attribuez la valeur **true**, une photo de Karl Broman (avec une moustache datée du 15 Nov 2002) sera insérée dans une diapositive aléatoire de votre présentation.

Karl Broman est statistician et professor à l'university du Wisconsin–Madison.

---
class: center