D3 en profondeur

• D3 in Depth est une ressource d’apprentissage consacrée à la création de visualisations de données personnalisées avec D3.js, basée sur D3 6 et 7
• Elle met l’accent sur la création de visualisations personnalisées plutôt que sur la simple utilisation de graphiques, tout en abordant les composants de la visualisation web
• Les bases de HTML, SVG, CSS et JavaScript y sont reliées au travail avec D3, ce qui aide à comprendre la représentation de données sur le web
• Elle peut aussi s’inscrire dans un parcours d’apprentissage de la visualisation en JavaScript, avec des ressources sur les dashboards et les récits de données utilisant React, Chart.js et Leaflet
• Pour les lecteurs qui souhaitent approfondir D3, elle peut servir de ressource d’initiation et d’approfondissement combinant compréhension des concepts et pratique

---

Ce que couvre D3 in Depth

• D3 in Depth cible les versions 6 et 7 de D3
• Elle permet d’apprendre à créer des visualisations de données personnalisées avec D3.js
• Elle couvre aussi les éléments de base nécessaires à la création de visualisations web : HTML, SVG, CSS et JavaScript

Autres ressources de visualisation JavaScript à consulter

• Data Dashboards with JavaScript traite de la création de dashboards de données avec React, Chart.js et Leaflet
• Visualising Data with JavaScript explique comment créer des graphiques et des récits de données avec Chart.js, Leaflet, D3 et React
• Selon l’avis d’un lecteur, cette ressource compte parmi les bons livres sur D3, avec un contenu clair, facile à suivre et des concepts solides

[GN⁺]

Avis Hacker News

• L’idée d’utiliser D3 pour la visualisation de données est bonne, mais si l’on veut un outil un peu plus haut niveau, Observable Plot[1], créé par l’équipe D3, vaut le coup d’œil
  C’est une bibliothèque qui ajoute à D3 de nombreuses conventions et fonctionnalités pratiques pour créer des graphiques, diagrammes et plots
  Il existe aussi Observable Framework[2], qui va plus loin : un générateur de sites statiques pour tableaux de bord de visualisation, prenant en charge Plot, D3 et plusieurs autres bibliothèques
  1: https://observablehq.com/plot/
  2: https://observablehq.com/framework/
  • Ces temps-ci, c’est plutôt l’inverse qui m’attire. La plupart du temps, on sait déjà exactement à quoi le résultat doit ressembler, alors que les frameworks fournissent par nature beaucoup de réglages prédéfinis, et dès qu’on veut s’en écarter un peu, cela devient pénible
    Pour de nombreux types de plots, il est souvent plus simple en pratique de manipuler directement les données SVG, et ce n’est pas si difficile
    J’aimerais qu’il existe des bibliothèques ou frameworks qui facilitent la manipulation de sorties SVG ou canvas. Les petites modifications devraient être très faciles, mais plus un framework est haut niveau, plus il devient difficile de sortir du chemin prévu
  • Observable Plot est excellent. Il est très flexible et intuitif à utiliser, au point que je le préfère désormais à Plotly.js, que j’utilisais auparavant
    La documentation est plutôt correcte, mais il manque une section de référence API vraiment exploitable, ce qui ne facilite pas la découverte des fonctionnalités
  • Je me demande s’il existe une interface de glisser-déposer à la Matlab pour la visualisation web
    J’essaie d’éviter autant que possible de créer des graphiques avec le canvas HTML5, donc j’aimerais qu’il existe une approche repensée pour cela
  • Plot et Framework sont liés à l’écosystème Observable, avec sa propre courbe d’apprentissage. Apprendre D3 reste le meilleur choix en matière de flexibilité et de contrôle
  • Je me demande si ce site web paraît aussi saccadé aux autres. Sur les pages web riches en contenu, j’ai souvent ressenti des à-coups
    Modification : en activant l’accélération matérielle, c’est devenu plus fluide, mais même sur un Ryzen 9, cela reste plus saccadé que prévu
