4 Le mot-clé `clickSelects`

Traduction de l’anglais Ch04-clickSelects

Dans ce chapitre, nous expliquons clickSelects, l’un des deux principaux mots-clés qu’animint2 propose pour la visualisation interactive de données. Le mot-clé clickSelects précise quelle variable de séléction sera mise à jour quand on clique sur le geom correspondant. Chaque geom d’une visualisation de données possède son propre ensemble de données et sa propre définition du mot-clé clickSelects. Ainsi, en cliquant sur différents geoms, on peut modifier différentes variables de sélection.

Après avoir lu ce chapitre, vous serez en mesure de

Comprendre comment les légendes interactives utilisent implicitement les clickSelects.
Utiliser le mot-clé clickSelects dans vos esquisses de graphiques.
Traduire vos esquisses de graphiques avec clickSelects en code R.
Utiliser l’option selector.types pour spécifier plusieurs variables de sélection.

4.1 Les légendes interactives utilisent implicitement `clickSelects`

Dans cette section, nous expliquerons comment le mot-clé clickSelects est implicitement utilisé dans les légendes interactives. Si vous avez lu les chapitres précédents, vous avez déjà utilisé implicitement clickSelects, qui a été créé automatiquement pour les légendes interactives dans les chapitres précédents. Considérons l’esquisse de la visualisation de données de la Banque mondiale présentée au dernier chapitre.

Puisque la légende a clickSelects=région , cliquer sur une entrée de cette légende met à jour la variable de sélection région. Notez que animint2 rend automatiquement chaque légende discrète interactive, vous n’avez donc pas besoin de spécifier explicitement clickSelects=région pour la légende. En fait, lorsque nous avons spécifié color=région pour le geom_point animint2 fait deux choses automatiquement :

showSelected=région est aussi affecté au même geom_point .
clickSelects=région est attribué à la légende des couleurs.

Notez que les mots-clés clickSelects ne sont pas limités aux légendes interactives. Chaque geom a sa propre définition de clickSelects qui détermine la variable de sélection qui doit être mise à jour lorsqu’on clique sur ce geom. Dans la section suivante, nous donnerons plusieurs exemples sur la manière dont clickSelects peut être utilisé en combinaison avec showSelected pour créer des visualisations de données interactives.

4.2 Utiliser `clickSelects` pour identifier des points sur un nuage de points

L’objectif de cette section est de créer la visualisation suivante des données de la Banque mondiale.

Texte de la visualisation de la Banque mondiale

Pour commencer, considérons le code R suivant qui génère un nuage de points des données de la Banque mondiale :

library(animint2)
data(BanqueMondiale, package="animint2fr")
gg_nuage <- ggplot()+
  geom_point(aes(
    x=espérance.de.vie, y=taux.de.fertilité, color=région,
    key=pays),
    showSelected="année",
    clickSelects="pays",
    data=BanqueMondiale)
gg_nuage

Warning: Removed 1490 rows containing missing values (geom_point).

Notez que le graphique ci-dessus n’est pas interactif, car il est affiché à l’aide du périphérique graphique R traditionnel. En revanche, afficher le même ggplot en utilisant animint2 donne le graphique interactif suivant :

(vis.nuage <- animint(
  nuage=gg_nuage,
  duration=list(année=2000)))

Essayez de cliquer sur des points de données dans le nuage de points ci-dessus. Vous devriez voir la valeur de la variable pays changer après avoir cliqué sur un point de données. Vous devriez également voir que le point de données pour le pays sélectionné est plus foncé que les autres. Cela permet de mettre en évidence la sélection en cours, cette surbrillance est générée automatiquement pour chaque geom avec clickSelects . Par défaut, le point sélectionné a alpha=1 (totalement opaque, pas de transparence), et les autres points ont alpha=0.5 (moitié semi-transparent). Ces valeurs par défaut peuvent être personnalisées ; par exemple, dans le code ci-dessous, un contour noir est utilisé pour mettre en évidence la sélection actuelle.

animint(
  ggplot()+
    geom_point(aes(
      x=espérance.de.vie, y=taux.de.fertilité, fill=région,
      key=pays),
      shape=21,
      color="black",
      color_off=NA,
      showSelected="année",
      clickSelects="pays",
      data=BanqueMondiale))

La visualisation de données ci-dessus affiche le nom du pays sélectionné dans le menu de sélection, mais il serait préférable de l’afficher sous forme d’une étiquette de texte sur le nuage de points. Nous pouvons le faire en ajoutant une couche geom_text avec deux variables showSelected :

vis.text <- vis.nuage
vis.text$nuage <- gg_nuage+
  geom_text(aes(
    x=espérance.de.vie, y=taux.de.fertilité, label=pays,
    key=pays),
    showSelected=c("année", "pays"),
    data=BanqueMondiale)
vis.text

Après avoir cliqué sur un point de données dans le nuage de points ci-dessus, vous devriez voir apparaître une étiquette de texte avec le nom du pays. Essayez également de changer l’année à l’aide du menu de sélection. Vous devriez voir l’étiquette de texte se déplacer dans une transition fluide en même temps que le point de données correspondant.

