3  Le mot-clé showSelected

Dans ce chapitre, nous vous présentons showSelected, l’un des deux principaux mots-clés introduits par animint2 pour la visualisation interactive de données. Après avoir lu ce chapitre, vous saurez :

3.1 Esquisses avec showSelected

Dans le chapitre 2, nous avons expliqué comment planifier le code nécessaire pour créer une visualisation en traçant une esquisse qui comprend les éléments principaux (geoms, axes, légendes, données). Dans cette section, nous expliquons comment le mot-clé showSelected peut être utilisé dans les esquisses. Le mot-clé showSelected est utilisé pour préciser les variables à utiliser pour sélectionner un sous-ensemble de données. Chaque geom possède son propre ensemble de données et sa propre définition de variables showSelected. Cela signifie que chaque geom peut afficher son propre sous-ensemble de données (indépendamment des autres geoms).

En fait, nous avons déjà utilisé le mot-clé showSelected : il avait été généré automatiquement par les légendes interactives que nous avions créées dans les deux chapitres précédents. Considérons, par exemple, la courbe de Keeling du chapitre 1 présentée ci-dessous.

Esquisse de la courbe de Keeling

L’esquisse ci-dessus se traduit par le code R suivant :

ggplot(co2, aes(date, ppm))+
  geom_point(aes(color=mois), showSelected="mois")+
  geom_line()

Le code ci-dessus comprend showSelected="mois" pour le geom_point(), ce qui signifie que le graphique affiche le sous-ensemble de données pour les mois sélectionnés. En revanche, puisque geom_line() n’inclut pas showSelected, il affiche toujours l’ensemble complet des données, quelle que soit la sélection.

Prenons maintenant l’exemple de l’esquisse de la première visualisation de données de la Banque mondiale présentée au chapitre 2 :

Esquisse Banque mondiale avec showSelected région

L’esquisse ci-dessus se traduit par le code R suivant.

ggplot()+
  geom_point(aes(
    espérance.de.vie, taux.de.fertilité, color=région),
    data=banque_mondiale_1975,
    showSelected="région")

Le code R contient showSelected="région" pour le geom_point(), le graphique affiche donc le sous-ensemble de données pour les régions sélectionnées.

Notez que l’esquisse dans le chapitre 2 ne précisait pas explicitement showSelected=région. Nous avions simplement indiqué aes(color=région), et animint2 a automatiquement ajouté une variable showSelected correspondante. En général, animint2 ajoute un mot-clé showSelected pour chaque variable utilisée dans une légende qualitative.

Toutefois, le mot-clé showSelected ne s’applique pas qu’aux légendes qualitatives. Vous pouvez l’utiliser pour toutes les variables de votre choix, en les précisant explicitement dans l’argument showSelected du geom.

Chaque variable utilisée avec showSelected est traitée par animint2 comme une variable de sélection. Par exemple, la visualisation de la courbe de Keeling a une variable de sélection (mois), tout comme la visualisation de la Banque mondiale (région). Pour chaque variable de sélection, animint2 stocke les valeurs sélectionnées. Lorsque la sélection change, animint2 met à jour le sous-ensemble de données affiché.

Les deux visualisations présentées ci-dessus ne comportent qu’une seule variable de sélection. Par contre, une visualisation peut avoir autant de variables de sélection que vous le souhaitez. Dans la section suivante, nous étudierons une visualisation des données de la Banque mondiale, avec les variables de sélection région et année.

3.2 Sélection de sous-ensembles par menus

Considérons l’esquisse suivante qui ajoute une variable showSelected et utilise un ensemble de données différent.

Esquisse Banque mondiale avec showSelected région et année

Notez qu’il y a deux variables showSelected : région et année. Notez également que les données sont spécifiées pour toutes les années, mais qu’une seule année sera affichée à la fois, grâce au showSelected=année. Ci-dessous, nous traduisons l’esquisse en code R :

library(animint2)
data(BanqueMondiale, package="animint2fr")
nuage <- ggplot()+
  geom_point(aes(
    x=espérance.de.vie, y=taux.de.fertilité, color=région),
    showSelected="année",
    data=BanqueMondiale)
nuage
Warning: Removed 1490 rows containing missing values (geom_point).

Notez que le code ci-dessus contient le mot-clé showSelected, une nouveauté dans animint2 par rapport à ggplot2. Comme vous le voyez ci-dessus, le mot-clé showSelected est ignoré lors de l’affichage du graphique avec les fonctions habituelles de R, qui produisent un nuage de points incluant toutes les années.

En revanche, fournir le code ci-dessus comme argument pour animint() produit la visualisation interactive ci-dessous, qui dessine une année à la fois.

animint(nuage)

Notez que la visualisation ci-dessus comporte deux variables de sélection : région et année (color=région fait automatiquement de région une variable showSelected). Chaque variable dispose d’un menu sous la visualisation de données pour la modification de la sélection en cours. Dans cette visualisation, ces menus sont affichés par défaut. Pour les masquer, cliquez sur le bouton « Hide selection menus », et pour les réafficher sur « Show selection menus ».

