JavaScript + SVG + DOM + d3.js = Visualisation de données vectorielles

Cet article n'a pour but que de présenter une librairie JavaScript, d3.js qui permet de créer des visualisations de données dynamiques et interactives, incluses dans l'arbre DOM d'une page Web. Ce post ne contiendra pas d'exemples de codes sources, étant donnée la quantité d'exemples disponibles sur le site du projet d3. Il est tout de même interéssant de préciser qu'il est tout à fait possible de créer ses propres templates de visualisations pour d3, directement en JavaScript, tout en étant totalement compatible avec le reste de la bibliothèque.

d3.js est une librairie en JavaScript permettant de créer des visiualisations de données interactives et dynamiques directement en SVG à l'interieur du DOM (le format SVG n'étant qu'un autre type de DOM, il y a un DOM dans un DOM i.e: DOM-ception - Ok je sors...). Avantages de ce format pour la visualisation:

• Les éléments SVG sont des éléments de DOM, de fait il peut y être attaché n'importe quel EventListener en JavaScript bien que ce ne soit pas recommandé.
• Le SVG (pour Scalable Vector Graphics) est comme son nom l'indique une "image" à rendu vectoriel, donc aucuns risques de pixelisations sur une page.
• Compatibilité complète avec le web (et y compris avec Internet Explorer...)

Il est possible de créer toute sorte de visualisations interactives allant du simple Bar Chart au plus complexe des graphes de type Force Layout.

Bien qu'un peu hardue à prendre en main par le néophyte en développement, d3.js est relative facile à prendre en main, et évidente à intégrer dans une page quelconque. Une de ses plus grandes forces réside dans le simple fait que l'on puisse, comme pour n'importe quel élément du DOM, créer le style des éléments du SVG directement en CSS - Ce qui, il faut le mentionner rend la création de la visualisation bien plus évidente que si il fallait calculer toutes les propriétés de tous les éléments dynamiquement en JavaScript.

Pour plus de renseignements et d'exemples pour créer des visualisations de données "innovantes" avec d3, n'hésitez pas à vous rendre sur d3js.org.

Edit: Bon allé, un petit exemple maison avec le flux RSS de weareopensource, les noeuds sont les posts du blog et les arètes sont crées à partir des tags des différents articles/tutos/snippets (Node etc.). Les noeuds peuvent être déplacés et fixés dans au drag, pour libérer les noeuds fixes, il suffit de clicker dessus!

Info: Cette visualisation est évolutive puisqu'elle est calculée dynamiquement au chargement de la page.