Introduction

DynamicD3 propose des visualisations de données personnalisées utilisant D3.js. Nous travaillerons avec vous pour vous aider à sélectionner la manière la plus efficace de présenter vos données : il peut s'agir de Bar Charts, Line Charts, Pie Charts, Sankey Diagrams ou de visualisations de données plus exotiques telles que les chloroplèthes, les Bubble Charts ou les Sunburst Diagrams.

Les visualisations de données D3.js peuvent inclure un grand nombre de Add Ons tels que des infobulles, des zooms, des survols de souris et des animations. Ces éléments aident les utilisateurs à comprendre les données de manière plus intuitive et offrent une expérience attrayante, ce qui n'est pas possible avec des visualisations de données statiques. Nous pouvons également créer une interface utilisateur personnalisée - à l'aide de boutons radio, de cases à cocher, de curseurs ou d'interrupteurs à bascule - qui élargit encore la gamme des expériences interactives.

Nous vous fournissons soit du JavaScript simple, que vous pouvez insérer directement dans votre site web, soit un composant React. Nous mettrons en place une simple page web gratuite en guise de démo. En option, nous pouvons créer une grille de données afin que vous puissiez mettre à jour vos données facilement.

D3.js peut utiliser des données provenant d'un fichier JSON ou CSV statique, ou des données provenant d'une API. Nous pouvons également créer une grille de données pour que vous puissiez facilement mettre à jour les données.

Diagrammes à barres

Les diagrammes en barres sont généralement utilisés pour les données catégorielles, comme cet exemple comparant le nombre d'opérations effectuées sur trois organes spécifiques dans un grand hôpital.

Notez qu'un diagramme à barres n'est pas la même chose qu'un histogramme, même s'ils se ressemblent. Un histogramme ne contient pas de données catégoriques, telles que des pays (dans lesquels un point de données se trouve sans ambiguïté dans une catégorie ou une autre). Il montre plutôt des données qui forment un continuum, mais qui sont réparties dans différentes plages, appelées "bacs". Par exemple, un ensemble de données dans lequel l'axe des x indique la distance à partir d'un certain point pourrait être divisé en plages. Toutefois, ces plages sont arbitraires et sont généralement choisies pour afficher clairement les données.

D3.js peut être utilisé pour un diagramme à barres ou un histogramme, et l'un ou l'autre peut représenter un ou plusieurs ensembles de données. Il peut également être utilisé pour représenter des données continues. Cependant, il est plus approprié de les afficher dans un diagramme linéaire ou un diagramme de dispersion.

Graphiques linéaires

Line Charts and Area Charts displays data points over a continuous interval or time period. Depending on the curve used to connect the lines it shows trends and patterns over time. The horizontal, or x-axis represents the independent variable (often time), while the vertical axis represents the dependent variable (the value which has been measured). If the horizontal axis represents time this can be labelled using standard units of time and date, such as seconds, minutes, months and years. D3.js is extremely flexible in this regard. Date and time labels can be localized (for example, by using words in another language to represent the months).

Les graphiques linéaires sont particulièrement utiles pour présenter plusieurs ensembles de données liés d'une manière ou d'une autre. Ces ensembles de données utilisent généralement le même axe x, mais peuvent avoir des échelles différentes et des axes y différents. Ils sont particulièrement utiles pour dégager des tendances dans différents ensembles de données (par exemple, pour comparer le moment où il y a un pic de maladie dans différents pays). Dans cet exemple, une interface utilisateur est utilisée pour passer d'une combinaison d'ensembles de données à une autre. Notez que D3.js peut automatiquement ajuster l'échelle de l'axe vertical en fonction de l'évolution des données.

Un autre point fort des graphiques linéaires est leur capacité à analyser efficacement les tendances. Il est possible de tracer une courbe qui passe par chaque point ou qui montre les tendances à court ou à long terme. Dans l'exemple ci-dessus, une interface utilisateur a été ajoutée afin que les utilisateurs puissent explorer l'ensemble des données de différentes manières en utilisant différentes courbes.

A variation on the line chart is the area chart, in which the area under the line is shaded. This is also shown in the example on the Line Chart page

Pie Charts

Dans un diagramme circulaire, l'angle de chaque tranche est proportionnel à la quantité qu'elle représente. <Les> sont identiques, sauf que les diagrammes en beignet ont un trou au milieu qui peut contenir des données. Les diagrammes en beignet peuvent avoir plusieurs anneaux montrant une hiérarchie de valeurs de données ; cependant, ce type de diagramme est appelé ,[object Object],.</Les>

