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
[modifier | modifier le code]
| 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
[modifier | modifier le code]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
[modifier | modifier le code]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
[modifier | modifier le code]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
[modifier | modifier le code]- (en) « For Protovis Users », sur D3.js (consulté le )
- (en) Christophe Viau, « What’s behind our Business Infographics Designer? D3.js of course », sur Datameer's blog, (consulté le )
- (en) Glenn J. Myatt et Wayne P. Johnson, Making Sense of Data III : A Practical Guide to Designing Interactive Data Visualizations, Hoboken, New Jersey, John Wiley & Sons, , 384 p. (ISBN 978-0-470-53649-0, lire en ligne), chap. 5.10 (« Further reading »), A–2
- (en) « Release Notes », sur D3.js (consulté le )
- Academic example: (en) Manolis Savva, Nicholas Kong, Arti Chhajta, Feifei Li, Maneesh Agrawala et Jeffrey Heer, « ReVision: Automated Classification, Analysisand Redesign of Chart Images », ACM User Interface Software & Technology (UIST), (lire en ligne)
- Bostock, Ogievetsky et Heer 2011
- Bostock, Ogievetsky et Heer 2011, chap. 3
- (en) Jeremy Ashkenas, Matthew Bloch, Shan Carter et Amanda Cox, « The Facebook Offering: How It Compares », The New York Times, (lire en ligne)
- (en) « A Map to Perfection: Using D3.js to Make Beautiful Web Maps », Toptal, (lire en ligne)
Annexes
[modifier | modifier le code]Bibliographie
[modifier | modifier le code]- (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
[modifier | modifier le code]- TopoJSON, un format de données géographiques développé par Mike Bostock pour réaliser des cartes en D3.js
