GeoViz2018_R_shiny.Rmd

---
title: "Interfaces graphiques avec R et shiny"
subtitle: "1 - Les concepts de base de shiny"
author: "Robin Cura & Lise Vaudor<br/>d'après L. Vaudor : <u><a href='https://github.com/lvaudor/support_shiny'>Formation shiny (2018)</a></u>"
date: ["16/10/2018<br/><br /> École Thématique GeoViz 2018 "]
output:
  xaringan::moon_reader:
    chakra: "www/libs/remark.min.js"
    lib_dir: "www/libs"
    css: ["www/xaringan-themer.css", "www/style.css"]
    nature:
        beforeInit: "www/macros.js"
        highlightLines: true
editor_options: 
  chunk_output_type: console
---
```{r xaringan-themer, include = FALSE}
library(xaringan)
library(xaringanthemer) # devtools::install_github("gadenbuie/xaringanthemer")
duo(
  primary_color = "#1F4257",
  secondary_color = "#F97B64",
  header_font_google = google_font("Josefin Sans"),
  text_font_google   = google_font("Montserrat", "300", "300i"),
  code_font_google   = google_font("Droid Mono"),
  outfile = "www/xaringan-themer.css"
)
library(knitr)
opts_chunk$set(cache = TRUE,
               cache.lazy = FALSE)
hook_source <- knitr::knit_hooks$get('source')
knitr::knit_hooks$set(source = function(x, options) {
  x <- stringr::str_replace(x, "^[[:blank:]]?([^*].+?)[[:blank:]]*#<<[[:blank:]]*$", "*\\1")
  hook_source(x, options)
})
```

```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)
library(dplyr)
library(ggplot2)
library(readr)
library(lubridate)
library(stringr)
library(shiny)
```


## Sommaire