Les diagrammes circulaires sont couramment utilisés dans les journaux. Cependant, bien qu'ils soient familiers et faciles à comprendre, ils ne constituent pas la meilleure façon de représenter des données proportionnelles ou catégorielles, car il est difficile de comparer différentes valeurs (contrairement à un diagramme à barres, où les hauteurs des rectangles peuvent être comparées facilement). Ils sont toutefois utiles lorsque les données représentent une proportion d'une valeur totale. Les proportions peuvent également être représentées à l'aide de diagrammes en bâtons, mais cela est moins évident sur le plan intuitif.

La métaphore de la tarte peut être étendue en dessinant un morceau de la tarte. Cela peut se faire de manière statique ou en utilisant un effet de survol de la souris, comme le montre la page Tableau de tarte. C'est ce que l'on appelle un graphique en camembert éclaté. Des informations plus détaillées peuvent être données pour la section éclatée.

Diagrammes de Sunburst

Les diagrammes en étoile sont une forme de diagramme circulaire à plusieurs niveaux. Ils sont parfois connus sous le nom d'arborescences radiales, car les données ont la même structure hiérarchique qu'une arborescence conventionnelle.

Ce type de visualisation des données montre la hiérarchie à travers une série d'anneaux qui sont découpés pour chaque nœud de catégorie. Chaque anneau correspond à un niveau de la hiérarchie, le cercle central représentant le nœud racine et la hiérarchie allant vers l'extérieur. Par exemple, dans cet exemple, les types d'opérations sont divisés. Le premier anneau divise les opérations en fonction de l'organe concerné. L'anneau suivant divise chacune de ces sections en fonction du type de traitement (conservateur, opération, transplantation ou médicaments) et l'anneau suivant indique si les patients étaient assurés ou non. Les valeurs sous-jacentes sont affichées en bas au passage de la souris. Cela signifie que les utilisateurs peuvent explorer les données en se déplaçant sur l'écran. Par exemple, ils pourraient vouloir savoir comment la proportion de patients ayant reçu un traitement rénal diffère en fonction de leur couverture d'assurance.

La couleur peut être utilisée pour mettre en évidence des groupements hiérarchiques ou des catégories spécifiques. Dans l'exemple ci-dessus, l'utilisateur peut modifier la palette de couleurs pour mettre en évidence différents aspects de l'ensemble de données. Dans le premier exemple, différentes gammes de couleurs sont utilisées pour chaque anneau. Cela permet de comprendre facilement les données présentées dans chaque anneau, tout en faisant apparaître clairement les limites des sections. Cependant, cela ne fonctionne pas avec les grands ensembles de données. Dans ce cas, il est plus clair que toutes les sections d'un anneau particulier aient la même teinte. Enfin, dans certains cas, des couleurs aléatoires peuvent être utilisées. Il est alors plus difficile de comprendre l'importance de chaque niveau dans la hiérarchie, mais il est plus facile de voir les différents secteurs. L'affichage de l'interface utilisateur dans l'exemple Sunburst passe d'une alternative à l'autre.

Diagramme Sankey

Les diagrammes de Sankey sont utilisés pour représenter des processus de flux, tels que le flux d'argent au sein d'une organisation (comme indiqué dans un état financier), le flux d'énergie ou de matières premières à travers une série de processus industriels ou le flux d'un actif plus abstrait, tel que l'information. La hauteur ou la largeur de chaque nœud représente la quantité totale de flux passant par ce nœud et l'épaisseur des lignes entre chaque paire de nœuds représente la quantité de flux passant entre ces nœuds. La couleur peut être utilisée, soit pour montrer la quantité de flux (par exemple, en utilisant un gradient de couleur), soit pour montrer un autre aspect du processus, comme dans ce diagramme de Sankey, qui utilise des couleurs pour illustrer le flux de réfugiés.

Le secteur de l'énergie est un domaine où les Sankeys sont souvent utilisés. Par exemple, ils peuvent montrer la source du gaz naturel par pays, les moyens par lesquels il arrive à destination (gazoduc, bateau, etc.) et ensuite comment il est utilisé (utilisateurs finaux). Les diagrammes de ce type sont utiles aux décideurs politiques, car ils mettent en évidence les domaines dans lesquels l'efficacité peut être améliorée.

Les diagrammes de Sankey sont un moyen particulièrement intuitif de montrer les changements au fil du temps. Dans ce diagramme de Sankey, le flux de réfugiés de différents pays d'origine vers les États-Unis est représenté sur une période donnée. Le curseur permet aux utilisateurs de se déplacer dans le temps, et les transitions fluides facilitent le suivi des nœuds au fur et à mesure qu'ils gagnent ou perdent en importance.

