Add-Ons

Info-bulles

Il est possible d'ajouter des infobulles à n'importe quel diagramme ou graphique. Elles sont particulièrement utiles lorsqu'il y a beaucoup de points de données (par exemple, dans un diagramme de dispersion). Même avec des ensembles de données plus petits, elles aident à désencombrer le graphique, ce qui permet aux utilisateurs de se concentrer sur les tendances générales.

Ils sont également utiles dans les diagrammes complexes, où les différentes parties du diagramme véhiculent différents aspects de l'ensemble des données, ce qui peut ne pas être évident pour les utilisateurs qui ne sont pas familiarisés avec ce type de diagramme. Par exemple, dans ce Diagramme en étoile, les utilisateurs peuvent passer la souris sur les segments pour voir à la fois le point de données sous-jacent et le contexte de ce point de données. Dans ce cas, le diagramme en étoile décompose les traitements médicaux en fonction du type, de l'organe affecté et du statut d'assurance du patient. Ces informations sont affichées en bas de l'écran et changent lorsque l'utilisateur passe la souris sur chaque segment.

L'une des grandes forces de D3 est qu'il offre une grande flexibilité. Une info-bulle peut inclure n'importe quelle donnée présente dans l'ensemble de données, un texte contextuel, ou même des valeurs provenant d'un ensemble de données complètement différent. Par exemple, cette Sankey montre aux utilisateurs que les nœuds représentent le nombre total de réfugiés, tandis que les lignes représentent le nombre de réfugiés se déplaçant entre chaque origine (dans ce cas, un pays) et chaque destination (dans ce cas, un État américain). Ce texte peut être rédigé dans n'importe quelle langue, ce qui facilite grandement la localisation.

Lorsque deux ensembles de données ou plus sont utilisés dans l'affichage, les infobulles peuvent montrer des comparaisons entre eux. Par exemple, elles peuvent montrer la valeur de cette année et celle de l'année dernière, ou des ensembles de données pour différentes régions. Inversement, avec un seul ensemble de données, elles peuvent être utilisées pour afficher des intervalles de confiance, des valeurs en pourcentage ou d'autres informations statistiques liées aux points de données, aidant ainsi les utilisateurs à évaluer la fiabilité des données.

Un autre avantage des infobulles est qu'elles sont amusantes ! Elles renforcent l'interactivité en permettant aux utilisateurs de s'engager dans le graphique et d'explorer les données à leur guise.

Zooms

Les zooms permettent aux utilisateurs de zoomer sur des zones spécifiques d'un graphique ou d'un diagramme afin d'examiner de plus près les points de données et les tendances. Cette fonction est particulièrement utile pour les grands ensembles de données. Il est également utile lorsque les utilisateurs s'intéressent à différents aspects de l'ensemble de données : par exemple, certains utilisateurs peuvent vouloir se concentrer sur une période particulière.

Les zooms permettent également aux utilisateurs d'effectuer des comparaisons détaillées entre différentes parties de l'ensemble de données. Ils peuvent explorer les données de manière interactive en zoomant sur une zone, puis en se déplaçant vers une autre zone. Cela leur permet de voir plus clairement les corrélations, les valeurs aberrantes et les modèles.

Un autre avantage des zooms est qu'ils permettent aux utilisateurs d'utiliser des appareils plus petits, tels que les smartphones, pour voir l'ensemble des données, tout en étant en mesure de voir les détails dont ils ont besoin. Les utilisateurs de smartphones ont l'habitude de zoomer dans l'écran en faisant un "geste de pincement".

Le zoom permet également d'améliorer l'accessibilité pour les personnes souffrant de déficiences visuelles.

Brosses

Le brossage fonctionne de la même manière que le zoom, en ce sens qu'il permet aux utilisateurs d'interagir avec une partie de l'ensemble des données. Cependant, au lieu d'agrandir une partie du graphique, cette zone ne change pas de taille. La zone brossée peut être indiquée d'une autre manière, par exemple par un changement de couleur.

Un pinceau peut être utilisé pour filtrer les données - par exemple, les utilisateurs peuvent brosser l'axe x d'un graphique de surface en déplaçant leur souris. La zone ainsi brossée peut alors apparaître sur une autre partie de l'écran. Une autre façon d'utiliser un pinceau est d'ajouter un graphique séparé montrant les mêmes données à une échelle différente. Dans ce cas, le pinceau fonctionne de la même manière que le zoom. Cependant, il peut être plus facile à utiliser, car les dimensions du graphique original ne changent pas.

Animations

