Classification des modules d3.js

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 nœuds 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.