• J’aime D3 et j’ai beaucoup construit avec, mais chaque fois que j’y reviens après quelques années sans l’utiliser, je ne me souviens presque de rien, la documentation me désoriente encore plus, et j’ai l’impression de repartir de zéro
  Si l’on me demandait de résoudre une équation aux dérivées partielles que je n’ai pas vue depuis 10 ans, je pense que les réflexes reviendraient plus vite
  Je trouve aussi la documentation de référence de D3 vraiment épouvantable
  • J’ai beaucoup utilisé D3 de la version 2 à la 7, et les refactorings au fil du temps ont rendu les exemples en ligne, déjà difficiles à comprendre, encore plus difficiles à mettre à jour
    Cela dit, cela semble plus stable aujourd’hui. J’ai commencé à écrire de manière plus impérative avec Svelte+D3 plutôt qu’avec D3 seul, et j’ai fini par m’y retrouver
    C’était plus facile de comprendre les éléments générés que de les inspecter après coup dans les outils de développement
    Ce site m’a aidé pour utiliser D3 avec Svelte : https://svelte.recipes/
  • J’ai l’impression que ce problème est beaucoup moins marqué qu’avec d’autres bibliothèques de tracé
    80 % de mon travail relève plutôt des applications, 10 % des systèmes, 10 % de l’analyse de données, et il m’arrive souvent de créer un notebook Jupyter pendant deux semaines puis de ne plus y toucher pendant deux mois
    La plupart des bibliothèques de tracé ont beaucoup de règles arbitraires à mémoriser et, en général, plusieurs petits langages dédiés à un domaine. Un simple littéral chaîne y est interprété de manière bien plus complexe que par atoi
    En plus, sur plusieurs aspects comme la détermination de la plage des axes ou le traitement d’un très grand nombre de points, il y a des choses qui, de mon point de vue, ne vont pas
    D3 force à faire beaucoup de choses soi-même, mais les interfaces prévues pour cela sont conceptuellement intuitives. Je préfère faire les choses correctement avec D3.js plutôt que d’utiliser du code généraliste obèse et bogué écrit par d’autres, avec une API qui donne l’impression de construire un bateau dans une bouteille
  • J’ai beaucoup utilisé D3, au point d’avoir créé des intégrations pour AngularJS et Angular. C’est puissant, mais cela m’a toujours semblé très peu intuitif
    Il est facile de mal l’utiliser, difficile à déboguer et difficile à comprendre
    Cela ne veut pas dire que le problème se résout facilement. Si je devais produire des graphiques pilotés par les données très spécifiques, je choisirais probablement encore D3
  • Les interfaces de calcul humaines pour le calcul différentiel et intégral ont été soigneusement affinées pendant des générations. Il suffit de lire un peu les textes originaux de Newton pour voir immédiatement que cela n’a pas toujours été ainsi
    Comparer une API à ce niveau d’exigence ne me paraît pas vraiment équitable
  • J’ai eu la même expérience. Aujourd’hui, en tant que tech lead, j’insiste fortement pour éviter les bibliothèques qui exigent un haut niveau de connaissance du domaine
    Il faut autant que possible éviter le code que même son auteur a du mal à comprendre, et D3 est l’exemple type de ce genre de bibliothèque
• Même si l’on ne finit pas par utiliser D3 en production, je pense qu’il vaut la peine de l’apprendre. Le cœur de cette bibliothèque tient au fait que les dimensions de la cible de projection des données et celles des données elles-mêmes sont toujours différentes
  Par exemple, si l’on affiche des données dans une plage de 0 à 100 points sur un écran 1080p de 1920x1080, il faut bien décider à un moment donné comment mettre à l’échelle les données pour les projeter sur l’écran
  On peut faire les calculs soi-même, ou les confier à une bibliothèque comme D3
  Même si l’on ne dessine pas de données sur le web, on finira un jour ou l’autre par représenter des données quelque part, et il sera utile de savoir trouver, dans cet écosystème, l’outil qui joue le même rôle
  • L’un des premiers programmes PHP que j’ai écrits moi-même était un générateur de PNG de graphique de distribution binomiale
    Je me souviens avoir dû mettre à l’échelle les rectangles à dessiner dans le graphique en fonction de la taille du PNG que je créais
    Bien sûr, c’était très trivial et cela n’avait rien à voir avec les choses incroyables que D3 peut faire, mais c’était une première expérience assez géniale de création d’images par ordinateur par moi-même
  • C’est une bonne explication du concept central
    D3 ne m’a personnellement jamais paru intuitif. Le problème vient peut-être du fait qu’il essaie de faire trop de choses à trop de niveaux d’abstraction
    Si l’on parle simplement de projeter des données, c’est facile à comprendre, mais il semble que cette projection soit aussi étroitement liée aux axes et à d’autres éléments
• Le vrai problème de D3, c’est qu’en tant que bibliothèque, il ne fait pas réellement de visualisation. Il ne fournit que des fonctions et des exemples permettant d’assembler soi-même une visualisation, et l’exigence fondamentale est une compréhension de niveau expert de JavaScript, en particulier des closures et de la programmation fonctionnelle

