Accueil🇫🇷Chercher

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

Protovis

Informations
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
Data visualization software (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

  1. (en) « For Protovis Users », sur D3.js (consulté le )
  2. (en) Christophe Viau, « What’s behind our Business Infographics Designer? D3.js of course », sur Datameer's blog, (consulté le )
  3. (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
  4. (en) « Release Notes », sur D3.js (consulté le )
  5. 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)
  6. Bostock, Ogievetsky et Heer 2011
  7. Bostock, Ogievetsky et Heer 2011, chap. 3
  8. (en) Jeremy Ashkenas, Matthew Bloch, Shan Carter et Amanda Cox, « The Facebook Offering: How It Compares », The New York Times,‎ (lire en ligne)
  9. (en) « A Map to Perfection: Using D3.js to Make Beautiful Web Maps », Toptal,‎ (lire en ligne)

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

Liens externes

Cet article est issu de wikipedia. Text licence: CC BY-SA 4.0, Des conditions supplémentaires peuvent s’appliquer aux fichiers multimédias.