1.1 Quarto, c’est quoi ?

Un nouveau système de publication scientifique et technique Open-Source, basé sur Pandoc.

• Pensé et construit sur les 10 années d’expérience de R markdown
• Quarto est inclus dans les dernières versions de RStudio (> 2022.07.2)
• Avec la possibilité de mixer du texte et du code comme avec R Markdown.

Un outil en ligne de commande (CLI) qui permet de générer plusieurs formats à partir d’un document .qmd.

1.2 Mardown et navigation dans le diaporama

Pour naviguer et utiliser un diaporama Quarto/revealjs, il existe plusieurs raccourcis clavier. Voir ici pour la liste complète.

Les principaux raccourcis à retenir sont :

• PgDown et PgUp pour passer les slides
  
• o pour naviguer rapidement entre les slides
  
• f pour passer en plein écran
  
• m pour accéder aux menus

1.3 Pourquoi faire vos diaporamas avec Quarto ?

• Si vous souhaitez intégrer du code/des outputs (graphiques, tableaux…) dans vos slides
• Quarto permet l’export de vos diaporamas en Pdf donc pas de risque de compatibilité si vous changez de PC.
• Le template assure l’adhérence à la charte graphique du Masa (logo, police Marianne….) => uniformité de vos présentations
• Avec Quarto, vos diaporamas peuvent être déployés sur une forge gitlab et ainsi être disponibles même si vous n’avez pas votre PC avec vous.
• Si vous êtes peu à l’aise avec Powerpoint

1.4 Guide de survie pour construire vos diapos

2.1 Titre de deuxième niveau

Titre de niveau 3

Titre de niveau 4

Titre de niveau 5

Titre de niveau 6

• liste de niveau 1
  • liste de niveau 2
    • liste de niveau 3
      • liste de niveau 4
        • liste de niveau 5
          • liste de niveau 6

2.2 Style du texte

En markdown

texte en italique : *texte en italique*
texte en gras : **texte en gras**
texte en gras et en italique : ***texte en gras et en italique***
texte barré : ~~texte barré~~

Avec des balises html

texte en italique : <i>texte en italique</i>
texte en gras : <b>texte en gras</b>
texte barré : <strike>texte barré</strike>
texte souligné : <u>texte souligné</u>

exemple de balises combinées avec markdown : <u>_un exemple_</u>

2.3 Style du texte

gras : [gras]{.bold} 

très gras : [très gras]{.bolder}

Taille des caractères

Texte très petit : [Texte très petit]{.tiny}
Texte plus petit : [Texte plus petit]{.small}
Texte standard : Texte standard
Texte plus grand : [Texte plus grand]{.large}
Texte encore plus grand : [Texte encore plus grand]{.Large}

• texte¹ : texte^[Une note de bas de page]
• texte_a (indice) : texte<sub>a</sub>

2.4 Couleurs du texte

Texte en jaune Masa : [Texte en jaune Masa]{.jaune_masa}

Texte en rose Masa : [Texte en rouge Masa]{.rose_masa}

Texte en marron Masa : [Texte en marron Masa]{.marron_masa}

Texte en noir : [texte en noir]{.black}

Texte en rouge : [texte en rouge]{.red}

Texte en bleu : [texte en bleu]{.blue}

Texte en vert : [texte en vert]{.green}

Texte en orange : [texte en orange]{.orange}

Texte en violet : [texte en violet]{.purple}

Texte en gris : [texte en gris]{.gray}

2.5 Palette de couleurs du MASA (1/2)

2.6 Palette de couleurs du MASA (2/2)

Exemples :

Texte avec la classe Cumulus2 : [Texte avec la classe Cumulus2]{.Cumulus2}
Texte avec la classe Terre_battue1 : [Texte avec la classe Terre_battue1]{.Terre_battue1}

Remarque : Si vous souhaitez utiliser les mêmes palettes pour vos graphiques sous R, utiliser {gouvdown}

2.7 Content-box

[texte encadré sur fond jaune]{.content-box-yellow}

texte encadré sur fond jaune

[texte encadré sur fond rouge]{.content-box-red}

texte encadré sur fond rouge

[texte encadré sur fond vert]{.content-box-green}

texte encadré sur fond vert

[cadre en pleine largeur]{.full-width .content-box-yellow}

cadre en pleine largeur

2.8 Content-box (sur 2 colonnes)

[Très serré !...]{.pull-left-30}Très serré !… [Très au large !...]{.pull-right-70}Très au large !…

[Serré !...]{.pull-left-40}Serré !… [Au large !...]{.pull-right-60}Au large !…

[Moitié !...]{.pull-left-50}Moitié !… [Moitié !...]{.pull-right-50}Moitié !…

