Un bon soir, je me cherchais une idée de billet et j’avais le goût d’apprendre quelque chose de nouveau. Mon choix s’est arrêté sur la librairie D3.js.
À titre d’introduction, D3.js est une librairie JavaScript permettant notamment la visualisation de données en permettant la création de graphiques ou de documents dynamiques.
En d’autres termes, D3 est la colle qui permet d’unir une page web et votre JavaScript pour arriver à produire des visualisations. C’est un modèle relativement semblable à jQuery.
Dans mon cas, le scénario est très simple. Produire un diagramme en bâtons afin de simuler une comparaison de prix entre trois produits.
Mine de rien, dans la vraie vie, si l’on vous demandait de produire ce genre de livrable, il y aurait quatre réponses possibles (en ordre de probabilité de réalisation):
- non.
- pourquoi ne pas demander à un infographe de produire une image statique?
- faire une recherche Google pour les termes: jQuery charts
- il n’y a pas grand-chose que le code ne peut pas faire!
Je préfère toujours la dernière option pour ce genre de situations. L’idée pour jQuery Charts n’est pas mauvaise, car il y a quelques millions de liens en guise de réponse. Apparemment que vous ne seriez pas la seule personne à avoir fait cette recherche.
Pour ma part, je me dis tant qu’à tripoter une librairie jQuery peu utilisée, aussi bien utiliser une librairie qui a fait ses preuves.
Un premier graphique avec D3.js
Le code source de l’expérimentation est accessible à l’adresse suivante : https://github.com/pparadis/FrenchCoding.d3js. Sentez-vous libre de le cloner.
Dans mon cas, il s’agit de mettre en place un document SVG qui présente un diagramme à barres ayant pour but de présenter la différence de coûts entre trois produits. De plus, afin de simuler un cas réel, les données proviennent d’un fichier TSV. D3 a tout ce qu’il faut pour faire l’analyse de ce genre de source de données.
L’application est divisée en trois composants bien distincts et bien connus d’une page web:
La majorité de l’action se produit dans le document JavaScript. Son exécution se divise en deux sections: la mise en page du graphique et l’analyse des données du graphique.
Conclusion
Ce qui m’a nécessité plus de temps, c’est de comprendre comment un document SVG fonctionne. À titre d’exemple, pour être en mesure de mettre en place chacune des barres, il m’a fallu intégrer le concept de regroupement d’éléments (<g>).
Une fois que c’est acquis, il suffit d’apprendre l’API de D3. Elle est relativement bien documentée et j’ai trouvé que les exemples sur le web sont assez explicites.
French Coding 