À quoi servent ces bibliothèques graphiques ?
D3.Js et Chart.Js sont deux bibliothèques JavaScript qui vous permettent de faire de la visualisation de données graphique et interactive. Ces bibliothèques JS lient vos données à un objet et vous les affiches dans un graphique ou un tableau afin de les rendre plus facilement compréhensibles et analysables. Des transitions peuvent aussi être ajoutées.
Quelques précisions sur D3.Js
D3.Js, de son nom complet Data-Driven Documents, a été créé fin des années 2010 par Mike Bostock. C’est une bibliothèque JavaScript open source, qui vous permet de créer des tableaux ou des graphiques personnalisables à partir de fichiers de données CSV ou JSON.
Pour ceux qui utilisaient la bibliothèque Protovis, D3.Js n’est autre que son successeur.
La bibliothèque JS est écrite à l’aide de modules ES2015, qui sont supportées sur la plupart des navigateurs utilisés par les utilisateurs.
Au niveau de son installation, pour plus de performance il est préférable de télécharger D3.Js via le github mais il est aussi possible de l’inclure directement dans vos fichiers HTML avec une balise script : <script src="https://d3js.org/d3.v5.min.js"></script> (version minifiée).
Quelques précisions sur Chart.Js
Chart.Js a été crée en 2013 par Nick Downie. C’est une bibliothèque JavaScript open source permettant de dessiner dans une balise <canvas> des graphiques.
Chart.Js vous propose 8 types de graphiques différents afin de visualiser vos données. Les graphiques linéaire, à barre, à bulle, nuage de points, de zone, en étoile, ainsi qu’un diagramme circulaire dans 2 styles différents.
Au niveau de l’installation, vous pouvez télécharger Chart.Js via github mais il ne faut pas oublier de générer les fichiers dist qui ne sont plus fournis avec. Sinon une commande npm, dans un environnement NodeJS, fonctionnera très bien aussi : npm install chart.js --save-dev
Les faiblesses de ces bibliothèques JavaScript
Ces bibliothèques JavaScript ont été de grandes avancées en matière de personnalisation et d’intégration de données visuelles. Elles vous simplifient souvent la mise en forme des graphiques et tableaux dynamiques, cependant quelques limites les accompagnent.
D3.Js, “la meilleure bibliothèque JavaScript” controversée
D3.Js n’intègre pas toutes les fonctionnalités dont vous pourriez avoir besoin dans vos projets, c’est donc à vous de les créer. Pour obtenir des graphiques un peu plus élaborés, vous aurez certainement besoin de coder une surcouche à un graphique déjà existant.
De plus, lorsque l’on ne s’est jamais confronté à cette bibliothèque JavaScript, sa méthode de fonctionnement semble complexe et très peu de documentations sont disponibles pour répondre aux problématiques que l’on rencontre.
Les développeurs préfèrent souvent utiliser des graphiques déjà existant, dénichés dans la galerie de la bibliothèque Js et, très similaires au rendu qu’ils veulent obtenir afin d’y ajouter les éléments manquants, plutôt que de tout programmer eux-même.
Chart.Js, moins de choix
Chart.Js est beaucoup moins complet en termes de propositions de graphiques. Comme cité ci-dessus, la bibliothèque JS ne comporte que 8 types de graphiques différents. Cela peut sembler suffisant, effectivement, mais tout dépend de ce que vous voulez faire avec vos graphiques. Nombre de développeurs se sont déjà retrouvés bloqués par un manque de personnalisation des graphiques.
Chart.Js demande énormément de paramètres à insérer soi-même dans le code JavaScript, cela ne se fait pas à l’aide de fichiers de données. Pour des graphiques simples ce n’est pas très compliqué à configurer mais pour des graphiques plus complexe il faut prévoir du temps et de la patience.
Les points forts de ces bibliothèques JavaScript graphique
Une fois prises en main, les bibliothèque de visualisation graphique apportent incontestablement un gain de temps aux développeurs.
D3.Js, une bibliothèque complète
D3.Js bénéficie d’une grande communauté qui l’entoure et propose une galerie de graphiques et d’animations bien étoffée. Les idées de graphiques sont tellement nombreuses, que n’importe quel projet peut trouver son graphique idéal sans vraiment avoir besoin de le personnaliser davantage.
Beaucoup de fonctionnalités d’animations et de transitions efficaces y sont inclus. C’est une bibliothèque complète qui sait répondre aux besoins sans outils complémentaires.
D3.Js intègre une écriture syntaxique du JavaScript simplifiée. La sélection des éléments, par exemple, est plus simple, plus rapide et demande moins de ligne de code.
See the Pen
Texte récupéré avec D3.Js by Melanie (@mlazarus)
on CodePen.
La bibliothèque graphique se démarque notamment par sa capacité à mettre à jour le DOM en temps réel. En effet, les données sont liés au DOM ce qui leurs permettent en cas de changement d’être pris en compte automatiquement.
Chart.Js, une bibliothèque simple et rapide
La rapidité constitue un des éléments forts de la bibliothèque Chart.Js. Sa légèreté (50,49 Ko pour la version minifiée), ainsi que l’utilisation des canvas, lui procurent une performante en terme de rapidité non négligeable.
Chart.Js produit un rendu en HTML5, la bibliothèque Js est donc lisible sur tout les navigateur récents. Cependant, il est possible, en utilisant le logiciel polyfill, d’être pris en charge sur les navigateurs plus anciens tels que IE8.
Si vous rencontrez une difficulté quelconque, vous trouverez la réponse à votre problème dans la documentation abondante que Chart.Js fournie. Certes, il faudra certainement fouiller un peu dans toutes les ressources disponibles, mais la réponse existe. ?
Mais alors, laquelle choisir ?
“Quelle bibliothèque de visualisation de données graphique devrais-je choisir ?” C’est là toute la question. En réalité tout dépend du projet et du développeur.
D’un côté, on trouve Chart.Js décrit par tous comme beaucoup plus simple à utiliser. Et c’est vrai, pour les graphiques qui ne disposent pas de beaucoup de données et dont un graphique de style “basique” convient, Chart.Js est la bonne solution.
Cependant, si vos données requièrent un graphique plus élaboré et personnalisable, même si, au départ D3.Js est plus complexe, il est préférable d’opter pour cette option. Chart.Js vous limitera rapidement, tandis ce qu’avec D3.Js, votre seule limite est votre imagination. C’est vous dire tout ce qui est possible de réaliser avec cette bibliothèque JavaScript !
Si votre problématique réside dans la performance, ayez à l’esprit que Chart.Js utilise les canvas qui sont maintenant bien plus performant grâce aux évolutions du web que le SVG utilisé par D3.Js.
Ces deux bibliothèques JS peuvent évidemment être associées à la plupart des frameworks JavaScript tels que React, Svelte, Vue.Js, … mais aussi avec le langage de programmation Python.
Vous avez maintenant toutes les clés en main pour faire votre choix !
Plus d’articles sur notre blog Numendo
