31:Tc29,{ // On stocke une référence à notre graphique dans une variable const p = Plot.plot({ y: { nice: true }, marks: [ Plot.barY( alphabet, { x: "letter", y: "frequency", fill: "grey", sort: {x: "y", reverse: true}, inset: -0.5, } ), Plot.ruleY([0]) ] }); // On utilise la méthode querySelectorAll de cet objet pour // sélectionner tous les éléments svg de type "rect" const rects = p.querySelectorAll('rect'); // On définit deux fonctions qui seront utilisées pour // définir le comportement, lorsque le curseur commence // à survoler l'élément (mouseover) // et lorsque le curseur quitte l'élément (mouseout) const onMouseOver = (e) => { // Tous les rectangles en gris clair rects.forEach((_r) => { _r.setAttribute('fill', 'lightgray') }); // Sauf celui qui est la cible de l'événement, // en rouge e.target.setAttribute('fill', 'red'); }; const onMouseOut = () => { // On remet la couleur initiale, le gris normal rects.forEach((_r) => { _r.setAttribute('fill', 'grey') }) }; // Un tableau contenant les lettres dans l'ordre où elle apparaissent const orderedLetters = alphabet.sort((a, b) => b.frequency - a.frequency).map(d => d.letter); // Pour chaque rectangle, on ajoute son comportement // au survol de la souris (mouseover), // lorsque la souris arrête de survoler l'élément // (mouseout) et lors d'un clic (click) rects.forEach((r) => { // On dit que le curseur, sur ces étiquettes est sous la forme 'pointer' // (main avec l'index, montrant qu'il s'agit généralement d'un élément clicable) r.style.cursor = 'pointer'; // Comportement mouseover / mouseout r.addEventListener('mouseover', onMouseOver); r.addEventListener('mouseout', onMouseOut); // Comportement lors du clic r.addEventListener("click", () => { // On utilise la position du rectangle sur l'axe // pour trouver la lettre correspondante const letter = orderedLetters[r.__data__]; // On ouvre la page wikipedia qui correspond, // dans un nouvel onglet window.open( `https://fr.wikipedia.org/wiki/${letter}_(lettre)` ); }); }); // Ajoutons également un comportement pour le survol des étiquettes de l'axe Y // On sélectionne d'abords toutes les étiquettes const labels = p.querySelectorAll('g[aria-label="y-axis tick label"] > text'); // On passe par chaque étiquette labels.forEach((textElement) => { // Lors de l'entré du curseur, on grossi le label textElement.addEventListener("mouseenter", () => { textElement.style.fontWeight = "bold"; textElement.style.fontSize = 15; }); // Lors de la sortie du curseur, on rétabli la taille du label textElement.addEventListener("mouseleave", () => { textElement.style.fontWeight = "normal"; textElement.style.fontSize = 10; }); }); // Enfin, on retourne le graphique créé par 'Plot.plot' return p; }32:[] 2f:{"title":"Bibliothèque Plot (2) - Interactions","cells":[{"id":0,"value":"# Bibliothèque Plot (2) - Interactions","pinned":false,"hidden":false,"mode":"md"},{"id":170,"value":"

Support de cours pour les étudiants 2025-2026 de 3ème année du BUT Science des données de l'IUT2 (Université Grenoble Alpes).

\n\nIntervenant : Matthieu Viry

\nVoir l'ensemble de notebooks ici.\n\n

","pinned":false,"hidden":false,"mode":"html"},{"id":11,"value":"## Tooltips","pinned":false,"hidden":false,"mode":"md"},{"id":55,"value":"Une des interactions la plus simple et la plus classique (déjà rencontrée plusieurs fois dans le support de cours précédent) est le *tooltip* (ou info-bulle). Cette info-bulle va permettre d'afficher des informations supplémentaires lors du survol au dessus d'une marque du graphique.\n\nEn utilisant la propriété `tip` avec la valeur `true` sur la marque souhaitée :","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"Plot.plot({\n y: { nice: true },\n marks: [\n // Tooltip par défaut : avec la propriété tip: true\n Plot.barY(\n alphabet,\n {\n x: \"letter\",\n y: \"frequency\",\n sort: {x: \"y\", reverse: true},\n tip: true,\n }\n ),\n Plot.ruleY([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":57,"value":"En ajoutant d'autres attributs au tooltip, en plus de ceux par défaut :","pinned":false,"hidden":false,"mode":"md"},{"id":35,"value":"Plot.plot({\n y: { nice: true },\n marks: [\n // Tooltip par défaut : avec la propriété tip: true\n Plot.barY(\n alphabet,\n {\n x: \"letter\",\n y: \"frequency\",\n sort: {x: \"y\", reverse: true},\n tip: true,\n // On peut afficher de nouveaux attributs (en plus de ceux qui le sont par défaut)\n channels: {\n 'Ma propriété': (d) => `${d.letter}, une super lettre`,\n // Typiquemenr on aurait affiché d'autres propriétés de nos individus mais ici le jeu de données n'a\n // que deux colonnes...\n }\n }\n ),\n Plot.ruleY([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":61,"value":"En utilisant la marque [`tip`](https://observablehq.com/plot/marks/tip) et la transformation [`pointer`](https://observablehq.com/plot/interactions/pointer) :","pinned":false,"hidden":false,"mode":"md"},{"id":16,"value":"Plot.plot({\n y: { nice: true },\n marks: [\n Plot.barY(alphabet, {x: \"letter\", y: \"frequency\", sort: {x: \"y\", reverse: true} }),\n // La marque Plot.tip + l'interaction Plot.pointer\n Plot.tip(\n alphabet,\n Plot.pointerX(\n {\n x: \"letter\",\n y: d => d.frequency / 2,\n // Un contenu personnalisé (essayer de commenter la ligne qui suit pour revenir au tooltip par défaut)\n title: d => `La lettre ${d.letter} a une fréquence d'apparition de ${d.frequency * 100}%`,\n }\n )\n ),\n Plot.ruleY([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":138,"value":"## Crosshair","pinned":false,"hidden":false,"mode":"md"},{"id":156,"value":"La marque [*crosshair*](https://observablehq.com/plot/interactions/crosshair) indique la valeur X (position horizontale) et Y (position verticale) du point le plus proche du pointeur, sur leurs axes respectifs.","pinned":false,"hidden":false,"mode":"md"},{"id":141,"value":"Plot.plot({\n width: width * 2/3,\n height: width * 2/4,\n marks: [\n // Une marque pour afficher les points\n Plot.dot(penguins, {x: \"culmen_length_mm\", y: \"culmen_depth_mm\"}),\n // La marque \"crosshair\"\n Plot.crosshair(penguins, {x: \"culmen_length_mm\", y: \"culmen_depth_mm\"})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":245,"value":"## Highlighting (mise en évidence) lors du survol","pinned":false,"hidden":false,"mode":"md"},{"id":159,"value":"On peut accentuer l'effet de sélection du point survolé en utilisant ici aussi la transformation `pointer` vue plus haut :","pinned":false,"hidden":false,"mode":"md"},{"id":153,"value":"Plot.plot({\n width: width * 2/3,\n height: width * 2/4,\n marks: [\n // Une marque pour afficher les points, mais avec la transformation \"pointer\" -> seul le point survolé est affiché\n // avec ces propriétés (fill: red, etc.)\n Plot.dot(penguins, Plot.pointer({x: \"culmen_length_mm\", y: \"culmen_depth_mm\", fill: \"red\", r: 8})),\n // La marque pour afficher tous les points\n Plot.dot(penguins, {x: \"culmen_length_mm\", y: \"culmen_depth_mm\"}),\n // La marque \"crosshair\"\n Plot.crosshair(penguins, {x: \"culmen_length_mm\", y: \"culmen_depth_mm\"})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":247,"value":"Plot.plot({\n marks: [\n Plot.barY(\n alphabet,\n {\n x: \"letter\",\n y: \"frequency\",\n fill: \"lightgray\",\n }\n ),\n Plot.barY(\n alphabet,\n // On utilise ici \"pointerX\" car le graphique à une dimension \"dominante\"\n // Essayez de remplacer 'pointerX' par 'pointer' et regardez la différence\n Plot.pointerX({\n x: \"letter\",\n y: \"frequency\",\n fill: \"blue\",\n })\n ),\n Plot.ruleY([0])\n ]\n });","pinned":true,"hidden":false,"mode":"ojs"},{"id":21,"value":"## Filtrage","pinned":false,"hidden":false,"mode":"md"},{"id":68,"value":"Le filtrage consiste simplement à réduire ou à sélectionner les informations affichées. Cela peut prendre différentes formes, en fonction des données et du cas d'utilisation.\n\nDans ce premier exemple, un filtre sur le sport est utilisé pour sélectionner les athlètes figurant dans l'histogramme. Il s'agit d'une sélection, où l'utilisateur ne peut voir qu'une seule catégorie à la fois (contrairement aux facettes abordées dans le précédent support).\n\n*Remarquez comment la variable `selectedSport` est utilisée pour filtrer le tableau de données donné en argument à `Plot.rectY`.*","pinned":false,"hidden":false,"mode":"md"},{"id":111,"value":"viewof selectedSport = Inputs.select([...new Set(olympians.map(d => d.sport))].sort(), {label: \"Select one\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":13,"value":"Plot.plot({\n marks: [\n Plot.rectY(\n olympians.filter(d => d.sport == selectedSport),\n Plot.binX({y: \"count\"}, {x: \"weight\", fill: \"sex\"})\n ),\n Plot.ruleY([0])\n ],\n color: {\n legend: true\n },\n x: {\n domain: [0, 200]\n }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":70,"value":"Outre le filtrage sur une dimension catégorielle, nous pouvons également filtrer sur les dimensions continues et celles qui sont affichées. Ici, nous filtrons les lettres de l'alphabet par fréquence minimale. En déplaçant les curseurs, vous supprimez les lettres dont la fréquence est inférieure à ce seuil et ne voyez que les plus courantes.\n\n*Remarquez comment la variable `minFrequency` est utilisée pour filtrer le tableau de données donné en argument à `Plot.barY`.*","pinned":false,"hidden":false,"mode":"md"},{"id":98,"value":"viewof minFrequency = Inputs.range([0, .12], {label: \"Min Frequency\", step: .01, value: 0})","pinned":true,"hidden":false,"mode":"ojs"},{"id":96,"value":"viewof pinAxis = Inputs.toggle({label: \"Pin axis\", value: false})","pinned":true,"hidden":false,"mode":"ojs"},{"id":100,"value":"Plot.plot({\n y: { nice: true },\n marks: [\n Plot.barY(\n alphabet.filter(d => d.frequency >= minFrequency),\n {\n x: \"letter\",\n y: \"frequency\"\n }\n ),\n Plot.ruleY([0])\n ],\n x: {\n domain: pinAxis ? d3.sort(alphabet.map(d => d.letter)) : undefined\n }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":104,"value":"Essayez de cocher la case \"Pin axis\" pour voir la différence que cela fait. L'épinglage d'un axe signifie que son domaine (l'étendue de ses valeurs dans l'espace de données, par opposition à l'espace à l'écran dans lequel il est mappé) reste constant, même lorsque les données sont filtrées.\n\nL'effet de l'épinglage ici est que lorsque nous filtrons les données, nous voyons où elles manquent. Pour ce faire, nous extrayons toutes les lettres de l'ensemble des données et les plaçons dans le domaine de l'axe des x.\n\nIl existe des cas d'utilisation pour les axes épinglés et non épinglés. Lorsque l'objectif du filtrage est de réduire les données à une quantité gérable, il n'est souvent pas souhaitable d'épingler l'axe.","pinned":false,"hidden":false,"mode":"md"},{"id":23,"value":"## Highlighting","pinned":false,"hidden":false,"mode":"md"},{"id":72,"value":"Au lieu de filtrer les données, nous pouvons également mettre en évidence les données qui nous intéressent.\n\nL'avantage de la mise en évidence (*highlighting*) est qu'elle maintient le contexte : nous pouvons toujours voir les autres valeurs. Mais c'est aussi un inconvénient lorsqu'il y a trop de données qui encombrent l'affichage. Le choix entre filtrage et *highlighting* dépend du cas d'utilisation et de ce que vous souhaitez proposer à l'utilisateur de votre visualisation.\n\n*Remarquez comment la variable `minFreqAlphaHighlight` est utilisée à la fois pour déterminer la position de la ligne (`Plot.ruleY`) et pour déterminer la couleur des barres (dans l'objet définissant les propriétés des barres créées avec `Plot.barY`).*","pinned":false,"hidden":false,"mode":"md"},{"id":80,"value":"viewof minFreqAlphaHighlight = Inputs.range([0, .13], {label: \"Min Frequency\", step: .01, value: 0.03})","pinned":true,"hidden":false,"mode":"ojs"},{"id":74,"value":"Plot.plot({\n y: { nice: true },\n marks: [\n Plot.ruleY([0, minFreqAlphaHighlight]),\n Plot.barY(\n alphabet,\n {\n x: \"letter\",\n y: \"frequency\",\n fill: d => d.frequency >= minFreqAlphaHighlight ? \"steelblue\" : \"lightgray\",\n },\n )\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":84,"value":"L'exemple ci-dessus montre la mise en évidence d'une dimension de données qui est visible, mais le cas d'utilisation le plus courant est la mise en évidence d'un élément qui n'est pas affiché.\n\nComme dans le cas de notre ensemble de données sur les voitures, où nous pouvons mettre en évidence le nombre de cylindres du moteur, sur un nuage de points affichant la puissance en abscisse et la consommation en ordonnées.","pinned":false,"hidden":false,"mode":"md"},{"id":87,"value":"viewof cylinders = Inputs.radio([3, 4, 5, 6, 8], {label: \"Cylinders\", value: 4})","pinned":true,"hidden":false,"mode":"ojs"},{"id":89,"value":"Plot.plot({\n marks: [\n Plot.dot(\n cars,\n {\n x: \"power (hp)\",\n y: \"economy (mpg)\",\n title: \"name\",\n fillOpacity: 0.8,\n fill: d => d.cylinders === cylinders ? \"crimson\" : \"lightgray\",\n r: d => d.cylinders === cylinders ? 6 : 4\n }\n )\n ],\n height: 600,\n width\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":25,"value":"## Sélection des attributs","pinned":false,"hidden":false,"mode":"md"},{"id":116,"value":"Lorsque vous explorez des données (ou proposez des données à explorer à un utilisateur), vous pouvez être amené à proposer de sélectionner les dimensions des données qui seront affichées.\n\nCeci est toutefois moins commun, et brouille la frontière entre un simple graphique et une solution pour construire des graphiques.","pinned":false,"hidden":false,"mode":"md"},{"id":117,"value":"viewof xDimension = Inputs.select([\"economy (mpg)\", \"displacement (cc)\", \"power (hp)\", \"weight (lb)\", \"0-60 mph (s)\"], {label: \"Axe X\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":120,"value":"viewof yDimension = Inputs.select([\"displacement (cc)\", \"power (hp)\", \"weight (lb)\", \"0-60 mph (s)\", \"economy (mpg)\"], {label: \"Axe Y\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":126,"value":"Plot.plot({\n marks: [\n Plot.dot(cars, { x: xDimension, y: yDimension, tip: true })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":321,"value":"## Ajouter des éléments de manière conditionnelle au graphique","pinned":false,"hidden":false,"mode":"md"},{"id":325,"value":"Il peut parfois être intéressant de n'afficher certains éléments que si une condition est remplie ou d'afficher des éléments différents en fonction de la valeur d'une variable (servant par exemple à stocker le choix réaliser par l'utilisateur.rice).","pinned":false,"hidden":false,"mode":"md"},{"id":335,"value":"viewof genre = Inputs.select([\"female\", \"male\"], {label: \"Selectionner\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":337,"value":"Plot.plot({\n marginLeft: 60,\n x: { nice: true, domain: [30, 200] },\n marks: [\n Plot.rectY(\n olympians.filter((d) => d.sex === genre),\n Plot.binX(\n { y2: \"proportion\" },\n {\n x: \"weight\",\n fill: \"sex\",\n stroke: \"sex\",\n fillOpacity: 0.1,\n strokeWidth: 1.5,\n thresholds: 30,\n // curve: \"na\",\n }\n )\n ),\n Plot.ruleY([0]),\n // On peut utiliser un opérateur ternaire pour afficher une marque différente\n // en fonction de la valeur d'une variable\n genre === 'male'\n ? Plot.ruleX([d3.mean(olympians.filter((d) => d.sex === genre).map((d) => d.weight))], { strokeWidth: 2, stroke: 'red'})\n : Plot.ruleY([0.09]),\n // On peut aussi utiliser un opérateur ternaire pour afficher une marque dans un cas\n // mais ne rien afficher dans l'autre (notez le \"null\" après les \":\")\n genre === 'male'\n ? Plot.text(['Taille moyenne'], { x: 96, y: 0.135, fill: 'red'})\n : null\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":27,"value":"## Augmenter les graphiques réalisés avec Plot\n\nNous avons vu dans le précédent support de cours sur Plot un graphique (https://observablehq.com/@hrbrmstr/machinating-observable-plot-axis-text) qui comportait un effet lors du survol des axes.\n\nNous avons également vu que l'objet renvoyé est de type HTMLElement, ce qui permet d'utiliser des méthodes habituelles telles que `querySelector`, `querySelectorAll`, etc. pour sélectionner des éléments spécifiques du graphique (les étiquettes des axes, toutes les marques d'un type souhaité, etc.) pour modifier leur style ou pour leur ajouter un gestionnaire d'événement.\n\n*Essayer de survoler l'axe Y, de survoler les barres et de cliquer sur les barres ; regardez ensuite le code qui permet de faire cela.**","pinned":false,"hidden":false,"mode":"md"},{"id":180,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":224,"value":"## Pour aller plus loin dans les interactions avec Plot\n\nVous pouvez regarder le code des notebooks suivants, ils intègrent des interactions comme celles vues dans ce support :\n- [Bank failures](https://observablehq.com/@mbostock/bank-failures)\n- [GapMinder-like visualisation with Observable Plot](https://observablehq.com/@mthh/gapminder-like-with-plot)\n- [ConUS Foliage 2023](https://observablehq.com/@hrbrmstr/conus-foliage-2023)","pinned":false,"hidden":false,"mode":"md"},{"id":220,"value":"\n\n## Crédit\n\nCe notebook est partiellement inspiré du notebook [Lesson 5, Interaction](https://observablehq.com/@observablehq/lesson-5-interaction) de la collection [Data Visualization Fundamentals and Best Practices Course\n](https://observablehq.com/collection/@observablehq/data-vis-course) proposée par Observable. N'hésitez pas à consulter ces notebooks pour enrichir vos connaissances sur la visualisation de données ou pour revoir les éléments vus en cours, expliqués d'une manière parfois différente.","pinned":false,"hidden":false,"mode":"md"},{"id":271,"value":"## Et ensuite ?\n\nDans les prochaines séances, avec D3.js, nous iront plus loin dans la définition d'interactions avec nos visualisations de données :\n- *zoom* et *pan* (par exemple dans un nuage de point)\n- *brushing* (par exemple dans un nuage de points ou sur un diagramme en barres),\n\nMais ce n'est pas tout, un mode d'interaction classique dans les outils type *dashboard* consiste à avoir des vues synchronisées : la sélection d'individus sur un premier graphique (par exemple par une action de *brush* sur un nuage de points) va mettre en évidence les mêmes individus sur les autres visualisations, présentes sur la même page Web, où ces individus apparaissent (carte ou diagramme à barre par exemple).","pinned":false,"hidden":false,"mode":"md"}],"files":"$W32","stdlib":"1","titling":"auto"}