A l’instart de Jquery, d3.js est une librarie qui permet de manipuler le DOM. Mais là où d3.js est très efficace est dans la manipulation de SVG.

Manipuler ou créer une div avec d3.js

Ajouter et manipuler un rectangle SVG

Dessiner plusieurs éléments dans un groupe svg

Gérer des données au format JSON et dessiner en fonction de ces données

Dans ce dernier exemple, nous allons construire des nodes qui sont en fait des groupes svg ayant la class « node ». Ensuite, on va dessiner, suivant les données (variable data) un cercle et afficher le nom de ce cercle dans celui -ci.

Le dernier exemple introduit plusieurs nouveaux concepts : selectAll(), data(), et enter().

selectAll()

la methode de selection selectAll permet, comme son nom l’indique de selectionner les éléments définis par le selecteur css passé en argument. selectAll(« p ») va selectionner tous les éléments présents dans le DOM.

data()

La methode data() permet de « binder » (attacher) des données à des éléments sélectionnés par la methode selectAll(). Ces données une fois attachées seront utilisables dans la suite du chainage. Exemple : attr(« fill »,function(d){return d.color});

enter()

Cette fonction va « binder » les données à des éléments et créer les éléments sélectionnés par selectAll(). Si vous n’utilisez pas enter() alors aucun élément ne sera crée. Seul les éléments existants seront utilisés et donc s’il sont inexistant, rien ne s’affichera.

Ressources

• W3 School, documentation sur le SVG
• Le site de d3.js
• Approfondir sur le DOM (Document Object Model)

Pourquoi D3.js au lieu de Protovis

D’après ce que j’ai compris, Mike Bostock a décidé d’arrêter le développement  de Protovis pour commencer celui de d3.js dans le but d’offrir à tous une librarie puissante pour la visualisation basé sur des standards du W3C (HTML, SVG et CSS) au lieu de s’attacher à un framework propriétaire. D3.js est clairement axé Web et visualisation de données, ainsi il est très simple de manipuler des données via le DOM (Document Object Model).

Quelques exemples avec D3.js

Network Force Directed graph

New York Times

Cluster Layout

Cubism.js

Tag Cloud 

Choropleth

Circle Packing

Conclusion

Comme vous pouvez le voir d3.js est la source de beaucoup de type de représentations graphiques différentes mais aussi à la base de quelques libraries / plugins. Ainsi se termine la présentation (rapide je l’avoue) de la librarie d3.js. A suivre un tutoriel pour mettre en place son premier graphique avec la librarie.