Les variables discrètes, telles que région, ont une sélection multiple par défaut, de sorte que plusieurs valeurs sont sélectionnées et affichées à la fois. Essayez de modifier la région sélectionnée dans la légende interactive et dans le menu de sélection. Lorsque vous modifiez la sélection, la légende interactive et le menu de sélection sont tous les deux mis à jour, pour refléter la nouvelle sélection.

Nous utilisons les termes « manipulation directe » et « manipulation indirecte » pour décrire ces différentes façons de modifier la sélection. La manipulation directe est généralement plus facile à comprendre, parce qu’il suffit de cliquer sur les objets que l’on souhaite modifier dans le graphique. De leur côté, les techniques de manipulation indirecte, telles que les menus, sont utiles dans d’autres cas (par exemple, la sélection du nom d’un pays). Dans la visualisation ci-dessus, vous pouvez modifier la valeur de région en utilisant soit la légende, soit le menu. L’utilisation de la légende est une technique de manipulation plus directe, puisque la légende est dessinée près du nuage de points qui sera mis à jour.

D’autres variables de sélection, comme année, ont une sélection simple par défaut, de sorte qu’une seule valeur est sélectionnée et affichée à la fois. Essayez de modifier la valeur sélectionnée pour année à l’aide du menu de sélection. Le nuage de points se mettra à jour immédiatement pour afficher le taux de fertilité et l’espérance de vie de tous les pays pour l’année que vous avez sélectionnée.

Exercice couches multiples : ajoutez un autre geom à ce nuage de points interactif. Comme dans le chapitre 2, vous pouvez utiliser un geom_text pour afficher le nom de chaque pays (facile), ou un geom_text pour afficher l’année sélectionnée (moyen), ou un geom_path pour afficher les données des 5 années précédentes (difficile). Astuce : utilisez showSelected=année dans tous les geoms.

Exercice multi-plot : ajoutez une série temporelle à la visualisation ci-dessus. Comme dans le chapitre 2, vous pouvez utiliser un geom_line pour afficher le taux de fertilité de chaque pays, pour toutes les années. Ajoutez un geom_vline avec showSelected=année pour mettre en évidence l’année sélectionnée.

3.3 Transitions : l’option duration et aes(key)

Vous avez peut-être remarqué la présence de boutons sous chaque visualisation créée par animint2. Cliquez sur le bouton « Show animation controls » de la visualisation présentée ci-dessus. Vous verrez alors que ce tableau contient une ligne pour chaque variable de sélection. Les zones de texte indiquent le nombre de millisecondes utilisées pour les transitions fluides lors de la mise à jour des variables de sélection. Par défaut, la durée de transition est de 0 pour chaque variable, ce qui signifie que les données passent immédiatement à leur nouvelle position (sans transition fluide).

Pour illustrer l’effet des transitions fluides, essayez de changer la durée de transition de la variable année de 0 à 2000. Ensuite, modifiez la valeur sélectionnée de la variable année à l’aide du menu. Vous devriez voir les points de données se déplacer lentement vers leurs nouvelles positions en 2 secondes.

Certaines transitions n’entraînent qu’un léger déplacement des points vers des positions proches (par exemple, 1979-1980). D’autres entraînent un déplacement beaucoup plus important vers des positions plus éloignées (par exemple 1980-1981). Pourquoi?

Les transitions fluides n’ont de sens que pour les points de données présents à la fois avant et après la modification de la sélection. Dans le code R ci-dessous, nous calculons un tableau de contingence des points de données traçables pour chacune de ces trois années.

trois.ans <- subset(BanqueMondiale, 1979 <= année & année <= 1981)
can.plot <- with(trois.ans, {
  (!is.na(espérance.de.vie)) & (!is.na(taux.de.fertilité))
})
table(trois.ans$année, can.plot)
      can.plot
       FALSE TRUE
  1979    27  187
  1980    27  187
  1981    26  188

Le tableau ci-dessus montre clairement que 187 points peuvent être tracés en 1979 et 1980. Cependant, en 1981, il y a un point de données supplémentaire correspondant à un pays pour lequel nous n’avions pas de données en 1980. Nous présentons ci-dessous les données de ce pays, le Kosovo.

subset(trois.ans, pays=="Kosovo")
     iso2c country year fertility.rate life.expectancy population
5850    KV  Kosovo 1979             NA              NA    1491000
5851    KV  Kosovo 1980             NA              NA    1521000
5852    KV  Kosovo 1981         4.5758        65.93268    1552000
     GDP.per.capita.Current.USD 15.to.25.yr.female.literacy iso3c
5850                         NA                          NA   KSV
5851                         NA                          NA   KSV
5852                         NA                          NA   KSV
                                        region  capital longitude latitude
5850 Europe & Central Asia (all income levels) Pristina    20.926   42.565
5851 Europe & Central Asia (all income levels) Pristina    20.926   42.565
5852 Europe & Central Asia (all income levels) Pristina    20.926   42.565
                  income lending                Region                  région