Les animations sont utiles à plusieurs égards. Dans le cas d'un simple diagramme à barres, par exemple, les barres peuvent glisser lentement vers le haut au lieu d'apparaître instantanément. Cela n'ajoute que très peu au contenu informatif du graphique, mais le rend plus intéressant pour les utilisateurs.

Les animations jouent un rôle plus important lorsqu'elles sont utilisées pour les transitions. Par exemple, ce diagramme de Sankey présente des données sur plusieurs années. Lorsque l'utilisateur passe d'une année à l'autre à l'aide du curseur, la taille relative des nœuds change. Ils se déplacent parce qu'ils sont classés par ordre de taille. Sans l'animation, le changement serait brutal et il serait difficile de maintenir la "constance de l'objet". Par exemple, un utilisateur pourrait être intéressé par l'évolution, d'une année sur l'autre, des flux (dans ce cas, de réfugiés) en provenance d'un pays donné. Si ce nœud sautait sans transition, il serait difficile d'y parvenir.

Un autre exemple de transition est illustré dans ce diagramme circulaire. Lorsqu'un segment est survolé, il se déplace légèrement vers l'extérieur. En utilisant une transition douce, ce mouvement semble naturel et contribue à maintenir la métaphore du camembert. Sans cela, cette section du camembert sauterait d'une position à l'autre. Pour la même raison, les animations sont particulièrement efficaces lorsqu'il s'agit d'afficher des séries chronologiques de données, telles que les valeurs d'un indicateur boursier. Là encore, l'avantage est qu'il est plus facile pour l'œil de suivre l'évolution d'une valeur particulière.

Lorsque l'animation est utilisée pour passer d'un ensemble de données à un autre et que ces transitions sont contrôlées par une interface utilisateur, comme <TransLink>ce curseur</TransLink>, l'utilisateur peut explorer les valeurs comme s'il s'agissait d'un affichage vidéo.

Couleurs

Les graphiques D3 étant créés en JavaScript, il est possible de définir les couleurs à l'aide d'une fonction. Cela signifie que la couleur peut être utilisée d'une manière qui n'est pas possible dans d'autres bibliothèques de visualisation de données.

L'utilisation la plus évidente de la couleur consiste à distinguer différents ensembles de données - par exemple, ce Bar Chart contient des données pour plusieurs ensembles de données similaires. En utilisant des couleurs différentes pour chaque ensemble de données et en expliquant la signification de ces couleurs dans une légende, il est possible de les combiner dans un même graphique.

La couleur peut également être utilisée pour regrouper des ensembles de valeurs similaires. Par exemple, le diagramme Sunburst montre une hiérarchie de données. Chaque anneau représente un niveau différent de la hiérarchie. En utilisant la couleur, nous pouvons regrouper les valeurs qui appartiennent au même niveau et les expliquer dans une légende.

Un autre avantage de D3 est qu'il est possible de varier la saturation de la couleur ainsi que sa teinte. Par exemple, dans ce diagramme Sunburst (l'exemple du haut), la saturation de la couleur dans chaque section est variable, alors que toutes les sections d'un même anneau ont la même couleur. Dans ce cas, l'intensité est simplement aléatoire, afin de distinguer plus clairement les secteurs individuels (à comparer avec l'exemple dans lequel chaque secteur d'un anneau a à la fois la même teinte et la même saturation). Cependant, la saturation peut également être liée au point de données sous-jacent. Dans ce cas, il est préférable que les sections ne soient pas classées par ordre de taille, sinon les petits secteurs seront trop difficiles à distinguer.

Un autre exemple où la couleur a été utilisée pour rendre le diagramme plus clair est ce diagramme de Sankey. Dans les deux premiers exemples, une couleur est utilisée pour représenter les nœuds d'origine et une autre couleur représente les nœuds de destination. En outre, la densité de la couleur représente la taille de chaque nœud. Ces mêmes couleurs sont utilisées dans les lignes de connexion. Il existe donc un lien évident entre les valeurs représentées par les nœuds et les valeurs représentées par les lignes de connexion. Dans les deux derniers exemples, deux couleurs sont utilisées et les valeurs des données sous-jacentes sont représentées par les valeurs relatives de ces deux couleurs. Cela peut parfois être plus clair, en particulier lorsque les différences entre les valeurs des données sont subtiles.

Enfin, la couleur peut parfois être utilisée simplement pour séparer des parties du diagramme, sans signification sous-jacente. C'est le cas dans le troisième exemple de diagramme Sunburst. Les couleurs sont spécifiquement choisies de manière à ce que les limites entre les secteurs du diagramme ensoleillé soient clairement visibles. Ceci est particulièrement utile lorsque les valeurs sont faibles et que les secteurs sont très étroits.