[Au large !...]{.pull-left-60}Au large !… [Serré !...]{.pull-right-40}Serré !…

[Très au large !...]{.pull-left-70}Très au large !… [Très serré !]{.pull-right-30}Très serré !…

2.9 Callout-box (1/2)

Quarto contient par défaut des Callouts qui sont également très utiles pour attirer l’attention des lecteurs.
Il en existe de 5 types : note, warning, important, tip et caution.

=> Voir cette page pour apprendre leurs syntaxes.

2.10 Callout-box (2/2)

names(iris)
summary(iris)

2.11 Insérer un tableau

Ajouter un tableau en markdown est + facile qu’il n’y paraît. Cette page contient toutes les informations dont vous avez besoin. Ce site est particulièrement utile lorsque vous devez contistuer de “gros” tableaux.

| fruit  | price  |
|--------|--------|
| apple  | 2.05   |
| pear   | 1.37   |
| orange | 3.09   |

2.12 Insérer une image

Il existe de nombreuses possibilités pour ajouter des images à ce diaporama. Elles sont listées sur cette page.

![](img/pommes.png)

2.13 Équations mathématiques

Équation sur une ligne

  $$TCAM=\sqrt[n]\frac{valeurfinale}{valeurinitiale}-1$$

\[TCAM=\sqrt[n]\frac{valeurfinale}{valeurinitiale}-1\]

Équation sur plusieurs lignes

$$\begin{align}
(a+b)^3 &=(a+b)^2(a+b)\\
        &=(a^2+2ab+a^2)(a+b)\\
        &=a^3+3a^2b+3ab^2+b^3
\end{align}$$

3.1 Le code dans Quarto

Quarto permet d’afficher et d’exécuter du code R, Python, Julia, Observable…