.large[
.pull-left[
- [Organisation générale d'une application shiny](#orga-generale)
- Les composants/widgets
  - [Les Inputs](#inputs)
  - [Les Outputs](#outputs)

- Mise en page
  - [Layouts](#layouts)
  - [Panels](#panels)
]

.pull-right[
- [Réactivité : résumé](#all-reactives)
  - [Base](#reactive-base)
  - [Sortie réactive](#reactive-outputs)
  - [Fonctions réactives](#reactive-fonctions)
  - [Observation d'éléments réactifs](#reactive-observe)
  - [Bloquer la réactivité](#reactive-isolate)
  
- Applications
  - [Démonstration](#demonstration)
  - [Exercice](#exercice)
]
]
---
## Shiny: qu'est-ce que c'est?

Shiny, c'est un **package R** qui facilite la construction d'**applications web** interactives depuis R.

.center[
![](www/img/basics.png)
]

Les utilisateurs peuvent simplement manipuler une application "clique-boutons" pour exécuter et afficher des résultats fournis par du code R.

---
## Shiny: qu'est-ce que c'est?

- Les résultats fournis sont **réactifs**, c'est-à-dire que quand l'utilisateur fournit une nouvelle valeur d'**input** (= entrée) via un **widget** (= window gadget), les codes R qui dépendent de cet input sont réexecutés et leurs sorties (**output**) affichées.

    - Voir les exemples dans la gallerie shiny : http://shiny.rstudio.com/gallery/


- Remarquez que toutes ces applications s'affichent dans un navigateur internet : elles sont donc rendues en **html**.

- Shiny permet en fait de produire des applications en HTML sans faire appel à ce langage, simplement avec du code R.

- Une connaissance de **html**, **css** et **javascript** reste un plus pour produire des applications plus personnalisées.


---
name: orga-generale
## Shiny: qu'est-ce que c'est?

.pull-left[
Une Shiny App se structure en deux parties:

- un côté `UI` qui regroupe tous les éléments de **mise en forme et d'affichage** de l'interface utilisateur elle-même (affichage des **inputs** et des **outputs**)

- un côté `Server` où sont exécutés les codes R qui servent à **produire les outputs** (graphiques, tables, traitements, etc.) et à les **mettre à jour** en cas de changement dans les valeurs d'**inputs**
]

.pull-right[
![](www/img/mygraph1.png)
]

---
## Introduction: démarrer avec le template

.pull-left[
Pour construire votre première appli Shiny, vous pouvez vous aider du **modèle** (*template*) fourni par RStudio, en faisant `File -> New file -> Shiny Web App -> Multiple File`.

Deux fichiers sont alors créés: `server.R`, et `ui.R`.

- La partie **serveur** contient l'ensemble du code R qui doit être executé par l'appli pour fournir les sorties.

- La partie **ui** (= user interface) contient les instructions de construction/mise en forme de l'interface utilisateur.
]

.pull-right[
Vous pouvez ouvrir l'un ou l'autre, et cliquer sur le bouton **Run App** en haut à droite de la partie "script" de l'interface RStudio pour **lancer l'application**.

![:scale 94%](www/img/basics_app_template.png)
]

---
## Construire une app (1)

![](www/img/building_an_app_2.png)

- ![:scale 4%](www/img/ui.png) UI :

  - Ajoutez des **éléments d'entrée** à l'interface avec les fonctions de type `*Input()`
  - Ajoutez des **éléments de sortie** à l'interface avec les fonctions de type `*Output()`

- ![:scale 4%](www/img/server.png) server:

  - Encapsulez le code utilisé pour créer l'output dans une fonction de type `render*()`
  - **Assignez à l'output** la sortie de `render*()`.

---
## Construire une app (2)

- Deux structures de base sont possibles pour les apps: soit avoir tout réuni dans un même script (`app.R`), soit séparer la partie **ui** et la partie **server** dans deux fichiers (**ui.R** et **server.R**). C'est cette deuxième solution que nous allons privilégier ici.

.center[
![:scale 50%](www/img/building_an_app_2bis.png)
]

.pull-left[
- Dans cet exemple, `ui` est un *objet de type UI* issu de l'appel à une *fonction*, ici `fluidPage()`. Les différents éléments passés à fluidPage() sont donc des *arguments* : ils sont séparés par des virgules. 
]

.pull-right[
- Dans `server` on définit une *fonction*, avec `input` et `output` comme arguments. Le corps de cette fonction s'écrit donc comme une suite de lignes de commandes : les commandes sont séparées par des retours à la ligne.
]

---
## Construire une app (3)
.center[
![:scale 80%](www/img/building_an_app_3.png)
]
- Le répertoire qui contient votre application doit être construit d'une manière qui facilite son déploiement sur un serveur distant :

  - `ui.R`, `server.R`, et éventuellement `global.R` à la racine
  - des sous-dossiers pour (par exemple) les données, des scripts, etc.
  - un dossier `www` qui permet de faire référence à des éléments utiles au navigateur web, *qui ne sont pas issus de calculs de R* (images, photos, logos, feuilles de style css, etc.)

- Les commandes du fichier **global.R** sont exécutées dans un environnement **"global"**. C'est-à-dire que les packages qu'on y charge ou les objets qu'on y crée seront disponibles **à la fois pour les parties UI et Server**. Les commandes de **global** sont donc exécutées une fois pour toutes (c'est-à-dire, une fois par session, et avant toute autre chose) au lancement de l'application.


---
# Partie 2 : Inputs et outputs
---
name: inputs
## Inputs

- Les **inputs** sont les composants (*widgets*) de l'interface graphique qui permettent aux utilisateurs de fournir des valeurs aux paramètres d'entrée.

.center[
![](www/img/shiny-widgets-gallery_1.png)
]

---

## Inputs

- Les **inputs** sont les composants (*widgets*) de l'interface graphique qui permettent aux utilisateurs de fournir des valeurs aux paramètres d'entrée.

.center[
![](www/img/shiny-widgets-gallery_2.png)
]

- Vous pouvez avoir un aperçu de l'ensemble des inputs disponibles pour Shiny dans la gallerie des *widgets* : https://shiny.rstudio.com/gallery/widget-gallery.html

---
## Inputs - Choix multiple

Pour choisir **une ou plusieurs valeurs** parmi plusieurs valeurs **prédéfinies**, plusieurs widgets sont disponibles:

- `radioButtons()` et `selectInput()` permettent de choisir **une valeur**.
- `checkboxGroupInput()` et `selectInput(..., multiple=TRUE)` permettent de choisir **plusieurs valeurs**.

.center[
![](www/img/choice_levels.png)
]

---
## Inputs - Numérique

Les *inputs* numériques permettent de sélectionner une valeur numérique parmi un ensemble prédéfini.

- `numericInput()` permet de saisir une valeur en l'entrant dans un champs
- `sliderInput()` permet de saisir une valeur en faisant défiler un *slider*
- `rangeInput()` permet de sélectionner graphiquement une étendue numérique

.center[
![](www/img/choice_numeric.png)
]

---
## Inputs - Texte

- `textInput()` (pour un texte court) ou `textAreaInput()` (pour un texte plus long, par exemple un paragraphe de commentaires)
- `passwordInput()` pour un mot de passe (les caractères sont masqués)

.center[
![](www/img/choice_text.png)
]

---
## Inputs - Divers
.center[
![:scale 50%](www/img/choice_other.png)
]

Parmi les autres widgets les plus utiles, on trouve:

- `fileInput()` qui permet de charger un fichier

- `checkboxInput()` qui permet de spécifier si un paramètre a pour valeur `TRUE` ou `FALSE`

- `dateInput()` et `dateRangeInput()` qui permettent de spécifier des dates.

---
## Inputs - Récupérer les valeurs

- On peut récuperer les valeurs d'un **input**, dans la partie `server` d'une appli, en indiquant son nom dans l'objet `input` — une sorte de liste —, donc avec l'opérateur **$** : `input$ID_DE_L_INPUT`

.small[
```{r, eval = FALSE}
#############
# Partie UI #
#############
sliderInput(inputId = "monSlider1", label = "Slider 1",
            min = 0, max = 50, value = 25, step = 5),
sliderInput(inputId = "monSlider2", label = "Slider 2",
            min = -100, max = 100, value = 0, step = 10),
selectInput(inputId = "maSelection", label = "Choisir un élément",
            choices = c("Pomme", "Poire", "Papaye"), multiple = FALSE)
#################
# Partie server #
#################
input$monSlider1
# > 25
input$monSlider2
# > 0
input$maSelection
# > "Pomme"
```
]

---
name: outputs
## Outputs (1)

- Les **outputs** sont les composants de l'interface graphique qui permettent d'afficher des éléments résultant d'un traitement dans R (graphiques, tables, textes...).

.center[
![:scale 65%](www/img/shiny-outputs.png)
]

---
## Outputs (2)

- Les **outputs** sont les composants de l'interface graphique qui permettent d'afficher des éléments résultant d'un traitement dans R (graphiques, tables, textes...).

- Ils font partie de l'interface graphique, et se déclarent donc, comme les **inputs**, dans la partie `UI` :

    - **graphiques**  : `plotOutput()`
    - **texte** : `textOutput()`
    - **table** : `tableOutput()`

Il est également possible de produire des outputs de type

- **image** (`imageOutput()`): à ne pas confondre avec `plotOutput()` : ce sont des images qui ne font pas l'objet d'une génération par R mais sont simplement affichées, en .jpg ou .png par exemple.
- **ui** : (`uiOutput()`): cela correspond à la production d'un nouveau "morceau" d'interface utilisateur (du html, donc!).
]

---
## Outputs (3)

- Shiny génère (*render*) le contenu des **outputs** et, celui-ci réagit donc à du code écrit dans la partie `server` de shiny : <br/>

.center[
![:scale 90%](www/img/outputs.png)
]

Remarquez, dans le graphique ci-dessus, comme une fonction `renderTruc()` côté **server** correspond à une fonction `TrucOutput()` côté **UI**.

---
## Outputs (4)

- Dans la partie `ui`, on déclare des composants "graphiques" de certains types (`trucOutput()`), et on calcule le contenu à afficher dans ces composants dans la partie `server` (`renderTruc()`), en liant les deux via la déclaration d'un **output**

.center[
![](www/img/render_reactive_output.png)
]

---
## Outputs (5)
.small[
```{r, eval = FALSE}
#############
# Partie UI #
#############

plotOutput(outputId = "graphique1"),
plotOutput(outputId = "graphique2"),
textOutput(outputId = "texte1")

# [...]

#################
# Partie server #
#################
output$texte1 <- renderText({print(c(1:50))})
output$graphique1 <- renderPlot({plot(1:50)})
output$graphique2 <- renderPlot({plot(50:1)})
```
]
.pull-left[
```{r, echo = FALSE, fig.hold = TRUE, fig.width = 2.4, fig.height= 3}
plot(c(1:50))
plot(c(50:1))
```
]
.small[
.pull-right[
```{r, echo = FALSE}
print(c(1:50))
```
]
]
---
# Partie 3 : Organisation de l'UI : Layouts et panels
---
name: panels
## Les Panels (1)

- Les **panels** permettent de réunir différents éléments (widgets, textes, images...). Les différents types de panels correspondent à différents **styles** (par exemple, fonds gris pour `wellPanel()`, caractères colorés pour `titlePanel()`, etc.)

.center[
![:scale 50%](www/img/panels.png)
]

- Il est possible de **combiner différents types de panels** en les **juxtaposant** ou en les **emboîtant**, comme dans l'exemple ci-contre.

Tout ce que je vais vous montrer dans cette partie **concerne la partie UI des Shiny Apps**!!

---
## Les Panels (2)

- Shiny utilise le *framework* javascript/CSS **Bootstrap** qui définit une page comme une grille :
    - une page est divisée en colonnes (`column()`) et en lignes (`fluidRow()`)
    - la hauteur d'une ligne est celle de son plus grand élément
    - la page est divisée en **12 colonnes** : une colonne de largeur (`width`) **6** occupera donc la moitiée de l'espace horizontal

```{r, eval = FALSE}
fluidPage(
  titlePanel("Ceci est un titlePanel", ),
  fluidRow(column(width = 6, "Première colonne de largeur 6"),
           column(width = 2, "Deuxième colonne de largeur 2"),
           column(width = 4, "Troisième colonne de largeur 4")
           ),
  fluidRow(
    column(width = 6, "Colonne de largeur 6"),
    column(width = 6, "Colonne de largeur 6")
  )
)
```

---
## Les Panels (2)

.small[
```{r, eval = FALSE}
fluidPage(
  titlePanel("Ceci est un titlePanel", ),
  fluidRow(column(width = 6, "Première colonne de largeur 6"),
           column(width = 2, "Deuxième colonne de largeur 2"),
           column(width = 4, "Troisième colonne de largeur 4")
           ),
  fluidRow(
    column(width = 6, "Colonne de largeur 6"),
    column(width = 6, "Colonne de largeur 6")
  )
)
```
]
.center[
![:scale 100%](www/img/shiny-layout-columns-example.png)
]
---
name: layouts
## Layouts (1)

- On peut par ailleurs utiliser des types de **layouts** prédéfinis pour organiser son appli...

.center[
![:scale 50%](www/img/layouts1.png)
]

- **fluidRow()** permet de définir précisément l'organisation de l'appli, en lignes et colonnes. Chaque ligne compte 12 unités de largeur au total.

- **flowLayout()** adapte le layout en fonction de la taille totale de l'élément et la taille des éléments qui le composent.

- La différence entre ces types de layout est surtout visible en modifiant la taille de la fenêtre de l'application.



---
## Layouts (2)

- On peut par ailleurs utiliser des types de **layouts** prédéfinis pour organiser son appli...

.pull-left[
![:scale 100%](www/img/layouts2.png)
]
.pull-right[
- `sidebarLayout()` divise la fenêtre en deux éléments : un élément latéral plus étroit (qui contiendra généralement des inputs) et un élément principal (qui contiendra généralement des outputs). 

- `splitLayout()` permet de diviser la fenêtre en éléments de taille égale. Si le contenu des éléments est trop important l'élément devient "scrollable".

- `verticalLayout()` dispose les éléments les uns en dessous des autres.
]
---
## Layouts en onglets

- Les différents *inputs* et *outputs* peuvent aussi être organisés dans des structures emboîtantes :

.center[
![](www/img/layer_tabpanels.png)
]

---
# Partie 4 : Réactivité

---
name: reactive-base
## Réactivité : base

.center[
![:scale 70%](www/img/reactivity.png)
]

Dans sa version la plus simple, la chaîne de réactivité ressemble en fait à ceci :

![](www/img/www/figures/reactivity_simple.png)

Comprendre : à chaque changement de `input$x`, l'`expression()` est ré-évaluée et met à jour `output$y`.

---
name: reactive-outputs
## Fournir des outputs réactifs

.center[
![:scale 60%](www/img/reactivity.png)
]

Pour rappel, voici comment l'on procède pour fournir un output réactif:

.center[
![:scale 50%](www/img/render_reactive_output.png)
]

---
## Fournir des outputs réactifs - exemple (1)
.pull-left[

![](www/img/mygraph5.png)

]
.pull-right[

Observez le diagramme ci-contre, qui décrit un exemple comprenant : 

* 3 inputs:
    + `input_a`
    + `input_b`
    + `input_c`
* 2 outputs:
    + `output_d` ; dépend de :
      * `input_a`
    + `output_e` ; dépend de :
      * `input_a`
      * `input_b`
      * `input_c`
    
On va utiliser cet exemple pour illustrer le fonctionnement de la **réactivité** des applications Shiny.

]

---
## Fournir des outputs réactifs - exemple (2)

Commençons par simplifier et expliquer ce diagramme:

.pull-left[
.center[
![](www/img/mygraphR.png)
]
]
.pull-right[
À chaque changement de valeur de `input_a` :
* La fonction `makes output_d` est executée et produit une sortie (`shows output_d`)
* La fonction `makes output_e` est executée et produit une sortie (`shows output_e`)

A chaque changement de valeur de `input_b` ou `input_c` :
* la fonction `makes output_e` est executée et produit une sortie (`shows output_e`)

]


---
## Fournir des outputs réactifs - exemple (3)

.smaller[
```{r, eval = FALSE}
# Global
library(shiny)
library(tidyverse)

# UI
ui <- fluidPage(
    fluidRow(
        column(4, sliderInput(inputId = "input_a", label = "Nb Observations",
                              min = 1, max = 150, value = 150)),
        column(4, sliderInput(inputId = "input_b", label = "Nb barres",
                              min = 2, max = 30, value = 20)),
        column(4, selectInput(inputId = "input_c", label = "Couleur",
                              choices = c("Grey", "Red", "Blue", "Green")))
    ),
    fluidRow(
        column(6, dataTableOutput(outputId = "output_d")),
        column(6, plotOutput(outputId = "output_e"))
    )
)

# Server
server <- function(input, output) {
output$output_d <- renderDataTable({
    table_filtree <- iris %>%
        sample_n(input$input_a) %>%
        arrange(Species, Sepal.Length)
    })
output$output_e <- renderPlot({
    table_filtree <- iris %>%
        sample_n(input$input_a) %>%
        arrange(Species, Sepal.Length)
    ggplot(table_filtree) +
        geom_histogram(aes(x = Sepal.Length), bins = input$input_b,
                       fill = input$input_c)
})
}
```
]

---
## Fournir des outputs réactifs - exemple (3)

![](www/img/reactif1.gif)

---
## Fournir des outputs réactifs - exemple (3)

#### Quel est le problème avec cette application ?

.pull-left[
.smaller[
```{r, eval = FALSE}
# Server
server <- function(input, output) {
output$output_d <- renderDataTable({
    table_filtree <- iris %>%
        sample_n(input$input_a) %>% #<<
        arrange(Species, Sepal.Length)
    })
output$output_e <- renderPlot({
    table_filtree <- iris %>%
        sample_n(input$input_a) %>% #<<
        arrange(Species, Sepal.Length)
    ggplot(table_filtree) +
        geom_histogram(aes(x = Sepal.Length),
                       bins = input$input_b,
                       fill = input$input_c)
})
}
```
]
]

.pull-right[
![](www/img/reactif1.gif)
]

--

- L'histogramme et le tableau affiché ne correspondent pas aux mêmes données : l'échantillonage est exécuté deux fois.

--

- La "réactivité" ne peut reposer uniquement sur des `input`, on a aussi besoin de structures **réactives** capables de stocker (et de mettre à jour) des objets.

---
name: reactive-fonctions
## Modulariser les réactions

.center[
![:scale 60%](www/img/reac_modularize_reactions.png)
]

.pull-left[
- La fonction `reactive()` permet de modulariser du code réactif...
- L'usage de **reactives** est particulièrement utile lorsque certains morceaux de code sont utilisés par **plusieurs outputs à la fois**, et permet d'éviter des redondances dans le code.
]
.pull-right[
.center[
![](www/img/modularize_reactions.png)
]
]

---
## Modulariser les réactions - exemple

.pull-left[
On adapte notre code inital
.small[
```{r, eval = FALSE}
# Server
server <- function(input, output) {
output$output_d <- renderDataTable({
    table_filtree <- iris %>%
        sample_n(input$input_a) %>%
        arrange(Species, Sepal.Length)
    })
output$output_e <- renderPlot({
    table_filtree <- iris %>%
        sample_n(input$input_a) %>%
        arrange(Species, Sepal.Length)
    ggplot(table_filtree) +
        geom_histogram(aes(x = Sepal.Length),
                       bins = input$input_b,
                       fill = input$input_c)
})
}
```
]
]

--

.pull-right[
Avec une fonction `reactive()` pour stocker notre table

.small[
```{r, eval = FALSE}
# Server
server <- function(input, output) {
  
table_filtree <- reactive({ #<<
  iris %>% #<<
    sample_n(input$input_a) %>% #<<
    arrange(Species, Sepal.Length) #<<
})  #<<
output$output_d <- renderDataTable({
    table_filtree() #<<
    })
output$output_e <- renderPlot({
    ggplot(table_filtree()) + #<<
        geom_histogram(aes(x = Sepal.Length),
                       bins = input$input_b,
                       fill = input$input_c)
})
}
```
]
]

- Une fonction `reactive()` est une **fonction** : on l'apelle donc avec des parenthèses :
.small[
```{r, eval = FALSE}
# Declaration
abc <- reactive(mean(iris$Sepal.Length))
# Utilisation
abc()
#> 5.843333
```
]
---
## Modulariser les réactions - exemple

![](www/img/reactif1.gif)

---
name: reactive-observe
## Observer des variables (1)

- On peut parfois avoir besoin d'observer et de réagir à des changements de variables réactives, sans pour autant renvoyer un résultat.

  - Par exemple, dans l'application présentée, le *slider* du nombre de barres de l'histogramme ("Nb barres") a des bornes min et max définies dans l'`UI`, mais on peut vouloir ajuster ces bornes.
  - Quand les 150 observations sont présentes, le maximum (*30*) est adapté
  - Mais quand on échantillonne seulement 20 observations, le nombre de barres maximum devrait s'adapter.
  
On utilise pour cela la fonction `observe()` :
.center[
![:scale 70%](www/img/reac_trigger_arbitrary_code.png)
]

---
## Observer des variables (2)

.pull-left[
![](www/img/shiny-thinkr-observe.png)
]

.pull-right[
.small[
```{r, eval=FALSE}
# Server
server <- function(input, output, session) {
# [...]

observe({
  if (input$input_a > 30){
  updateSliderInput(inputId = "input_b",
                    session = session,
                    min = 2,
                    max = 30)
  } else {
  updateSliderInput(inputId = "input_b",
                    session = session,
                    min = 2,
                    max = input$input_a,
                    value = input$input_a/2)
  }
})

}
```

]
]

---
name:reactive-isolate
## Empêcher des réactions

- On peut chercher à ne pas executer un code quand un élément réactif change

.center[
![:scale 80%](www/img/reac_prevent_reactions.png)
]


---
## Empêcher des réactions


.pull-left[
![](www/img/prevent_reactions.png)
]

.pull-right[
.small[
```{r, eval = FALSE}
# UI
fluidRow(
  column(width = 4,textInput("word1",
                             "First word",
                             "Hello")),
  column(width = 4,textInput("word2",
                             "Second word",
                             "Master")),
  column(width = 4,textOutput("combi"))
)
# Server      
output$combi <- renderText({
  paste(input$word1,isolate(input$word2))
  })
```
]
]

- Ici, l'output n'est actualisé que quand le deuxième input est modifié.
- **Une modification du premier input ne déclenche pas le code contenu dans le contexte réactif**.

---
name: all-reactives
## Récapitulatif des éléments réactifs

.center[
![:scale 95%](www/img/shiny-thinkr-reactives_1.png)
![:scale 65%](www/img/shiny-thinkr-reactives_2.png)
]

---
name: demonstration
class: middle
## Une petite démonstration

- On va adapter l'application de base aux données "Dans Ma Rue" pour créer une application d'exploration interactive de ces données.
- On souhaite donc avoir :
  - Une carte de localisation des incidents
  - Un moyen de sélectionner l'année
  - Un moyen d'isoler des types d'incidents
  - Un graphique récapitulatif des incidents sélectionnés


---
name: exercice
class: middle, inverse
## Exercice

#### Depuis la base applicative créée auparavant, améliorer l'application pour la rendre plus adaptée à l'exploration des données.

Quelques idées/pistes :
- Remplacer la carte statique par une carte dynamique
- Intégrer une exploration des sous-types
- Intégrer les données IRIS pour les rendre elles aussi explorables
- Remplacer le graphique récapitulatif par un graphique interactif
- Changer la manière de sélectionner l'année