Analyse approfondie de D3

D3 in Depth

D3 in Depth couvre les versions 6 et 7 de D3

• Page d’accueil : D3 in Depth est un site qui couvre les dernières versions de D3.js, les versions 6 et 7.
• Présentation : Ce site propose un contenu approfondi sur la visualisation de données avec D3.js.
• Newsletter : La newsletter permet de recevoir des informations sur les réductions du livre ainsi que des actualités et astuces liées à D3.js.

Livre et cours

• Visualising Data with JavaScript : enseigne comment créer des graphiques, des tableaux de bord et des récits de données avec Chart.js, Leaflet, D3 et React.
  • « L’un des meilleurs livres sur D3 que j’ai lus. Le contenu est très clair, facile à suivre et les concepts sont très solides. » - Javier García Fernández
• Visualisation de données sur mesure : permet d’apprendre à créer des visualisations de données personnalisées avec D3.js.
• Apprentissage des bases : permet d’apprendre les fondamentaux de HTML, SVG, CSS et JavaScript pour construire des visualisations de données sur le web.

Table des matières

• Introduction à D3
• Bien démarrer
• Sélections (Selections)
• Jointures de données (Data joins)
• Enter, exit & update
• Fonctions d’échelle (Scale functions)
• Formes (Shapes)
• Axes
• Hiérarchies
• Diagrammes en cordes (Chord Diagrams)
• Disposition de forces (Force layout)
• Cartes (Maps)
• Requêtes de données (Data Requests)
• Transitions
• Sélection, glisser-déposer et brossage (Picking, Dragging and Brushing)
• Zoom & pan

Newsletter

• Abonnement : permet de recevoir des informations sur les réductions du livre ainsi que des actualités et astuces liées à D3.js.

Droit d’auteur

• © Peter Cook 2023

L’avis de GN⁺

• Importance de D3.js : D3.js est une bibliothèque de visualisation de données très utile pour représenter visuellement des données complexes. C’est un outil particulièrement puissant lorsqu’il s’agit de grands ensembles de données.
• Courbe d’apprentissage : D3.js est puissant, mais sa courbe d’apprentissage peut être raide. Ce site fournit des ressources utiles aussi bien aux débutants qu’aux utilisateurs avancés.
• Intégration avec divers outils : on peut y apprendre comment l’intégrer à d’autres outils comme Chart.js, Leaflet et React, ce qui le rend applicable à de nombreux projets.
• Orienté pratique : le site est structuré autour de la pratique, ce qui permet d’acquérir des connaissances directement applicables à des projets réels.
• Points à considérer dans le choix technologique : lors du choix de D3.js, il faut prendre en compte la complexité du projet, le niveau technique de l’équipe et la maintenabilité. D3.js est puissant, mais peut être excessif pour des visualisations simples.

[GN⁺]

Avis Hacker News

Résumé des commentaires de Hacker News

• Présentation d'Observable Plot et d'Observable Framework

  • Si vous vous intéressez à la visualisation de données avec D3, Observable Plot mérite le détour pour son niveau d'abstraction plus élevé et sa plus grande simplicité d'usage.
  • Observable Framework est un générateur de sites statiques qui prend en charge Plot, D3 et diverses bibliothèques pour construire des tableaux de bord de visualisation.
  • Observable Plot
  • Observable Framework

• La difficulté d'utiliser D3

  • Même avec beaucoup d'expérience sur D3, y revenir après quelques années donne l'impression que la documentation est confuse et qu'il faut tout reprendre depuis le début.
  • Comprendre la documentation de D3 est plus difficile que résoudre un problème de maths.

• L'intérêt d'apprendre D3

  • Même sans l'utiliser à titre professionnel, D3 vaut la peine d'être appris.
  • Cela permet de comprendre la projection des données, l'écart avec les données réelles et la manière de les mettre à l'échelle.
  • C'est utile pour faire de la visualisation de données dans d'autres environnements, même en dehors du web.

• L'évolution de D3.js et les alternatives modernes

  • Beaucoup de projets ont été réalisés avec D3.js, mais l'outil semble désormais daté.
  • Certains sont passés à des frameworks modernes comme Vue 3 et TypeScript, tout en restant reconnaissants pour les bonnes pratiques apportées par D3.js.

• Des alternatives comme VisX

  • Après avoir appris D3, il peut être préférable de passer à un outil plus structuré comme VisX.
  • D3 et jQuery ont tendance à produire du code spaghetti.

• Grammar of Graphics et ggplot2

  • D3 s'inspire de la Grammar of Graphics de Wilkinson.
  • Le langage R avec ggplot2 s'appuie sur la même inspiration, avec une interface plus concise et plus fonctionnelle.

• Les problèmes des graphes à forces dirigées

  • Les exemples de graphes à forces dirigées de D3 sont appréciés, mais dès qu'il y a beaucoup de nœuds et d'arêtes, la mise en page devient médiocre.
  • Une visualisation en 3D peut alors s'avérer nécessaire.

• Des ressources D3 utiles

  • Une ressource en particulier a été la seule à vraiment aider à comprendre D3.
  • Son auteur est réactif et utile.

• Présentation de Vega

  • Vega, construit au-dessus de D3, bénéficie de bons retours.
  • Utilisé comme dépendance dans OpenSearch Dashboards, il permet aux utilisateurs de créer des tableaux de bord personnalisés pour les logs et les données d'observabilité.
  • Documentation Vega
  • Utiliser Vega dans OpenSearch Dashboards

• La complexité de la syntaxe de D3

  • Les visualisations réalisées avec D3 sont bonnes, mais sa syntaxe est trop complexe et datée.
  • Le passage à une approche plus déclarative est une bonne chose.