La visualisation de données ci-dessus contient plus d’un geom, chacun avec des caractéristiques interactives différentes. Essayez de cliquer sur le bouton “Démarrer la visite” au bas de la visualisation de données, qui affichera les fonctions interactives disponibles pour le premier geom de la visualisation de données. En cliquant sur “Next”, vous obtiendrez des informations sur le prochain geom, et en cliquant sur “Done” ou sur l’arrière-plan gris, vous mettrez fin à la visite guidée. La fonction “Start Tour” peut être utile aux nouveaux utilisateurs de votre visualisation de données pour découvrir les fonctions interactives présentes dans chaque geom. Les informations affichées pendant la visite peuvent être personnalisées, en définissant les paramètres help et title de chaque geom.

Comme nous l’avons expliqué dans le dernier chapitre, toute variable spécifiée à l’aide du mot-clé showSelected d’un geom est traitée comme une variable interactive. Dans l’exemple ci-dessus, nous avons spécifié deux variables showSelected pour le geom_text. Cela signifie que l’on ne dessine qu’une étiquette de texte pour les lignes de la base de données BanqueMondiale qui correspondent aux valeurs actuelles des deux variables de sélection. Étant donné que chaque combinaison de pays et année a une ligne dans ces données, une seule étiquette de texte sera affichée à la fois.

Essayez de cliquer sur l’entrée de la légende qui correspond à la région du pays actuellement sélectionné (par exemple, si le Canada est sélectionné, essayez de cliquer sur l’entrée de la légende Amérique du Nord). Vous devriez voir le point disparaître, mais le texte rester affiché.

Exercice : comment faire disparaître le texte en même temps que le point ? Indice : il faut ajouter un mot-clé au geom_text.

Dans le dernier chapitre, nous avons introduit les termes “manipulation directe” et “manipulation indirecte” pour décrire les interactions avec les légendes et les menus. Dans la visualisation de données ci-dessus, nous pouvons modifier la valeur de la variable de sélection pays en cliquant sur un point de données (manipulation directe) ou en utilisant le menu de sélection (manipulation indirecte). Les deux techniques sont utiles, mais à des fins différentes :

La manipulation directe, soit de cliquer sur les points de données, est utile pour trouver le nom des pays ayant des valeurs extrêmes de taux de fertilité et d’espérance de vie. Par exemple, pour l’année 1960, en cliquant sur le point en bas à gauche du graphique, on découvre le nom du pays, le Gabon.
La manipulation indirecte à l’aide des menus est utile pour voir la position tracée d’un pays d’intérêt. Par exemple, il serait difficile de trouver la France en cliquant sur tous les différents points, mais il est simple de trouver la France en tapant son nom dans le menu de sélection.

Notez que lorsque la visualisation ci-dessus est affichée pour la première fois, le pays sélectionné est Andorre et l’année sélectionnée est 1960. Comme les données pour Andorre sont manquantes en 1960, aucune étiquette de texte n’est affichée au départ. Pour modifier la première sélection, vous pouvez spécifier l’option first comme expliqué dans la section suivante.

4.3 L’option `first`

Pour spécifier la sélection qui doit être affichée lorsque la visualisation de données est exécutée pour la première fois, utilisez l’option first. Il doit s’agir d’une liste nommée avec des entrées pour chaque variable de sélection. Par exemple, le code ci-dessous spécifie 1970 comme première année, le Canada comme premier pays, et l’Amérique du Nord et l’Asie du Sud comme premières régions.

vis.first <- vis.text
vis.first$first <- list(
  année=1970,
  pays="Canada",
  région=c("Amérique du Nord", "Asie du Sud"))
vis.first

Notez que dans la visualisation des données ci-dessus, il n’y a qu’un seul pays sélectionné à la fois. Dans la section suivante, nous expliquerons comment l’option selector.types peut être utilisée pour modifier la variable de sélection pays en une variable de sélection multiple.

4.4 L’option `selector.types`

Dans cette section, notre objectif est de produire une version légèrement plus complexe du nuage de points de la section précédente. L’esquisse ci-dessous ne présente qu’une seule différence par rapport à l’esquisse de la dernière section : les étiquettes de texte sont affichées pour plus d’un pays.

Dans animint2, chaque variable de sélection a un type, soit simple, soit multiple. La sélection unique signifie qu’une seule valeur peut être sélectionnée à la fois. La sélection multiple signifie qu’un nombre quelconque de valeurs peut être sélectionné à la fois. Dans les graphiques de la section précédente, la sélection multiple a été utilisée pour la variable région mais pas pour les variables année et pays. Comment cela se fait-il ?

Par défaut, animint2 attribue une sélection multiple à toutes les variables qui apparaissent dans les légendes discrètes interactives, et une sélection unique aux autres variables. Cependant, une sélection unique ("single") ou multiple ("multiple") peut être précisée en utilisant l’option selector.types. Dans le code R ci-dessous, nous utilisons l’option selector.types pour spécifier que la variable pays doit être traitée comme une variable de sélection multiple.

vis.multiple <- vis.first
vis.multiple$selector.types <- list(pays="multiple")
vis.multiple

Lorsque la visualisation de données ci-dessus est affichée pour la première fois, elle montre les points de données de l’année 1970 pour chaque pays d’Amérique du Nord et d’Asie du Sud. Elle affiche également une étiquette de texte pour le Canada.