Le code s’écrit dans des Code blocks ou Chunks dont les options sont très nombreuses (voir cette page pour pouvoir gérer le comportement de ces blocs de code.

Il faut retenir que ces options s’écrivent à la suite de |# et il suffit de consulter la documentation pour comprendre leurs fonctionnements.

Voyons quelques exemples en affichant du code R sans l’exécuter.

3.2 Intégration statique de code (1/4)

```{r}
#| echo: true
#| output: false
library(ggplot2)

ggplot(airquality, aes(Temp, Ozone)) + 
  geom_point() + 
  geom_smooth(method = "loess")
```

library(ggplot2)

ggplot(airquality, aes(Temp, Ozone)) + 
  geom_point() + 
  geom_smooth(method = "loess")

3.3 Intégration statique de code (2/4)

```{.r}
library(dplyr)

iris |> 
  group_by(Species) |> 
  summarise(Total_longueur = sum(Petal.Length, na.rm = TRUE))
```

library(dplyr)

iris |> 
  group_by(Species) |> 
  summarise(Total_longueur = sum(Petal.Length, na.rm = TRUE))

3.4 Intégration statique de code (3/4)

```{.r code-line-numbers="3-8"}
# Conversion d'un fichier csv en un fichier parquet partitionné :

csv_to_parquet(
  path_to_file = parquetize_example("region_2022.csv"),
  path_to_parquet = tempfile(fileext = ".parquet"),
  partition = "yes",
  partitioning =  c("REG")
)
#> Reading data...
#> Writing data...
#> ✔ Data are available in parquet dataset under /tmp/RtmpMT4bYz/file157830a758fa.parquet
#> Writing data..
```

# Conversion d'un fichier csv en un fichier parquet partitionné :

csv_to_parquet(
  path_to_file = parquetize_example("region_2022.csv"),
  path_to_parquet = tempfile(fileext = ".parquet"),
  partition = "yes",
  partitioning =  c("REG")
)
#> Reading data...
#> Writing data...
#> ✔ Data are available in parquet dataset under /tmp/RtmpMT4bYz/file157830a758fa.parquet
#> Writing data..

3.5 Intégration statique de code (3/4)

@fig-airquality Température et niveau d'ozone.

```{r}
#| echo: false
#| output: true
#| label: fig-airquality
#| fig-cap: Température et niveau d'ozone.
#| warning: false

ggplot(airquality, aes(Temp, Ozone)) + 
  geom_point() + 
  geom_smooth(method = "loess")
```

3.6 Intégration statique de données (1/2)

Sans mise en forme :

En tapant :

```{r}
head(iris)
```

On obtient :

3.7 Intégration statique de données (2/2)

Avec une mise en forme (avec le package kable par exemple)

En tapant :

```{r}
knitr::kable(head(iris), caption = "La table iris")
```

On obtient :

3.8 Utilisation avec Observable et une table (1/3)

Dans Quarto, on peut utiliser Observable comme indiqué sur cette page.

En tapant :

```{ojs}
classeur = FileAttachment("data/afrika.xlsx").xlsx()
data = classeur.sheet("data", {headers:true})
Inputs.table(data)
```

On obtient :

classeur = FileAttachment("data/afrika.xlsx").xlsx()
data = classeur.sheet("data", {headers:true})
Inputs.table(data)

3.9 Utilisation avec Observable et une carte (2/3)

Utilisons la librairie Javascript Bertin pour afficher un fond de carte.

```{ojs}
countries = FileAttachment("data/africa.json").json()
bertin = require("bertin@latest")
bertin.quickdraw(countries, 500)
```

countries = FileAttachment("data/africa.json").json()
bertin = require("bertin@latest")
bertin.quickdraw(countries, 500)

3.10 Utilisation avec Observable et une carte (3/3)

Avec quelques lignes de code, on peut obtenir rapidement une carte interactive :

viewof k = Inputs.range([10, 75], { label: "Taille", step: 1, value: 40 })
viewof symbol = Inputs.radio(["bubble", "square", "spikes"], { label: "Symbole", value: "bubble" })
viewof color = Inputs.color({label: "Couleur", value: "#CC0000"})
viewof toggle = Inputs.toggle({label: "Ecarter les symboles", value: false})

africa = bertin.merge(countries, "id", data, "iso3")

<!-- Réalisation de la carte en ronds proportionnels -->
bertin.draw({
  params : {width : 500, background: "#CCC", margin: 20}, 
  layers :
    [
      {
        type : symbol, 
        geojson: africa,
        values: "POP",
        k: k, // rayon du plus grand cercle
        fill: color,
        stroke: "white",
        dorling: toggle,
        leg_x: 30,
        leg_y: 300,
        leg_round: 0,
        leg_title: "Nombre d'habitants\n(en millions)",
        //tooltip: ["$name", "$POP"]
        tooltip: ["$name", d => Math.round(d.properties.POP) + " millions d'habitants"]        
      },
      {geojson: africa, fill: "#DDD"},
      {type: "header", text: "Le continent africain"},
      {type: "scalebar"}
    ]
  })

4.1 Modularité de fichiers quarto (.qmd)

{{< include 04_modulariteSupport.qmd >}}

4.2 Utilisation de variables

Utilisation du fichier _variables.yml

Exemple : Ainsi, au sein du MASA, vous pouvez contacter le support technique via l’adresse mail suivante : assist-stat.bmis.ssp.sg@agriculture.gouv.fr

. . .

Utilisation des métadonnées

Exemple : Pour ce support, les dimensions de la page sont de 1080 (hauteur) x 1920 (largeur). Cette partie du support a pour vocation de créer un exemple de modularité dans le support de présentation.

5.1 PDF : Mode opératoire

• Ouvrez votre diaporama avec Edge ou Chrome.
• Passer en mode export pdf
  • cliquer sur l’icône du menu : sous-menu “Tools” cliquer sur “PDF Export mode” ou taper sur la lettre “e” (raccourci)

• Dans la barre d’outils de votre navigateur: aller dans Fichier Imprimer…
• Dans la fenêtre qui s’ouvre :
  • Sélectionner dans le champ destination “Enregistrer au format PDF”
  • Cocher l’option “Imprimer les arrières plans”
  • Vérifier que vous êtes bien au format paysage et régler les marges à “aucune”. Voir exemple de diaporama.

5.2 Autres formats

Il est possible de faire des exports sous d’autres formats avec quarto, et de les cumuler au sein du projet. Par exemple, dans ce support, il est possible de faire un export (relativement sommaire) au format .odt, ouvrable avec la suite libreOffice. Pour ce faire :

• dans Rstudio, ouvrer le fichier .qmd, et cliquer sur la flèche déroulante acollée au bouton “render”. Cliquer sur “Render odt”.

6.1 Sites de présentation

Quarto :

• Présentation des fonctionnalités Quarto
• Code source associé à la présentation Quarto
• documentation quarto
• quarto-tip_A_Day

MASA :

• Charte graphique du Masa
• Guide d’utilisation des couleurs

6.2 Technologies utilisées

• Documentation markdown
• Documentation revealjs
• Documentation scss
• Documentation css

6.3 Extensions utilisées

• Pointer : presser “q” pour changer le pointer de la souris
• Confetti : presser “c” pour envoyer des confettis
• Verticator : permet d’afficher le nombre de slides disponibles verticalement.
• Liste des icones disponibles
  • Exemples :
    • (sans pop-up)
      
    • (avec pop-up)

6.4 À vous maintenant !

• Clôner ou télécharger les dépôts suivants :
  • Ce support de présentation sur cette page
    
  • Ce template vide sur cette page

Il est possible de constituer vos diaporamas sur votre poste en local, sur Cerise V3 et sur le SSP Cloud.