Je vois le calcul de différence entre select et select, que mbostock présente comme l’abstraction centrale de D3, plutôt comme un dispositif pratique pour écrire un paint() réentrant
Les instructions de paint sont simplement exprimées comme des instructions de builder, elles-mêmes encapsulées dans la portée d’un select, avec en plus la possibilité de les fractionner pour produire plusieurs effets
En particulier, dans les exemples d’animation, ce que D3 fait est étonnamment limité, et il faut écrire soi-même la boucle externe et suivre l’état au fil du temps
D3 ne fournit pas non plus d’abstraction pour encapsuler une visualisation, que ce soit sous forme de fonction ou autrement ; cette partie est laissée en exercice au lecteur
Pour un nouvel utilisateur de D3, tout cela est une grande surprise, voire un choc. C’est un peu comme adopter une nouvelle base de données et découvrir qu’elle ne fournit que les E/S fichiers, les index B-tree et une bibliothèque d’optimisation de requêtes, et qu’il faut tout relier soi-même

• visx mérite qu’on y jette un œil. En fait, cela devrait probablement s’appeler D4, pour Declarative Data Driven Documents
  C’est comme remplacer d3-select, le module de manipulation du DOM de D3, par React. Le fait que ce soit possible et que cela fonctionne bien montre à quel point la conception de D3 est solide
• D3 n’est pas une boîte à outils de graphiques comme matplotlib ou ggplot, mais une bibliothèque bas niveau pour construire des visualisations de données à partir de zéro
  Selon votre objectif, ce peut être l’outil qu’il vous faut, ou non
• J’aimais D3.js et je l’ai utilisé comme technologie centrale dans des dizaines de projets de visualisation de données, commerciaux comme personnels. Mais sa syntaxe de rendu paraît désormais datée, au point de rappeler l’époque de jQuery
  J’utilise encore plusieurs de ses fonctions auxiliaires, comme l’easing ou la mise à l’échelle, mais je construis les composants réels avec des frameworks modernes. Dans mon cas, Vue 3 et TypeScript
  Je reste néanmoins reconnaissant à D3.js pour les belles années qu’il m’a offertes et pour m’avoir appris de nombreuses bonnes pratiques en visualisation de données
  Les valeurs par défaut et les démos de Mike Bostock étaient une source d’inspiration et de bons exemples de référence, et elles s’accordaient bien avec le minimalisme de Tufte
  • J’aimerais voir des exemples utilisant des fonctions auxiliaires de D3 avec Vue 3 et TypeScript
• Après avoir appris D3, si l’objectif est de créer quelque chose qui ressemble à des graphiques, je pense qu’il vaut mieux passer à VisX, ou à un outil équivalent qui ne soit pas React, et ne pas regarder en arrière
  D3 et jQuery se ressemblent dans une certaine mesure, et tous deux ont facilement tendance à produire du code spaghetti. Des outils comme VisX ajoutent beaucoup de structure par-dessus le D3 qu’ils utilisent, ce qui aide à rester sain
  • J’ai utilisé D3 par intermittence pendant assez longtemps, et je commence tout juste avec React et visx ; cela semble prometteur, car cela comble bien le fossé entre les deux
    Je me demande toutefois si, pour créer quelque chose de plus personnalisé qu’avec du D3 pur, on finit par le ressentir comme contraignant, au point de devoir se battre contre l’outil
• D3 s’inspire de la grammaire des graphiques de Wilkinson
  Un autre outil inspiré par GG est ggplot2, au nom bien choisi, pour le langage R
  Il offre une interface beaucoup plus concise et proche du fonctionnel, et s’intègre aussi bien avec Rush, un outil assez rare qui permet de créer rapidement des graphiques en passant un CSV par pipe, autrement dit des one-liners R pour le shell
• Je cherche toujours une solution de diagrammes et de graphiques qui ne soit pas entièrement basée sur le web. Elle devrait pouvoir être pilotée en CLI ou comme bibliothèque, et produire du SVG ou du PNG
  Ces outils dépendent généralement des fonctionnalités du navigateur, ou utilisent des solutions de rendu côté serveur bancales reposant sur un navigateur headless pour la génération serveur
  J’aimerais en particulier pouvoir générer des diagrammes de Venn par programmation. Étrangement, il n’y a presque rien dans ce domaine
  Quelques bibliothèques de graphiques JavaScript les prennent en charge, mais dans l’ensemble le support semble très limité
  gnuplot a l’air intéressant, mais ne prend pas en charge les diagrammes de Venn
• C’est la seule ressource qui m’a permis de comprendre D3. L’auteur est aussi réactif et très serviable
• J’ai entendu beaucoup de bien de Vega[1], un outil construit au-dessus de D3
  C’est aussi une dépendance d’OpenSearch Dashboards, qui permet aux utilisateurs de créer des tableaux de bord personnalisés au-dessus de leurs logs et données d’observabilité[2]
  La bibliothèque Vega semble pouvoir atténuer dans une certaine mesure les problèmes de courbe d’apprentissage de D3 mentionnés par d’autres
  [1] https://vega.github.io/vega/docs/
  [2] https://opensearch.org/docs/latest/dashboards/visualize/vega...