La couleur peut également être utilisée pour distinguer un ensemble particulier de points de données. Elle peut être combinée avec un pinceau (voir ci-dessus). En passant la brosse sur le graphique, les utilisateurs peuvent filtrer les points de données. Les valeurs filtrées peuvent être affichées dans une couleur différente, qui peut être liée à une légende distincte.

Même sans pinceau, les couleurs peuvent être utiles pour mettre en évidence des valeurs spécifiques. Par exemple, avec D3.js, nous pouvons donner une couleur spécifique aux valeurs aberrantes ou utiliser des couleurs différentes pour les valeurs négatives et positives. Les visualisations de données deviennent beaucoup plus claires lorsque les couleurs sont utilisées intelligemment, en particulier lorsqu'il y a beaucoup de points de données. Le codage couleur peut également être utilisé pour montrer la structure globale d'une visualisation de données.

Les couleurs peuvent également faciliter les interactions. La couleur d'un point, d'une barre ou d'une ligne de données peut changer au passage de la souris, soulignant ainsi qu'il a été sélectionné.

Grille de données

Les données d'un diagramme ou d'un graphique D3js proviennent généralement de l'une des trois sources suivantes. Si les données ne sont pas susceptibles de changer très souvent, elles peuvent être stockées dans un fichier JSON ou CSV sur le serveur. Si les données proviennent d'une base de données locale, celle-ci devra être mise à jour directement, soit avec une interface personnalisée, soit avec un outil de base de données, tel que DBeaver. Nous pouvons mettre cela en place pour vous.

However, if data needs to be updated by somebody with no technical skills, the best option is for us to create a data grid for you. This looks and feels much like an Excel spreadsheet. It can either be on a page which is shielded from search engines or which is password-protected.

Une variante de la grille de données est le formulaire : il fonctionne comme le formulaire de contact d'un site web. Ce type de formulaire peut s'avérer plus approprié lorsque les données doivent être saisies par du personnel qui n'est pas familiarisé avec une grille de données.

Éléments d'interface utilisateur

Bien que D3.js offre un ensemble limité d'outils d'interface utilisateur, il est préférable de les coder à l'aide d'une bibliothèque de composants, telle que MUI, ou en HTML.

Les éléments d'interface utilisateur les plus utiles sont les boutons radio et les cases à cocher. Ces éléments sont parfois confondus. Les boutons radio, tels que ceux présentés dans ce Graphique à barres empilées, permettent aux utilisateurs de choisir entre plusieurs options qui s'excluent mutuellement : dans ce cas, ils peuvent choisir un seul ensemble de données, représenté par un simple diagramme à barres, ou plusieurs ensembles de données, représentés par un diagramme à barres empilées. Cependant, ils peuvent également être utilisés pour modifier la manière dont les données sont affichées. Dans cette visualisation de données Sunburst, les boutons radio affectent la manière dont la couleur est utilisée pour faire ressortir les différents aspects de l'ensemble de données.

Les cases à cocher, en revanche, permettent aux utilisateurs de choisir n'importe quelle permutation d'options : dans ce cas, les choix ne sont pas mutuellement exclusifs. Dans l'exemple de la case à cocher, le <Link>Line Chart data visualization</Link> peut afficher un seul ensemble de données, deux ensembles de données ou les trois. Cela s'avère extrêmement utile lorsque les utilisateurs doivent effectuer des comparaisons spécifiques entre des paires d'ensembles de données : par exemple, ils peuvent vouloir comparer les valeurs des opérations du cœur à celles des opérations du foie, et supprimer les valeurs des opérations de la rate pour plus de clarté.

Un autre élément d'interface utilisateur utile pour améliorer les visualisations de données D3.js est un interrupteur à bascule. Il est utilisé lorsque le diagramme peut être dans l'un des deux états, ou lorsque vous voulez donner aux utilisateurs la possibilité de changer une partie de la visualisation de données pour améliorer la clarté. Dans cet exemple, un interrupteur à bascule est utilisé pour <Link> passer d'un graphique linéaire à un graphique en aires</Link>.

Enfin, des curseurs peuvent être utilisés. Ceux-ci fonctionnent particulièrement bien lorsqu'une visualisation de données contient des ensembles de données provenant de périodes différentes. Ils permettent aux utilisateurs de se déplacer intuitivement d'avant en arrière le long de la ligne temporelle, comme dans cette visualisation de données Sankey