D3.js
| Développé par | Michael (Mike) Bostock |
|---|---|
| Dernière version | 2.10.0 () |
| Dépôt | github.com/d3/d3 |
| Écrit en | JavaScript |
| Système d'exploitation | Multiplateforme (d) |
| Environnement | Web |
| Type | Bibliothèque JavaScript |
| Licence | Logiciel libre: BSD |
| Site web | d3js.org |
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 août 2012, la bibliothèque avait atteint la version 2.10.0.[5]
Contexte
| Développé par | Mike Bostock et Jeffrey Heer (en) |
|---|---|
| Dernière version | 3.3.1 |
| Dépôt | github.com/d3/d3 |
| Écrit en | JavaScript |
| Système d'exploitation | Multiplateforme (d) |
| 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 Stanford de l'Université de 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.[6]. 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 (Bostock, Heer et Ogievetsky 2011).
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 noeuds ou d'opérateurs donné, puis il lui fait effectuer des opérations. (Bostock, Ogievetsky et Heer 2011, chap. 3). D3 peut par exemple sélectionner tous les éléments html «ₒpₒ» pour ensuite les styliser avec une couleur donnée, telle que lavandeₒ:
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 The New York Times l'utilise parfois pour créer des graphiques riches.[7]
