Article original : Charting the waters (pt. 2): a comparison of JavaScript charting libraries
Par Mandi Cai
Une plongée profonde dans D3.js, Dygraphs, Chart.js et Google Charts
Le code des graphiques que j'ai créés dans l'image d'en-tête est disponible sur GitHub.
Quand j'ai commencé à créer des graphiques et à visualiser des données, les seules choses que je savais étaient « Considérez Canvas pour les grands ensembles de données » et « D3 est magique ». Je n'avais aucune idée qu'il existait tout un écosystème de bibliothèques de graphiques. Ces bibliothèques sont gratuites, disponibles et complètes avec des exemples et de la documentation.
Plus important encore, chaque bibliothèque a ses propres avantages et inconvénients en ce qui concerne la variété des graphiques, la courbe d'apprentissage, le niveau de personnalisation et l'interactivité prête à l'emploi. Alors, comment décider ?
Je vais comparer quelques bibliothèques de graphiques JavaScript populaires dans cet article, spécifiquement D3.js, Dygraphs, Chart.js et Google Charts. Attendez-vous à apprendre comment créer un graphique JavaScript, une comparaison de haut niveau entre les bibliothèques sur les facteurs susmentionnés (variété des graphiques, personnalisation, etc.), et le cas d'utilisation que je perçois comme le mieux adapté à chaque bibliothèque.
Mais d'abord, une brève introduction sur la raison pour laquelle la visualisation des données devient de plus en plus importante. Vous pouvez passer directement à la comparaison côte à côte (Ctrl+F « Comparons ! »).
Pourquoi tracer et visualiser des données ?
J'ai toujours considéré les visualisations de données comme un meilleur moyen d'apprendre et d'impliquer un public. Tout le monde n'est pas naturellement doué pour absorber des informations par le texte. Mes yeux se troublent en essayant d'extraire des chiffres d'un bloc de mots. Le texte suppose également que vous êtes familier avec la langue dans laquelle il est écrit. J'ai eu du mal avec les lectures de manuels à l'université. Il est plausible que les non-anglophones aient également eu du mal.
En revanche, chaque fois que je tombais sur un diagramme magnifique et clarificateur au milieu de piles d'informations, je saisissais immédiatement les concepts et je m'en souvenais mieux aussi.
Nos esprits ne sont pas câblés pour comprendre rapidement et en profondeur de gros blocs de texte ou des piles de lignes Excel. Mais ce en quoi ils excellent, c'est la reconnaissance de la similitude, de la symétrie, des connexions entre les objets et de la continuité, qui sont les fondements de la visualisation de données. Pensez aux principes de la Gestalt.
_Principes de la Gestalt (Source : [FusionCharts](https://www.fusioncharts.com/blog/how-to-use-the-gestalt-principles-for-visual-storytelling-podv/" rel="noopener" target="blank" title="))
Voici un extrait de certaines données du Bureau of Labor Statistics sur les taux de chômage dans les comtés des États-Unis (représentés par un code FIPS) en 2016.
_Source : [Bureau of Labor Statistics](https://www.bls.gov/lau/#tables" rel="noopener" target="blank" title=")
Pour repérer des tendances ou détecter des anomalies, une personne moyenne passerait un temps considérable à fixer ces données. Elle pourrait scanner chaque ligne et réécrire des chiffres sur une autre feuille de papier. Pas idéal.
Mais si nous visualisons les données sous forme de carte géographique, comme Mike Bostock l'a fait dans son carnet Observable :
Vous pouvez immédiatement voir les points chauds de chômage élevé. Au lieu d'heures, vous avez maintenant détecté des modèles intéressants en quelques secondes. Cette différence de temps de compréhension peut faire la différence entre abandonner un ensemble de données apparemment « incompréhensible » ou, au contraire, poursuivre votre enquête. La création de visualisations précises et accessibles permet également aux spectateurs de repérer des incohérences ou des lacunes dans l'ensemble de données, ce qui rend les données plus responsables.
L'anatomie d'un graphique
Avant de passer à la comparaison des bibliothèques, je pense que l'« anatomie » de base d'un graphique JavaScript mérite un aperçu. En travaillant avec ces bibliothèques, j'ai remarqué que toutes, sauf D3*, adoptaient le même modèle pour générer des graphiques.
- Importez la bibliothèque de graphiques dans le HTML.
- Créez une
<div>avec un identifiant ID, tel que « my-first-chart ». - Récupérez et chargez les données dans le JS. Vous pouvez également définir les données directement dans le JS. Assurez-vous d'avoir lié ce fichier JS dans le HTML.
- Passez les données, le conteneur
<div>et un objet d'options à une fonction de génération de graphique. - Certaines bibliothèques, comme Google Charts, nécessitent d'appeler
draw()pour dessiner le graphique généré. - Servez le code sur un serveur Python avec
http-server -c-1 -p 8000et voyez votre premier graphique surlocalhost:8000.
Exemples
- Exemple basique Dygraphs
- Exemple basique D3.js
- Exemple basique Chart.js
- Exemple basique Google Charts
*D3 a été principalement utilisé pour les graphiques, mais c'est plus une collection de boîtes à outils qu'une bibliothèque de graphiques standard. Voir cet article pour une meilleure explication.
Comparons !
Lors du choix d'une bibliothèque, j'aime commencer par ces questions d'évaluation :
- Quelle est la courbe d'apprentissage ? (qualité de la documentation, complexité du code)
- Dans quelle mesure puis-je personnaliser mes graphiques ?
- La bibliothèque est-elle activement soutenue ?
- Quels types de données cette bibliothèque accepte-t-elle ?
- Quels modes d'interactivité sont proposés ?
- La bibliothèque propose-t-elle des graphiques réactifs (responsive) ?
Courbe d'apprentissage
Dygraphs, Chart.js et Google Charts ont des courbes d'apprentissage relativement faibles. Ils sont parfaits si vous devez créer des graphiques en quelques heures.
D3 a la courbe d'apprentissage la plus élevée, et la raison en est le contrôle de bas niveau et précis qu'il offre. C'est plutôt une bibliothèque bien écrite de fonctions d'aide avancées. D3 peut théoriquement être utilisé en conjonction avec d'autres bibliothèques de graphiques.
Pour explorer un peu plus loin, j'ai créé le même graphique avec les 4 bibliothèques en utilisant les données météo de Boston de meteoblue. Le code est sur GitHub.
Rangée du haut : D3, Dygraphs, Rangée du bas : Chart.js, Google Charts
… et j'ai enregistré les lignes de code nécessaires pour créer chaque graphique :
Les lignes de code confirment la comparaison initiale des courbes d'apprentissage. D3 nécessite nettement plus de lignes pour mettre en place un graphique de base, mais offre plus de possibilités de personnalisation.
Personnalisation
D3 brille dans le domaine de la personnalisation. La granularité et la modularité de D3 sont précisément la raison pour laquelle les designers et les développeurs le privilégient comme support pour des visualisations époustouflantes et uniques. Chart.js et Google Charts offrent de nombreuses options qui peuvent être passées à une fonction génératrice, telles que la taille de la police de la légende et l'épaisseur d'une ligne.
Développement actif
Je définis le développement d'une bibliothèque comme la fréquence des versions et la réactivité des mainteneurs de la bibliothèque aux problèmes signalés et aux suggestions d'amélioration. Une communauté d'utilisateurs large et solidaire est également un plus. L'utilisation encourage le changement sain et la responsabilité à mesure que l'écosystème JavaScript évolue.
En regardant les dépôts GitHub respectifs, j'ai découvert que les versions et les problèmes résolus pour Dygraphs et Google Charts étaient plus sporadiques que pour D3 et Chart.js. D3 ne s'arrêtera pas de sitôt. Son créateur et ses contributeurs ont récemment publié une version majeure (v5.0) en 2018. Ils contribuent toujours activement à la communauté de la visualisation. La dernière version de Chart.js a également eu lieu assez récemment en 2018. La version a abordé des problèmes et des améliorations. Ils sont documentés en détail dans les notes de version.
Types de données
Cela parle de soi-même. Fait amusant : j'ai utilisé la bibliothèque fetch de D3 pour récupérer les données. J'ai utilisé d'autres bibliothèques pour les tracer. D3 dispose de fonctions fetch pour presque tous les formats de données courants utilisés dans la visualisation de données.
Interactivité
Dygraphs, Chart.js et Google Charts ont tous des fonctionnalités d'interactivité prêtes à l'emploi, comme les info-bulles, le zoom et les événements. Il est difficile d'introduire des interactions hautement personnalisées car chaque bibliothèque est très encapsulée. Avec D3, vous acceptez que des interactions complexes et uniques soient possibles. Le compromis est que les interactions simples, comme une info-bulle, doivent également être construites de toutes pièces.
Réactivité (Responsiveness)
Chart.js et D3 proposent des graphiques réactifs dès la sortie de la boîte (pour D3, spécifiez une viewBox au lieu de width et height pour le conteneur svg). Dygraphs et Google Charts nécessitent un travail supplémentaire pour créer des graphiques réactifs, comme l'ajout de position: relative au conteneur du graphique ou le redessin du graphique lors de $(window).resize().
Graphique réactif Dygraphs (inspectez les conteneurs de graphiques pour voir les classes CSS)
Fil de discussion Stack Overflow sur les graphiques Google réactifs
Idéal pour ?
Enfin et surtout, j'ai listé le cas d'utilisation pour lequel je pense que chaque bibliothèque est la mieux adaptée :
Toutes les captures d'écran proviennent de la section des exemples respectifs de chaque bibliothèque
D3 vaut la peine d'y investir du temps si vous a) avez besoin d'une visualisation hautement personnalisée et/ou b) voulez des fonctions d'aide à utiliser en conjonction avec d'autres bibliothèques.
J'ai apprécié Dygraphs pour les séries temporelles car l'utilisateur peut parcourir la série et voir la date et le point correspondant par défaut. Vous pouvez également mettre en évidence des périodes spécifiques et sélectionner des plages de temps.
Chart.js vous permet de créer des graphiques simples et esthétiques qui s'intègrent parfaitement à la page lors du chargement.
Enfin, Google Charts offrait la plus grande variété de graphiques prêts à l'emploi, par rapport aux autres bibliothèques. En plus des graphiques standard, Google Charts prend également en charge les cartes géographiques, les treemaps, les diagrammes de Sankey, etc.
3, 2, 1 … récapitulatif !
Nous avons couvert les nombreuses raisons pour lesquelles la visualisation de données est puissante, la structure et les étapes de base pour créer un graphique à l'aide d'une bibliothèque de graphiques, et une comparaison point par point de 4 bibliothèques JavaScript populaires.
L'étape la plus importante après avoir sélectionné une bibliothèque et généré quelques visualisations est de communiquer, puis d'itérer. Montrez vos graphiques aux autres et demandez-leur ce qu'ils peuvent et ne peuvent pas interpréter. Écoutez leurs commentaires et continuez à peaufiner vos graphiques. Ce sont des outils pédagogiques, et les outils pédagogiques doivent constamment évoluer avec le contenu et les spectateurs.
Merci de votre lecture !
— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —
Le code des graphiques que j'ai créés est disponible sur GitHub.
Voici les diapositives de présentation qui ont mené à cet article.
Si vous voulez en savoir plus sur Bokeh et D3, consultez Naviguer dans les eaux : entre Bokeh et D3.
Si vous avez des suggestions ou des commentaires, laissez un commentaire.