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 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.