DynamicD3: Visualisation de données avec D3.js

DynamicD3

Diagrammes de Sankey

Les diagrammes de Sankey sont des visualisations de données utilisées pour afficher le flux d'une série de processus. L'exemple ci-dessus est simple, mais ils peuvent également être utilisés pour des processus beaucoup plus complexes, tels que des processus industriels comprenant de nombreuses étapes. D3.js est particulièrement bien adapté à la création de diagrammes de Sankey et permet une grande personnalisation.

Un domaine qui fonctionne particulièrement bien est celui des flux d'énergie : par exemple, les visualisations de données Sankey ont été utilisées pour illustrer la production de pétrole, en commençant par son pays d'origine, comment il est transporté, où il est raffiné et où il est finalement consommé.

Les diagrammes de Sankey peuvent également être utilisés pour montrer comment les matériaux sont créés et recyclés. Cependant, un principe important qui complique parfois leur utilisation dans ces types de visualisation de données est que D3.js exige que le flux entrant dans chaque partie du processus soit égal au flux sortant de ce processus. La hauteur de chaque nœud doit également être égale à la somme des épaisseurs des flux (en d'autres termes, les lignes) qui y entrent et en sortent. Il est possible de contourner ces limitations et de créer des diagrammes de Sankey avec des boucles de rétroaction, mais cela nécessite un programme personnalisé ou des variantes de la bibliothèque Sankey standard de D3.js.

Une autre utilisation courante du diagramme de Sankey est la représentation des flux de trésorerie d'une entreprise. Dans ce cas, les couleurs et les positions des nœuds et des lignes doivent être modifiées de manière à ce que les flux similaires (par exemple, ceux qui ont un impact positif sur le résultat net) soient de la même couleur (par exemple, vert), tandis que ceux qui représentent des flux ayant un impact négatif sont d'une autre couleur, généralement rouge. Les nœuds et les lignes doivent également être positionnés ensemble pour que le diagramme soit bien organisé. Les visualisations de données Sankey de ce type peuvent être créées à l'aide de D3.js, mais ces positions doivent être codées sur mesure. Il est important de garder à l'esprit la condition mentionnée ci-dessus : le flux entrant dans chaque nœud doit être égal au flux sortant de ce nœud. Cela nécessite une certaine compréhension des données financières afin que le diagramme de Sankey ait un sens.

Le coût d'une visualisation de données Sankey créée à l'aide de D3.js dépend fortement de la mesure dans laquelle elle doit être codée sur mesure. Les Add-ons tels que les infobulles, les animations personnalisées et autres ajouteront un peu au coût mais amélioreront grandement l'expérience de l'utilisateur. La page Prix vous donnera une idée générale. Toutefois, n'hésitez pas à nous contacter pour discuter gratuitement avec un développeur afin de déterminer ce qui vous convient le mieux.

Ce graphique montre le flux de réfugiés depuis leur pays d'origine jusqu'à leur pays de destination aux États-Unis.

Le nombre de personnes ayant déménagé au cours d'une année donnée est indiqué par l'épaisseur du lien et par la hauteur et la couleur du nœud