5850 Lower middle income     IDA Europe & Central Asia Europe et Asie centrale
5851 Lower middle income     IDA Europe & Central Asia Europe et Asie centrale
5852 Lower middle income     IDA Europe & Central Asia Europe et Asie centrale
     espérance.de.vie taux.de.fertilité année   pays PIB.par.habitant.USD
5850               NA                NA  1979 Kosovo                   NA
5851               NA                NA  1980 Kosovo                   NA
5852         65.93268            4.5758  1981 Kosovo                   NA
     alphabétisation           revenu
5850              NA Revenu moyen bas
5851              NA Revenu moyen bas
5852              NA Revenu moyen bas

On voit bien que les données sur le taux de fertilité et sur l’espérance de vie sont absentes du tableau pour le Kosovo en 1979 et en 1980. Il ne serait donc pas possible d’effectuer une transition fluide pour ce pays entre 1980 et 1981, puisque les données ne sont présentes qu’à partir de 1981. Comment préciser qu’on veut utiliser pays comme clé d’identification de chaque point dessiné avec ce geom? Dans le code ci-dessous, nous utilisons aes(key=pays) pour indiquer que la variable pays doit être utilisée pour faire correspondre les points de données avant et après la modification de la sélection.

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

Le aes(key) dans le ggplot ci-dessus n’a de sens que pour la visualisation interactive, il est donc ignoré lorsqu’il est affiché avec les périphériques graphiques R habituels. Cependant, si nous affichons ce ggplot en utilisant animint2, la variable pays permettra des durées de transitions pertinentes. Pour spécifier une durée de transition par défaut pour la variable année, nous utilisons l’option duration dans la visualisation ci-dessous.

(viz.duration <- animint(nuage.key, duration=list(année=2000)))

L’option duration doit être une liste nommée. Chaque nom doit correspondre à une variable de sélection et chaque valeur doit indiquer le nombre de millisecondes à utiliser pour la durée de la transition lors de la modification de la valeur sélectionnée pour cette variable.

Si vous cliquez sur « Show animation controls » (afficher les contrôles d’animation) dans le graphique ci-dessus, vous verrez que la zone de texte pour la variable année indique 2000, comme spécifié dans le code R. Si vous changez la sélection de 1980 à 1981, vous devriez obtenir une transition correcte.

De façon générale, aes(key) doit être spécifié pour tous les geoms qui utilisent le mot-clé showSelected avec une variable qui apparaît dans l’option duration. Dans cet exemple, nous avons utilisé l’option duration pour spécifier une transition fluide pour la variable année. Puisque nous utilisons showSelected=année dans geom_point nous avons également spécifié aes(key) pour ce geom.

3.4 Animation : l’option time

L’option time permet de spécifier une variable à utiliser pour l’animation. Dans le code ci-dessous, on utilise l’option time pour définir année comme variable d’animation, et mettre l’animation à jour toutes les 2000 millisecondes.

viz.duration.time <- viz.duration
viz.duration.time$time <- list(variable="année", ms=2000)
viz.duration.time

On dit que la visualisation ci-dessus est animée, parce que la sélection pour année change toutes les deux secondes. Pour contrôler l’animation, vous pouvez cliquer sur « Show animation controls » :

  • Cliquez sur « Pause » pour arrêter l’animation.
  • Cliquez sur « Play » pour la redémarrer.
  • Pour contrôler le délai entre les mises à jour de la variable d’animation, saisissez un nombre (en millisecondes) dans le champ « updates » et appuyez sur la touche d’entrée.
  • Si vous modifiez les délais pour l’animation et les transitions fluides, veillez à ce que le délai d’animation « updates » soit plus grand que les autres délais, pour que les transitions fluides se terminent avant la prochaine mise à jour d’animation.

Exercice : réalisez une visualisation de données animée qui n’utilise PAS de transitions fluides. Indice : créez une liste de ggplots qui intègrent l’option time, mais pas l’option duration.

3.5 Résumé du chapitre et exercices

Dans ce chapitre, nous avons expliqué l’utilisation du mot-clé showSelected, des menus de sélection, des transitions et de l’animation.

Exercices :

  • Réalisez une version améliorée de vis.alignée du chapitre précédent. Au lieu de fixer l’année à 1975, utilisez showSelected=année pour que l’utilisateur puisse sélectionner une année. Ajoutez des geoms qui affichent l’année sélectionnée : un geom_text sur le nuage de points et un geom_vline sur la série temporelle.
  • Traduisez l’un des exemples de library(animation) en animint2. Indice : dans le code de library(animation), il y a toujours une boucle for dans l’option time. Au lieu d’appeler une fonction d’affichage à l’intérieur de la boucle for, utilisez l’idiome liste de tableaux de données pour stocker les données à tracer. Utilisez ensuite ces données avec showSelected pour créer des ggplots, et affichez-les avec animint2.

Dans le chapitre 4, nous vous expliquerons le mot-clé clickSelects qui rend cliquable un geom pour la mise à jour d’une variable de sélection.