Chloroplèthe

Les choroplèthes utilisent la couleur pour montrer comment une variable varie à travers une zone géographique. Ils sont similaires aux cartes thermiques, mais contrairement à ces dernières, ils divisent la carte en sous-unités géopolitiques, telles que les pays, les États, les provinces ou les comtés.

Les valeurs utilisées dans un chloroplèthe doivent tenir compte de la taille variable des zones. Par exemple, il existe une énorme différence entre la taille des différents pays, et il n'est donc pas logique de colorer les pays uniquement en fonction de leur population. Ces données seront plutôt "normalisées" entre les régions en utilisant la densité de population plutôt que la population absolue. Pour les deux types d'affichage, les couleurs plus foncées ou plus intenses représentent généralement des valeurs plus élevées, tandis que les couleurs plus claires ou plus pâles indiquent des valeurs plus faibles.

Malheureusement, les données du monde réel ne sont généralement pas divisées en catégories naturelles. Par exemple, un chloroplèthe dans lequel l'intensité d'une couleur est proportionnelle à la densité de population peut fonctionner lorsqu'il existe une différence similaire entre les densités de population de différentes régions (par exemple entre différents comtés d'un même État américain). Cependant, les données contiennent souvent des valeurs qui sont supérieures de plusieurs ordres de grandeur à d'autres valeurs dans le même ensemble de données. Heureusement, D3.js dispose d'un riche ensemble d'échelles. Dans certains cas, une échelle logarithmique peut être plus appropriée : elle permet de bien montrer les petites différences, mais aussi les différences beaucoup plus importantes. Dans d'autres cas, une couleur peut être utilisée pour montrer les valeurs supérieures ou inférieures à un certain seuil. C'est ce haut niveau de flexibilité qui fait de D3.js un outil si puissant pour créer des visualisations de données.

En plus de nous aider à mettre les données à l'échelle, D3.js nous permet d'utiliser un large éventail de projections cartographiques : celles-ci ont un impact majeur sur la façon dont les données sont perçues. Les chloroplèthes produits à l'aide d'autres bibliothèques utilisent souvent des projections standard telles que la projection de Mercator, ce qui peut entraîner d'importantes distorsions dans certaines parties du monde. Le problème se pose moins lorsque la carte représente des zones plus petites, comme les comtés du Royaume-Uni, ou lorsque les zones affichées sont toutes situées à une latitude similaire.

Enfin, il est possible d'utiliser deux données distinctes (mais liées), chacune avec une échelle de couleurs différente. C'est ce qu'on appelle un Cloroplèthe bidimensionnel.

Graphique à bulles

Les diagrammes à bulles ressemblent à des diagrammes de dispersion où les données sont remplacées par des cercles. Alors qu'un diagramme de dispersion ne peut utiliser que la position et la couleur d'un point pour représenter l'information, un diagramme à bulles possède également des dimensions horizontales et verticales. Les diagrammes à bulles sont donc particulièrement adaptés à la représentation de relations multidimensionnelles.

Si une seule information supplémentaire doit être affichée pour chaque cercle, elle peut être représentée par la surface du cercle. Toutefois, cela peut poser problème, car les utilisateurs ont tendance à juger de la taille relative des cercles en se basant sur leur diamètre plutôt que sur leur surface. Il est important de le préciser dans la légende.

Les graphiques à bulles fonctionnent moins bien lorsqu'il y a beaucoup de points de données et lorsque l'éventail des données est important. Lorsqu'il y a trop de points de données, l'affichage peut sembler encombré et les bulles peuvent se chevaucher. Lorsque l'ensemble de données présente une large gamme de valeurs, les petites bulles peuvent ne pas être clairement visibles. Ces problèmes peuvent être surmontés dans une certaine mesure en utilisant des interactions avec la souris pour donner plus d'informations, telles que la valeur exacte du point de données sous-jacent.

Un dernier problème lié aux diagrammes à bulles est l'illusion de la moyenne pondérée : la taille des bulles affecte la perception des valeurs x et y du point de données. Cette distorsion doit être prise en compte lors de l'estimation des valeurs x et y moyennes.

Les graphiques à bulles qui doivent afficher des valeurs négatives peuvent être créés en utilisant un symbole au centre des bulles représentant les valeurs négatives, des couleurs différentes pour les valeurs positives et négatives ou même des formes différentes. Avec D3.js, ce niveau de flexibilité est possible, mais ce n'est pas le cas avec la plupart des bibliothèques de visualisation de données.