Vous avez peut-être remarqué qu’il est facile d’ajouter des pays à la sélection actuelle en cliquant sur des points de données. Normalement, le fait de cliquer sur un point de données sélectionné supprime ce pays de la sélection actuelle. Toutefois, dans cette visualisation de données en particulier, il n’est pas si facile de les supprimer, car les étiquettes de texte sont affichées au-dessus des points de données.

Exercice : Recréez la visualisation des données ci-dessus de manière à ce qu’un clic sur une étiquette de texte supprime le pays en question de l’ensemble de sélection. Indice : vous devez ajouter un mot-clé clickSelects au geom_text.

Notez que dans la visualisation de données ci-dessus, la variable année ne peut être modifiée que par le menu de sélection.

Dans la section suivante, nous ajouterons une facette avec un geom directement cliquable pour changer la variable année.

4.5 Sélection d’une année sur un graphique de série temporelle

L’objectif de cette section est d’ajouter un graphique de série temporelle sur lequel on peut cliquer pour changer l’année sélectionnée.

Notez que l’esquisse ci-dessus comprend geom_tallrect, un nouveau geom introduit dans animint2. Il est qualifié de “grand” car il occupe tout l’espace vertical du graphique, il ne nécessite donc que la définition de ses limites horizontales dans aes() avec xmin et xmax. En spécifiant clickSelects=année nous indiquons que nous voulons tracer un tallrect pour chaque année, et que cliquer sur un tallrect changera l’année sélectionnée. Nous devons donc créer un nouvel ensemble de données appelé années avec une ligne pour chaque année des données BanqueMondiale.

années <- data.frame(année=unique(BanqueMondiale$année))
head(années)

Ensuite, nous ajoutons la série temporelle à la visualisation existante.

vis.timeSeries <- vis.multiple
vis.timeSeries$timeSeries <- ggplot()+
  geom_tallrect(aes(
    xmin=année-0.5, xmax=année+0.5),
    clickSelects="année",
    alpha=0.5,
    data=années)+
  geom_line(aes(
    x=année, y=taux.de.fertilité, group=pays, color=région),
    clickSelects="pays",
    size=3,
    alpha=0.6,
    data=BanqueMondiale)
vis.timeSeries

Essayez de cliquer sur l’arrière-plan de la série temporelle dans la visualisation de données ci-dessus. Vous devriez voir les points de données et les étiquettes de texte se déplacer dans une transition graduelle vers une position correspondant à l’année nouvellement sélectionnée.

Exercice : animez la visualisation de données en spécifiant l’option time, comme expliqué au chapitre 3.

Exercices avec multicouches : ajoutez un geom_text qui indique l’année en cours sur le nuage de points. Ajoutez un geom_path qui présente les données des 5 dernières années. Ajoutez un geom_label_aligned pour les pays sélectionnés dans la série temporelle.

4.6 Sélection d’une année sur une facette de série temporelle

L’objectif de cette section est d’ajouter une facette avec un graphique de série temporelle sur lequel on peut cliquer pour changer l’année sélectionnée.

Facette de dispersion de la Banque mondiale

Tout d’abord, nous recréons le nuage de points de la section précédente à l’aide de la méthode Ajouter une variable ensuite des facettes qui est utile pour créer des ggplots avec des axes alignés.

add.x.var <- function(df, x.var){
  data.frame(df, x.var=factor(x.var, c("espérance de vie", "année")))
}
nuageFacet <- ggplot()+
  geom_point(aes(
    x=espérance.de.vie, y=taux.de.fertilité, color=région,
    key=pays),
    showSelected="année",
    clickSelects="pays",
    data=add.x.var(BanqueMondiale, "espérance de vie"))+
  geom_text(aes(
    x=espérance.de.vie, y=taux.de.fertilité, label=pays,
    key=pays),
    clickSelects="pays",
    showSelected=c("année", "pays", "région"),
    data=add.x.var(BanqueMondiale, "espérance de vie"))+
  facet_grid(. ~ x.var, scales="free")+
  xlab("")+
  theme_bw()+
  theme(panel.margin=grid::unit(0, "lines"))
nuageFacet

Warning: Removed 1490 rows containing missing values (geom_point).

Warning: Removed 1490 rows containing missing values (geom_text).

Notez que le ggplot ci-dessus utilise les mêmes définitions aes que le nuage de points de la section précédente. La seule différence est que nous avons utilisé un jeu de données BanqueMondiale enrichi avec une variable x.var supplémentaire que nous utilisons avec facet_grid. Ci-dessous, nous ajoutons des geoms pour un graphique de série temporelle qui est aligné sur l’axe du taux de fertilité.

nuage_série_temporelle <- nuageFacet+
  geom_tallrect(aes(
    xmin=année-0.5, xmax=année+0.5),
    clickSelects="année",
    alpha=0.5,
    data=add.x.var(années, "année"))+
  geom_line(aes(
    x=année, y=taux.de.fertilité, group=pays, color=région),
    clickSelects="pays",
    size=3,
    alpha=0.6,
    data=add.x.var(BanqueMondiale, "année"))
nuage_série_temporelle

Warning: Removed 1490 rows containing missing values (geom_point).

Warning: Removed 1490 rows containing missing values (geom_text).

Warning: Removed 759 rows containing missing values (geom_path).

