Inovia Blog

L’actualité des technologies innovantes

Premiers pas avec D3

Par Kadda SAHNINE

Publié le | 22 octobre 2012 |

Data VisualizationLa production exponentielle de données par les systèmes informatiques est un fait bien établi. Cette réalité nourrit le phénomène Big data comme nous l’évoquions dans un précédent billet.
L’analyse statistique ou prédictive doit faire appel à l’art de la représentation visuelle des données afin de leur donner du sens et de mieux les comprendre.
La Visualisation des données ou Data visualization est appelée à prendre une place grandissante et ce, en proportion du volume de données produites par les systèmes d’information.
A ce titre, nous sommes absolument convaincus que la librairie D3, objet de cet article, y prendra toute sa place et ce, pas uniquement en raison de ses qualités esthétiques.

Pour les besoins de cet article, nous utiliserons des données issues de La Banque Mondiale, laquelle a ouvert une partie de ses données via une API REST.

Introduction

Créée par Mike Bostock, D3 est souvent présentée comme une librairie graphique alors que son acronyme - D3 pour Data Driven Documents - montre qu’elle est d’abord, à l’instar de jQuery, une librairie JavaScript facilitant la manipulation d’un arbre DOM.
D3 implémente des routines permettant de charger des données externes dont les formats JSON, XML, CSV ou texte sont nativement supportés.
Le développeur écrit la logique de transformation des données en éléments HTML ou SVG afin d’en avoir une représentation. Ainsi, la représentation peut tout aussi bien prendre la forme d’un tableau (éléments HTML) que d’une courbe (éléments SVG).
D3 permet donc de produire des Documents Orientés Données.

Mise en oeuvre

A titre d’exemple, nous proposons de développer une représentation graphique du PIB de la France exprimé en milliards de dollars US entre 1960 et 2009, dont voici le résultat final (voir la démo consultable en ligne) :
PIB France

Le jeu de données issu de la Banque Mondiale est accessible au format JSON :
PIB France JSON
http://api.worldbank.org/countries/fr/indicators/NY.GDP.MKTP.CD?format=json

Structure de base

Le code d’amorce d’un document HTML utilisant D3 se met en oeuvre comme suit :

La fonction d3.json() opère une requête HTTP GET vers le service de La Banque Mondiale pour récupérer le jeu de données brutes au format JSON. Le second paramètre de la fonction est la routine callback exécutée à l’issue de la requête. Elle a vocation à implémenter le traitement de visualisation graphique des données.

La structure type de la fonction de visualisation est la suivante :

  • sélection du corps du document (body)
  • ajout d’un élément conteneur du graphique soit svg ou div selon la modélisation choisie (svg dans notre cas)
  • pour chaque élément du jeu de données, ajout d’un élément graphique dont les propriétés sont définies par les données (rect dans notre cas pour chaque barre de l’histogramme)

Ce pattern s’exprime également par le pseudo code suivant :

Axe et libellé

Dans D3, les scales sont des fonctions JavaScript permettant de faire correspondre une valeur d’un jeu de données à une valeur de sortie à l’échelle.
Dans notre cas d’utilisation, la fonction scale pour l’axe des ordonnées fera correspondre les valeurs de PIB de 0 à 3000 (milliards de dollars) avec une valeur d’échelle comprise entre 300 et 0. Gardez en mémoire qu’avec SVG, le système de coordonnées positionne le point (0,0) en haut à gauche.

La fonction d3.svg.axis() permet de générer la représentation SVG de l’axe. On verra ci-après comment intégrer ce fragment SVG au conteneur afin de le rendre visible :

Pour rendre l’axe vertical visible, il suffit d’ajouter un groupe SVG (élement g) au conteneur et d’intégrer la représentation SVG de l’axe par appel de la méthode call.
On en profite pour intégrer le libellé de l’axe (élément text) auquel on applique une rotation de 90 degrés dans le sens inverse des aiguilles d’une montre :

Démo

La démo est consultable en ligne si votre navigateur supporte SVG, ainsi que son code source.

Il est à noter que nous aurions pu utiliser avantageusement la librairie NVD3.js, construite au dessus de D3 et spécialisée dans la génération de graphiques.

Nous continuerons prochainement notre exploration de la bibliothèque à travers des fonctions avancées comme les animations, les transitions et les interactions.

Abonnez vous !
  • RSS
  • Yahoo
  • Netvibes

Suivez l'auteur sur Twitter !
  • Suivre sur Twitter

A propos de l'auteur

Kadda SAHNINE
Architecte technique Java EE
#JavaEE #Linux #vim addict #OpenSoftware #OpenHardware
Voir le profil de Kadda Sahnine sur LinkedIn

Flux RSS

Rechercher

Administration