Classification des modules d3.js

Mis à jour le 07/04/2017 par Nicolas Bonnel

Cet article s'adresse à un public de développeurs.

d3.js est une librairie javascript très populaire pour faire des visualisation de données. Elle est modulaire depuis sa version 4.0, ce qui permet une meilleure intégration avec les frameworks javascript récents. On peut importer uniquement les parties qui nous intéressent, ce qui permet de produire un livrable plus léger.

Nous avons fait une classification de tous les modules d3.js pour nous y retrouver plus facilement dans les composants qu'on pouvait utiliser facilement avec un autre framework javascript qui manipule également le DOM comme Vue.js ou React.js. Cette classification reflète un certain point de vue, il est possible que vous ne soyez pas d'accord avec.

Layouts et représentations particulières

Ce qui fait le charme de d3.js, ce sont ses représentations particulières qui changent des graphiques que l'on a l'habitude de voir. Les modules suivants permettent de faire des visualisations de données dynamiques qui font voir les données sous un angle nouveau.

Module Description Popularité
d3-force Permet de construire et gérer un graphe de force 160
d3-hierarchy Fourni des techniques pour visualiser des données hiérarchiques 122
d3-voronoi Permet de construire et manipuler des diagrammes de Voronoi 87
d3-sankey Permet de visualiser des flux entre des noeuds dans un graphe acyclique 77
d3-chord Permet de visualiser les données de relation avec un diagramme en cercle 29
d3-hexbin Permet d'agréger des données sur une grille hexagonale 38
d3-tile Permet de gérer un layout basé sur des tiles 28

Tracé et opérations géométriques

Manipuler directement le langage pour écrire un chemin en SVG ou projeter des données cartographiques à l'écran n'est pas forcément facile. Réaliser des opérations sur des ensembles de points peut être fastidieux. Les modules suivants sont la pour vous aider à ces tâches.

Module Description Popularité
d3-shape Fonction utilitaire pour générer des formes 1367
d3-geo-projection Projections géographiques additionnelles 487
d3-geo Permet de gérer différentes projections géographiques 154
d3-path Permet de contruire des path SVG de la même manière que sur un Canvas 70
d3-contour Calcule les contours de polygones en utilisant l'algorithme marching squares 25
d3-polygon Fourni des opérations géométriques pour les polygones 27

Gestion des couleurs

Ces modules vous permettent de gérer les couleurs plus facilement.

Module Description Popularité
d3-scale-chromatic Schémas de couleurs 125
d3-color Fonctions utilitaires pour manipuler les couleurs 120
d3-hcg Gestion des couleurs dans l'espace HCG 9
d3-hsv Permet de gérer les couleurs dans l'espace TSV (Teinte, Saturation, Valeur) 8

Utilitaires

Les utilitaires que nous n'avons pas pu regrouper dans une thématique suffisamment large sont la.

Module Description Popularité
d3-scale Permet de faire un mapping entre un ensemble de départ et un ensemble d'arrivée 775
d3-ease Permet de déformer le temps pour controler les mouvements d'animation 221
d3-format Utilitaires pour aider au formatage 150
d3-interpolate Permet d'interpoler différents type de données 83
d3-array Fonctions utilitaires relatives aux tableaux 77
d3-timer Permet d'enchaîner les animations dans le temps, nécessaire a plusieurs layouts 48
d3-quadtree Les quadtree permettent d'accélerer des opérations relatives à des positions spatiales 48
d3-collection Fonctions utilitaires pour gérer des collections d'objets 40
d3-random Génère des nombres aléatoires suivant différentes distributions 19

Doublons avec d'autres librairies que nous utilisons

Nous n'utilisons pas les modules suivants pour diverses raisons : nous manipulons et formatons les dates avec moment.js. Au niveau de la récupération des données, nous travaillons avec des API qui présentent des données déja formatées. Nous récupérons ces données avec les librairies du framework (en l'occurrence Vue.js) correspondantes. Cela ne veut pas dire que pour d'autres utilisations ces modules ne sont pas bien. d3-queue est d'ailleurs très populaire.

Module Description Popularité
d3-queue Permet de gérer le parallélisme de plusieurs tâches asynchrones 1302
d3-dsv Permet de parser des fichiers type CSV ou TSV en collections d'objets JSON 112
d3-time Permet de faire des math avec les dates plus facilement 102
d3-time-format Permet de parser et formater des dates 68
d3-request Permet de récupérer des données via un appel ajax 52
d3-fetch Permet de récupérer des données via un appel ajax 51

Manipulation du DOM et gestion des évènements

Ces 2 domaines peuvent aussi être réalisés par un autre framework que vous utilisez. Si la visualisation que vous réalisez est un composant Vue.js ou React.js, il est fort possible que vous n'en ayez jamais besoin.

Module Description Popularité
d3-selection Permet de manipuler le DOM 140
d3-drag Pour faire du drag & drop 61
d3-zoom Permet de gérer le zoom en fonction d'évènements 58
d3-transition Permet de faire des transitions entre des sélections 57
d3-axis Permet de générer des axes en SVG 32
d3-selection-multi Permet de sélectionner plusieurs valeurs 28
d3-dispatch Pour envoyer des évènements, nécessaire a plusieurs layouts 28
d3-brush Spécification interactive de région sélectionnée 23

Remarques

Suivant l'oeil avec lequel on les regarde, il y a plusieurs manière de classer ces modules. Le choix que nous avons fait est orienté et lié aux autres outils que nous utilisons, notamment Vue.js. Si vous avez des remarques sur ce classement, n'hésitez pas pas à nous envoyer un petit mail à cette adresse : contact@koumoul.com. Nous ouvrirons bientôt un espace pour les commentaires également.