Les deux geom définis ci-dessus occupent un nouveau facet pour la valeur d’année de la variable x.var (définie par la fonction add.x.var). Puisque ces deux geoms ont des définitions différentes de clickSelects, un clic sur chaque geom mettra à jour le graphique d’une manière différente. Notez que pour le geom_line nous spécifions size=3 ce qui signifie une largeur de trait de 3 pixels. En général, il est judicieux d’augmenter la taille des geoms avec clickSelects, afin de les rendre plus faciles à cliquer.

Notez également que nous avons spécifié alpha=0.5 pour le geom_tallrect et alpha=0.6 pour le geom_line. Puisque ces deux geoms définissent clickSelects, certaines lignes et rectangles seront sélectionnées, et d’autres ne le seront pas. Les valeurs alpha précisent l’opacité des objets sélectionnés, et les autres objets auront une valeur d’opacité de 0,5 inférieure à cette valeur. Dans l’exemple ci-dessus, les lignes non sélectionnées auront alpha=0.1 et les tallrects non sélectionnés auront alpha=0 (complètement transparent).

Depuis septembre 2023, il est également possible de spécifier l’opacité, le remplissage et la couleur des objets qui ne sont pas actuellement sélectionnés (alpha_off, fill_off, color_off). Les utilisateurs peuvent spécifier ces paramètres dans le geom (pas dans le aes) afin de créer librement une apparence différente pour les éléments sélectionnés et non sélectionnés, au lieu d’être contraints de dépendre du comportement décrit ci-dessus. Pour plus d’informations, voir la discussion et l’exemple dans chapitre 6, section Préciser le mode d’affichage de l’état de la sélection .

Enfin, nous utilisons le code R ci-dessous pour afficher le nouveau nuage de points aligné avec la série temporelle.

(vis.facets <- animint(nuage_série_temporelle))

La visualisation de données interactives ci-dessus contient un nouveau panneau avec des lignes qui montrent une série temporelle de taux de fertilité sur toutes les années. Puisque nous avons précisé clickSelects=pays pour le geom_line, un clic sur une ligne met à jour l’ensemble des pays sélectionnés. Puisque nous avons spécifié clickSelects=année pour le geom_tallrect, un clic sur un tallrect met à jour l’année sélectionnée.

Exercice : ajoutez les options time, duration, first et selector.types à la visualisation de données ci-dessus.

4.7 Résumé du chapitre et exercices

Dans ce chapitre, nous avons vu l’utilisation de clickSelects , l’un des deux principaux mots-clés introduits par animint2 pour la conception de visualisations de données interactives. Nous avons utilisé l’ensemble de données de la Banque mondiale pour montrer comment clickSelects peut être utilisé pour définir différentes interactions pour chacun des geoms tracés. Nous avons expliqué comment l’option first peut être utilisée pour préciser les valeurs à utiliser lorsque le animint2 est affiché pour la première fois. Nous avons également expliqué comment l’option selector.types peut être utilisée pour préciser le type de sélection (unique ou multiple).

Exercices :

Jusqu’à présent, nous avons vu trois façons différentes de modifier les variables de sélection : (1) utiliser des légendes interactives, (2) utiliser des menus de sélection et (3) cliquer sur les données à l’aide de clickSelects. Classez ces trois techniques de manipulation, de la plus directe, à la moins directe. Quelle technique privilégier et selon quelles circonstances ?
Quand geom_point(clickSelects=something, alpha=0.75) est affiché avec le périphérique graphique R habituel, quel est le degré d’opacité/transparence pour tous les points de données ? Lorsque animint2 affiche le même geom, certains points seront sélectionnés et d’autres non. Quelle est l’opacité/transparence des points sélectionnés ? Quelle est l’opacité/transparence des points non sélectionnés ?
Ajouter aes(size=population) aux points du nuage de points de la Banque mondiale. La légende de la taille est-elle interactive ? Pourquoi ?
Ajoutez un geom_text au nuage de points de la Banque mondiale qui montre l’année sélectionnée.
Ajoutez un geom_text à la série chronologique de la Banque mondiale pour afficher le nom des pays sélectionnés.
Ajoutez un geom_path au nuage de points de la Banque mondiale pour afficher les données des cinq dernières années.
Utilisez l’option time pour créer une version animée de vis.facets.
Utilisez help et title pour chaque geom dans vis.facets afin de créer un tour guidé qui fournit plus d’informations sur ce qui est affiché dans chaque geom.

Dans le Chapitre 5 nous expliquons les différentes méthodes pour publier et partager des animints sur le web.

