D3.js
D3.js (ou D3 pour Data-Driven Documents) est une bibliothèque graphique JavaScript qui permet l'affichage de données numériques sous une forme graphique et dynamique. Il s'agit d'un outil important pour la conformation aux normes W3C qui utilise les technologies courantes SVG, JavaScript et CSS pour la visualisation de données. D3 est le successeur officiel du précédent framework Protovis[1]. Contrairement aux autres bibliothèques, celle-ci permet un plus ample contrôle du résultat visuel final[2]. Son développement se popularisa en 2011[3], à la sortie de la version 2.00 en août 2011[4]. En juin 2021, la bibliothèque avait atteint la version 7.0.
Contexte
| Développé par | Mike Bostock et Jeffrey Heer (en) |
|---|---|
| Dernière version | 3.3.1 (le 17 septembre 2010) |
| Dépôt | github.com/d3/d3 |
| État du projet | Remplacé par D3 |
| Écrit en | JavaScript |
| Système d'exploitation | Multiplateforme |
| Type | Bibliothèque JavaScript Logiciel de visualisation de données (en) |
| Licence | BSD |
| Site web | http://protovis.org/ |
En 2009, l'étudiant en doctorat Mike Bostock, le professeur Jeff Heer et l'étudiant Vadim Ogievetsky, membres du Groupe de Visualisation de l'université Stanford créent Protovis, une bibliothèque Javascript destinée à générer des documents graphiques SVG à partir de données. La bibliothèque fut bien accueillie, à la fois par les praticiens de visualisation de données et par les universitaires[5]. En 2011, le développement de Protovis fut arrêté au profit d'un nouveau projet, D3.js. Aidé de l'expérience acquise par Protovis, Bostock (ainsi que Heer et Ogievetsky) développa D3 pour fournir un framework plus expressif s'appuyant sur les standards web et fournissant de meilleures performances[6].
Principes techniques
Intégrée dans une page web HTML, la bibliothèque JavaScript D3.js utilise des fonctions pré-construites de JavaScript pour sélectionner des éléments, créer des objets SVG, les styliser, ou y ajouter des transitions, des effets dynamiques ou des infobulles. Ces objets peuvent aussi être stylisés à grande échelle à l'aide du célèbre langage CSS. De plus, de grandes bases de données avec des valeurs associées peuvent alimenter les fonctions JavaScript pour générer des documents graphiques conditionnels et/ou riches. Ces documents sont le plus souvent des graphiques. Les bases de données peuvent être sous de nombreux formats, le plus souvent JSON, CSV, GeoJSON, mais d'autres fonctions JavaScript peuvent être créées selon les besoins afin de lire d'autres formats de données.
Dans les détails, le concept de D3 est le suivant : il commence par employer un sélecteur pour saisir un ensemble de nœuds ou d'opérateurs donné, puis il lui fait effectuer des opérations[7].D3 peut par exemple sélectionner tous les éléments HTML p pour ensuite les styliser avec une couleur donnée :
d3.selectAll("p").style("color", "lavender");Transitions
En déclarant une transition, D3 insère de façon fluide les valeurs des attributs et des styles sur une certaine durée.
d3.selectAll("p").transition().style("color", "pink");Utilisation
L'entreprise de visualisation de données Datameer utilise officiellement D3.js comme sa principale technologie[2]. Le New York Times l'utilise parfois pour créer des graphiques riches[8]. Il est également utilisé dans la fabrication de cartes[9].
Références
Annexes
Bibliographie
- (en) Michael Bostock, Vadim Ogievetsky et Jeffrey Heer, D3 : Data-Driven Documents, IEEE Press, coll. « IEEE Transactions on Visualization and Computer Graphics », (lire en ligne)
Articles connexes
- TopoJSON, un format de données géographiques développé par Mike Bostock pour réaliser des cartes en D3.js