--- title: Le mot-clé `clickSelects` layout: default output: bookdown::html_chapter --- Traduction de l'[anglais](https://github.com/tdhock/animint-book/) [Ch04-clickSelects](https://raw.githubusercontent.com/tdhock/animint-book/master/Ch04-clickSelects.Rmd)  ```{r} #| echo: false knitr::opts_chunk$set(fig.path="Ch04-figures/") ```  Dans ce chapitre, nous expliquons `clickSelects`, l'un des deux principaux mots-clés qu'`animint2` propose pour la visualisation interactive de données.  Le mot-clé `clickSelects` précise quelle variable de séléction sera mise à jour quand on clique sur le geom correspondant.  Chaque geom d'une visualisation de données possède son propre ensemble de données et sa propre définition du mot-clé `clickSelects`.  Ainsi, en cliquant sur différents geoms, on peut modifier différentes variables de sélection.  Après avoir lu ce chapitre, vous serez en mesure de  - Comprendre comment les légendes interactives utilisent implicitement les `clickSelects`.  - Utiliser le mot-clé `clickSelects` dans vos esquisses de graphiques.  - Traduire vos esquisses de graphiques avec `clickSelects` en code R.  - Utiliser l'option `selector.types` pour spécifier plusieurs variables de sélection.  ## Les légendes interactives utilisent implicitement `clickSelects` {#implicit-clickSelects}  Dans cette section, nous expliquerons comment le mot-clé `clickSelects` est implicitement utilisé dans les légendes interactives.  Si vous avez lu les chapitres précédents, vous avez déjà utilisé implicitement `clickSelects`, qui a été créé automatiquement pour les légendes interactives dans les chapitres précédents.  Considérons l'esquisse de la visualisation de données de la Banque mondiale présentée au dernier chapitre.  ![légende clickSelects](Ch04-legend-clickSelects.png)  Puisque la légende a `clickSelects=région` , cliquer sur une entrée de cette légende met à jour la variable de sélection `région`.  Notez que `animint2` rend automatiquement chaque légende discrète interactive, vous n'avez donc pas besoin de spécifier explicitement `clickSelects=région` pour la légende.  En fait, lorsque nous avons spécifié `color=région` pour le `geom_point` `animint2` fait deux choses automatiquement :  - `showSelected=région` est aussi affecté au même `geom_point` .  - `clickSelects=région` est attribué à la légende des couleurs.  Notez que les mots-clés `clickSelects` ne sont pas limités aux légendes interactives.  Chaque geom a sa propre définition de `clickSelects` qui détermine la variable de sélection qui doit être mise à jour lorsqu'on clique sur ce geom.  Dans la section suivante, nous donnerons plusieurs exemples sur la manière dont `clickSelects` peut être utilisé en combinaison avec `showSelected` pour créer des visualisations de données interactives.  ## Utiliser `clickSelects` pour identifier des points sur un nuage de points {#clickSelects-keyword}  L'objectif de cette section est de créer la visualisation suivante des données de la Banque mondiale.  ![Texte de la visualisation de la Banque mondiale](Ch04-viz-text-single.png)  Pour commencer, considérons le code R suivant qui génère un nuage de points des données de la Banque mondiale :  ```{r Ch04-viz-ggplot-nuage} library(animint2) data(BanqueMondiale, package="animint2fr") gg_nuage <- ggplot()+ geom_point(aes( x=espérance.de.vie, y=taux.de.fertilité, color=région, key=pays), showSelected="année", clickSelects="pays", data=BanqueMondiale) gg_nuage ```  Notez que le graphique ci-dessus n'est pas interactif, car il est affiché à l'aide du périphérique graphique R traditionnel.  En revanche, afficher le même ggplot en utilisant `animint2` donne le graphique interactif suivant :  ```{r Ch04-viz-nuage} (vis.nuage <- animint( nuage=gg_nuage, duration=list(année=2000))) ```  Essayez de cliquer sur des points de données dans le nuage de points ci-dessus.  Vous devriez voir la valeur de la variable `pays` changer après avoir cliqué sur un point de données.  Vous devriez également voir que le point de données pour le pays sélectionné est plus foncé que les autres.  Cela permet de mettre en évidence la sélection en cours, cette surbrillance est générée automatiquement pour chaque geom avec `clickSelects` .  Par défaut, le point sélectionné a `alpha=1` (totalement opaque, pas de transparence), et les autres points ont `alpha=0.5` (moitié semi-transparent).  Ces valeurs par défaut peuvent être personnalisées ; par exemple, dans le code ci-dessous, un contour noir est utilisé pour mettre en évidence la sélection actuelle.  ```{r Ch04-viz-color-off} animint( ggplot()+ geom_point(aes( x=espérance.de.vie, y=taux.de.fertilité, fill=région, key=pays), shape=21, color="black", color_off=NA, showSelected="année", clickSelects="pays", data=BanqueMondiale)) ```  La visualisation de données ci-dessus affiche le nom du pays sélectionné dans le menu de sélection, mais il serait préférable de l'afficher sous forme d'une étiquette de texte sur le nuage de points.  Nous pouvons le faire en ajoutant une couche `geom_text` avec deux variables `showSelected` :  ```{r Ch04-viz-text} vis.text <- vis.nuage vis.text$nuage <- gg_nuage+ geom_text(aes( x=espérance.de.vie, y=taux.de.fertilité, label=pays, key=pays), showSelected=c("année", "pays"), data=BanqueMondiale) vis.text ```  Après avoir cliqué sur un point de données dans le nuage de points ci-dessus, vous devriez voir apparaître une étiquette de texte avec le nom du pays.  Essayez également de changer l'année à l'aide du menu de sélection.  Vous devriez voir l'étiquette de texte se déplacer dans une transition fluide en même temps que le point de données correspondant.  La visualisation de données ci-dessus contient plus d'un geom, chacun avec des caractéristiques interactives différentes.  Essayez de cliquer sur le bouton "Démarrer la visite" au bas de la visualisation de données, qui affichera les fonctions interactives disponibles pour le premier geom de la visualisation de données.  En cliquant sur "Next", vous obtiendrez des informations sur le prochain geom, et en cliquant sur "Done" ou sur l'arrière-plan gris, vous mettrez fin à la visite guidée.  La fonction "Start Tour" peut être utile aux nouveaux utilisateurs de votre visualisation de données pour découvrir les fonctions interactives présentes dans chaque geom.  Les informations affichées pendant la visite peuvent être personnalisées, en définissant les paramètres `help` et `title` de chaque geom.  Comme nous l'avons expliqué dans le dernier chapitre, toute variable spécifiée à l'aide du mot-clé `showSelected` d'un geom est traitée comme une variable interactive.  Dans l'exemple ci-dessus, nous avons spécifié deux variables `showSelected` pour le `geom_text`.  Cela signifie que l'on ne dessine qu'une étiquette de texte pour les lignes de la base de données `BanqueMondiale` qui correspondent aux valeurs actuelles des deux variables de sélection.  Étant donné que chaque combinaison de `pays` et `année` a une ligne dans ces données, une seule étiquette de texte sera affichée à la fois.  Essayez de cliquer sur l'entrée de la légende qui correspond à la région du pays actuellement sélectionné (par exemple, si le Canada est sélectionné, essayez de cliquer sur l'entrée de la légende Amérique du Nord).  Vous devriez voir le point disparaître, mais le texte rester affiché.  Exercice : comment faire disparaître le texte en même temps que le point ?  Indice : il faut ajouter un mot-clé au `geom_text`.  Dans le dernier chapitre, nous avons introduit les termes "manipulation directe" et "manipulation indirecte" pour décrire les interactions avec les légendes et les menus.  Dans la visualisation de données ci-dessus, nous pouvons modifier la valeur de la variable de sélection `pays` en cliquant sur un point de données (manipulation directe) ou en utilisant le menu de sélection (manipulation indirecte).  Les deux techniques sont utiles, mais à des fins différentes :  - La manipulation directe, soit de cliquer sur les points de données, est utile pour trouver le nom des pays ayant des valeurs extrêmes de taux de fertilité et d'espérance de vie.  Par exemple, pour l'année 1960, en cliquant sur le point en bas à gauche du graphique, on découvre le nom du pays, le Gabon.  - La manipulation indirecte à l'aide des menus est utile pour voir la position tracée d'un pays d'intérêt.  Par exemple, il serait difficile de trouver la France en cliquant sur tous les différents points, mais il est simple de trouver la France en tapant son nom dans le menu de sélection.  Notez que lorsque la visualisation ci-dessus est affichée pour la première fois, le pays sélectionné est Andorre et l'année sélectionnée est 1960.  Comme les données pour Andorre sont manquantes en 1960, aucune étiquette de texte n'est affichée au départ.  Pour modifier la première sélection, vous pouvez spécifier l'option `first` comme expliqué dans la section suivante.  ## L'option `first` {#first-option}  Pour spécifier la sélection qui doit être affichée lorsque la visualisation de données est exécutée pour la première fois, utilisez l'option `first`.  Il doit s'agir d'une liste nommée avec des entrées pour chaque variable de sélection.  Par exemple, le code ci-dessous spécifie 1970 comme première année, le Canada comme premier pays, et l'Amérique du Nord et l'Asie du Sud comme premières régions.  ```{r Ch04-viz-first} vis.first <- vis.text vis.first$first <- list( année=1970, pays="Canada", région=c("Amérique du Nord", "Asie du Sud")) vis.first ```  Notez que dans la visualisation des données ci-dessus, il n'y a qu'un seul pays sélectionné à la fois.  Dans la section suivante, nous expliquerons comment l'option `selector.types` peut être utilisée pour modifier la variable de sélection `pays` en une variable de sélection multiple.  ## L'option `selector.types` {#selector-types-option}  Dans cette section, notre objectif est de produire une version légèrement plus complexe du nuage de points de la section précédente.  L'esquisse ci-dessous ne présente qu'une seule différence par rapport à l'esquisse de la dernière section : les étiquettes de texte sont affichées pour plus d'un pays.  ![Banque mondiale vis texte](Ch04-viz-text.png)  Dans `animint2`, chaque variable de sélection a un type, soit simple, soit multiple.  La sélection unique signifie qu'une seule valeur peut être sélectionnée à la fois.  La sélection multiple signifie qu'un nombre quelconque de valeurs peut être sélectionné à la fois.  Dans les graphiques de la section précédente, la sélection multiple a été utilisée pour la variable `région` mais pas pour les variables `année` et `pays`.  Comment cela se fait-il ?  Par défaut, `animint2` attribue une sélection multiple à toutes les variables qui apparaissent dans les légendes discrètes interactives, et une sélection unique aux autres variables.  Cependant, une sélection unique (`"single"`) ou multiple (`"multiple"`) peut être précisée en utilisant l'option `selector.types`.  Dans le code R ci-dessous, nous utilisons l'option `selector.types` pour spécifier que la variable `pays` doit être traitée comme une variable de sélection multiple.  ```{r Ch04-viz-multiple} vis.multiple <- vis.first vis.multiple$selector.types <- list(pays="multiple") vis.multiple ```  Lorsque la visualisation de données ci-dessus est affichée pour la première fois, elle montre les points de données de l'année 1970 pour chaque pays d'Amérique du Nord et d'Asie du Sud.  Elle affiche également une étiquette de texte pour le Canada.  Vous avez peut-être remarqué qu'il est facile d'ajouter des pays à la sélection actuelle en cliquant sur des points de données.  Normalement, le fait de cliquer sur un point de données sélectionné supprime ce pays de la sélection actuelle.  Toutefois, dans cette visualisation de données en particulier, il n'est pas si facile de les supprimer, car les étiquettes de texte sont affichées au-dessus des points de données.  Exercice : Recréez la visualisation des données ci-dessus de manière à ce qu'un clic sur une étiquette de texte supprime le pays en question de l'ensemble de sélection.  Indice : vous devez ajouter un mot-clé `clickSelects` au `geom_text`.  Notez que dans la visualisation de données ci-dessus, la variable année ne peut être modifiée que par le menu de sélection.  Dans la section suivante, nous ajouterons une facette avec un geom directement cliquable pour changer la variable `année`.  ## Sélection d'une année sur un graphique de série temporelle {#time-series-plot}  L'objectif de cette section est d'ajouter un graphique de série temporelle sur lequel on peut cliquer pour changer l'année sélectionnée.  ![Série temporelle de la Banque mondiale](Ch04-ggplot-time-series-plot.png)  Notez que l'esquisse ci-dessus comprend `geom_tallrect`, un nouveau geom introduit dans `animint2`.  Il est qualifié de "grand" car il occupe tout l'espace vertical du graphique, il ne nécessite donc que la définition de ses limites horizontales dans `aes()` avec `xmin` et `xmax`.  En spécifiant `clickSelects=année` nous indiquons que nous voulons tracer un `tallrect` pour chaque année, et que cliquer sur un `tallrect` changera l'année sélectionnée.  Nous devons donc créer un nouvel ensemble de données appelé `années` avec une ligne pour chaque année des données `BanqueMondiale`.  ```{r} années <- data.frame(année=unique(BanqueMondiale$année)) head(années) ```  Ensuite, nous ajoutons la série temporelle à la visualisation existante.  ```{r Ch04-viz-timeSeries} vis.timeSeries <- vis.multiple vis.timeSeries$timeSeries <- ggplot()+ geom_tallrect(aes( xmin=année-0.5, xmax=année+0.5), clickSelects="année", alpha=0.5, data=années)+ geom_line(aes( x=année, y=taux.de.fertilité, group=pays, color=région), clickSelects="pays", size=3, alpha=0.6, data=BanqueMondiale) vis.timeSeries ```  Essayez de cliquer sur l'arrière-plan de la série temporelle dans la visualisation de données ci-dessus.  Vous devriez voir les points de données et les étiquettes de texte se déplacer dans une transition graduelle vers une position correspondant à l'année nouvellement sélectionnée.  Exercice : animez la visualisation de données en spécifiant l'option `time`, [comme expliqué au chapitre 3](Ch03-showSelected.html#animation-time).  Exercices avec multicouches : ajoutez un `geom_text` qui indique l'année en cours sur le nuage de points.  Ajoutez un `geom_path` qui présente les données des 5 dernières années. Ajoutez un `geom_label_aligned` pour les pays sélectionnés dans la série temporelle.  ## Sélection d'une année sur une facette de série temporelle {#time-series-facet}  L'objectif de cette section est d'ajouter une facette avec un graphique de série temporelle sur lequel on peut cliquer pour changer l'année sélectionnée.  ![Facette de dispersion de la Banque mondiale](Ch04-ggplot-scatterFacet.png)  Tout d'abord, nous recréons le nuage de points de la section précédente à l'aide de la méthode [Ajouter une variable ensuite des facettes](Ch99-appendix.html#addColumn-then-facet) qui est utile pour créer des ggplots avec des axes alignés.  ```{r Ch04-viz-ggplot-nuageFacet} add.x.var <- function(df, x.var){ data.frame(df, x.var=factor(x.var, c("espérance de vie", "année"))) } nuageFacet <- ggplot()+ geom_point(aes( x=espérance.de.vie, y=taux.de.fertilité, color=région, key=pays), showSelected="année", clickSelects="pays", data=add.x.var(BanqueMondiale, "espérance de vie"))+ geom_text(aes( x=espérance.de.vie, y=taux.de.fertilité, label=pays, key=pays), clickSelects="pays", showSelected=c("année", "pays", "région"), data=add.x.var(BanqueMondiale, "espérance de vie"))+ facet_grid(. ~ x.var, scales="free")+ xlab("")+ theme_bw()+ theme(panel.margin=grid::unit(0, "lines")) nuageFacet ```  Notez que le ggplot ci-dessus utilise les mêmes définitions `aes` que le nuage de points de la section précédente.  La seule différence est que nous avons utilisé un jeu de données `BanqueMondiale` enrichi avec une variable `x.var` supplémentaire que nous utilisons avec `facet_grid`.  Ci-dessous, nous ajoutons des geoms pour un graphique de série temporelle qui est aligné sur l'axe du taux de fertilité.  ```{r Ch04-viz-ggplot-nuage-série-temporelle} nuage_série_temporelle <- nuageFacet+ geom_tallrect(aes( xmin=année-0.5, xmax=année+0.5), clickSelects="année", alpha=0.5, data=add.x.var(années, "année"))+ geom_line(aes( x=année, y=taux.de.fertilité, group=pays, color=région), clickSelects="pays", size=3, alpha=0.6, data=add.x.var(BanqueMondiale, "année")) nuage_série_temporelle ```  Les deux geom définis ci-dessus occupent un nouveau `facet` pour la valeur d'`année` de la variable `x.var` (définie par la fonction `add.x.var`).  Puisque ces deux geoms ont des définitions différentes de `clickSelects`, un clic sur chaque geom mettra à jour le graphique d'une manière différente.  Notez que pour le `geom_line` nous spécifions `size=3` ce qui signifie une largeur de trait de 3 pixels.  En général, il est judicieux d'augmenter la taille des geoms avec `clickSelects`, afin de les rendre plus faciles à cliquer.  Notez également que nous avons spécifié `alpha=0.5` pour le `geom_tallrect` et `alpha=0.6` pour le `geom_line`.  Puisque ces deux geoms définissent `clickSelects`, certaines lignes et rectangles seront sélectionnées, et d'autres ne le seront pas.  Les valeurs `alpha` précisent l'opacité des objets sélectionnés, et les autres objets auront une valeur d'opacité de 0,5 inférieure à cette valeur.  Dans l'exemple ci-dessus, les lignes non sélectionnées auront `alpha=0.1` et les `tallrects` non sélectionnés auront `alpha=0` (complètement transparent).  Depuis septembre 2023, il est également possible de spécifier l'opacité, le remplissage et la couleur des objets qui ne sont pas actuellement sélectionnés (`alpha_off`, `fill_off`, `color_off`).  Les utilisateurs peuvent spécifier ces paramètres dans le geom (pas dans le `aes`) afin de créer librement une apparence différente pour les éléments sélectionnés et non sélectionnés, au lieu d'être contraints de dépendre du comportement décrit ci-dessus.  Pour plus d'informations, voir la discussion et l'exemple dans [chapitre 6, section Préciser le mode d'affichage de l'état de la sélection](Ch06-other.html#display-selection-state) .  Enfin, nous utilisons le code R ci-dessous pour afficher le nouveau nuage de points aligné avec la série temporelle.  ```{r Ch04-viz-facets} (vis.facets <- animint(nuage_série_temporelle)) ```  La visualisation de données interactives ci-dessus contient un nouveau panneau avec des lignes qui montrent une série temporelle de taux de fertilité sur toutes les années.  Puisque nous avons précisé `clickSelects=pays` pour le `geom_line`, un clic sur une ligne met à jour l'ensemble des pays sélectionnés.  Puisque nous avons spécifié `clickSelects=année` pour le `geom_tallrect`, un clic sur un `tallrect` met à jour l'année sélectionnée.  Exercice : ajoutez les options `time`, `duration`, `first` et `selector.types` à la visualisation de données ci-dessus.  ## Résumé du chapitre et exercices {#Ch04-exercises}  Dans ce chapitre, nous avons vu l'utilisation de `clickSelects` , l'un des deux principaux mots-clés introduits par `animint2` pour la conception de visualisations de données interactives.  Nous avons utilisé l'ensemble de données de la Banque mondiale pour montrer comment `clickSelects` peut être utilisé pour définir différentes interactions pour chacun des geoms tracés.  Nous avons expliqué comment l'option `first` peut être utilisée pour préciser les valeurs à utiliser lorsque le `animint2` est affiché pour la première fois.  Nous avons également expliqué comment l'option `selector.types` peut être utilisée pour préciser le type de sélection (unique ou multiple).  Exercices :  - Jusqu'à présent, nous avons vu trois façons différentes de modifier les variables de sélection : (1) utiliser des légendes interactives, (2) utiliser des menus de sélection et (3) cliquer sur les données à l'aide de `clickSelects`.  Classez ces trois techniques de manipulation, de la plus directe, à la moins directe.  Quelle technique privilégier et selon quelles circonstances ?  - Quand `geom_point(clickSelects=something, alpha=0.75)` est affiché avec le périphérique graphique R habituel, quel est le degré d'opacité/transparence pour tous les points de données ?  Lorsque `animint2` affiche le même geom, certains points seront sélectionnés et d'autres non.  Quelle est l'opacité/transparence des points sélectionnés ?  Quelle est l'opacité/transparence des points non sélectionnés ?  - Ajouter `aes(size=population)` aux points du nuage de points de la Banque mondiale.  La légende de la taille est-elle interactive ?  Pourquoi ?  - Ajoutez un `geom_text` au nuage de points de la Banque mondiale qui montre l'année sélectionnée.  - Ajoutez un `geom_text` à la série chronologique de la Banque mondiale pour afficher le nom des pays sélectionnés.  - Ajoutez un `geom_path` au nuage de points de la Banque mondiale pour afficher les données des cinq dernières années.  - Utilisez l'option `time` pour créer une version animée de `vis.facets`.  - Utilisez `help` et `title` pour chaque geom dans `vis.facets` afin de créer un tour guidé qui fournit plus d'informations sur ce qui est affiché dans chaque geom.  Dans le [Chapitre 5](Ch05-sharing.html) nous expliquons les différentes méthodes pour publier et partager des animints sur le web.

4.1 Les légendes interactives utilisent implicitement clickSelects

4.2 Utiliser clickSelects pour identifier des points sur un nuage de points

4.3 L’option first

4.4 L’option selector.types