D3.tutoriel js: création de graphiques à barres interactifs avec JavaScript

récemment, nous avons eu le plaisir de participer à un projet d’apprentissage automatique impliquant des bibliothèques comme React et D3.js. Parmi de nombreuses tâches, j’ai développé quelques graphiques qui aident à traiter le résultat de modèles ML comme Naive Bayes sous la forme d’un graphique en courbes ou d’un graphique à barres groupées.,

dans cet article, je voudrais présenter mes progrès avec D3.js si loin et de montrer l’utilisation de base de la bibliothèque à travers l’exemple simple d’un graphique à barres.

Après avoir lu cet article, vous apprendrez comment créer D3.js graphiques comme cela:

Le code source complet est disponible ici.

chez RisingStack, nous aimons L’écosystème JavaScript, le backend et le développement frontal. Personnellement, je suis intéressé par les deux., Sur le backend, je peux voir à travers la logique métier sous-jacente d’une application tandis que j’ai également la possibilité de créer des trucs impressionnants sur le front-end. C’est là que D3.js entre dans l’image!

mise à Jour: une 2ème partie de mon d3.la série de didacticiels js est également disponible: construire un D3.js Calendar Heatmap (pour visualiser les données D’utilisation de StackOverflow)

qu’est-ce que D3.js?

D3.js est une bibliothèque JavaScript pilotée par les données pour manipuler les éléments DOM.

« D3 vous aide à donner vie aux données en utilisant HTML, SVG et CSS., L’accent mis par D3 sur les normes web vous donne toutes les capacités des navigateurs modernes sans vous lier à un framework propriétaire, combinant de puissants composants de visualisation et une approche de manipulation DOM axée sur les données. »”d3js.org

pourquoi créeriez-vous des graphiques avec D3.js en premier lieu? Pourquoi ne pas simplement afficher une image?

Eh bien, les graphiques sont basés sur des informations provenant de ressources tierces qui nécessitent une visualisation dynamique pendant le rendu. En outre, SVG est un outil très puissant qui convient bien à ce cas d’application.,

faisons un détour pour voir quels avantages nous pouvons tirer de L’utilisation de SVG.

les avantages de SVG

SVG signifie Scalable Vector Graphics qui est techniquement un langage de balisage basé sur XML.

Il est couramment utilisé pour dessiner des graphiques vectoriels, spécifier des lignes et des formes ou modifier des images existantes. Vous pouvez trouver la liste des éléments disponibles ici.

avantages:

• pris en charge dans tous les principaux navigateurs;
• Il a une interface DOM, ne nécessite aucune bibliothèque tierce;
• évolutif, il peut maintenir une haute résolution;
• taille réduite par rapport aux autres formats d’image.,

Inconvénients:

• Il peut uniquement afficher des images en deux dimensions;
• courbe d’apprentissage est Longue;
• le Rendu peut être long à calculer des opérations intensives.

malgré ses inconvénients, SVG est un excellent outil pour afficher des icônes, des logos, des illustrations ou dans ce cas, des graphiques.

mise en route avec D3.js

j’ai choisi un graphique à barres pour commencer car il représente un élément visuel de faible complexité alors qu’il enseigne l’application de base de D3.js lui-même. Cela ne devrait pas Vous tromper, D3 fournit un ensemble d’outils pour visualiser les données., Consultez sa page github pour quelques cas d’utilisation vraiment sympa!

Un graphique à barres peut être horizontale ou verticale en fonction de son orientation. Je vais aller avec le graphique à colonnes vertical aka.

sur ce diagramme, je vais afficher le top 10 des langages de programmation les plus appréciés en fonction du résultat de L’enquête auprès des développeurs de Stack Overflow 2018.

le Temps de dessiner!

SVG a un système de coordonnées qui commence à partir du coin supérieur gauche (0;0). L’axe X positif va vers la droite, tandis que l’axe Y positif se dirige vers le bas., Ainsi, la hauteur du SVG doit être prise en compte lorsqu’il s’agit de calculer la coordonnée y d’un élément.

C’est assez vérification des antécédents, nous allons écrire un peu de code!

je veux créer un graphique avec une largeur de 1000 pixels et une hauteur de 600 pixels.

<body><svg /></body><script> const margin = 60; const width = 1000 - 2 * margin; const height = 600 - 2 * margin; const svg = d3.select('svg');</script>

Dans l’extrait de code ci-dessus, je sélectionne le créé le <svg> élément dans le fichier HTML avec d3 select. Cette méthode de sélection accepte toutes sortes de chaînes de sélection et renvoie le premier élément correspondant., Utiliser selectAll si Vous souhaitez obtenir toutes.

je définis également une valeur de Marge qui donne un peu de remplissage supplémentaire au graphique. Le remplissage peut être appliqué avec un élément<g> traduit par la valeur souhaitée. Désormais, je m’appuie sur ce groupe pour garder une saine distance de tout autre contenu de la page.

const chart = svg.append('g') .attr('transform', `translate(${margin}, ${margin})`);

en Ajoutant des attributs d’un élément est aussi simple que d’appeler le attr méthode. Le premier paramètre de la méthode prend un attribut que je souhaite appliquer à l’élément DOM sélectionné., Le deuxième paramètre est la valeur ou une fonction de rappel qui en renvoie la valeur. Le code ci-dessus déplace simplement le début du graphique à la position (60;60) du SVG.

prise en charge de la D3.formats d’entrée js

Pour commencer à dessiner, je dois définir la source de données à partir de laquelle je travaille. Pour ce tutoriel, j’utilise un tableau JavaScript simple qui contient des objets avec le nom des langues et leurs taux en pourcentage, mais il est important de mentionner que D3.js prend en charge plusieurs formats de données.

la bibliothèque a une fonctionnalité intégrée pour charger à partir de XMLHttpRequest, .les fichiers csv, fichiers texte, etc., Chacune de ces sources peut contenir des données que D3.js pouvez utiliser, la seule chose importante est de construire un tableau d’eux. Notez que, à partir de la version 5.0, la bibliothèque utilise des promesses au lieu de rappels pour le chargement des données, ce qui est une modification non rétrocompatible.

mise à l’échelle, Axes

continuons avec les axes du graphique. Afin de dessiner l’axe des y, je dois définir la limite de valeur la plus basse et la plus élevée qui dans ce cas sont 0 et 100.

je travaille avec des pourcentages dans ce tutoriel, mais il existe des fonctions utilitaires pour les types de données autres que les nombres que j’expliquerai plus tard.,

j’ai diviser la hauteur du graphique entre ces deux valeurs en parties égales. Pour cela, je crée quelque chose qui s’appelle une fonction de mise à l’échelle.

const yScale = d3.scaleLinear() .range() .domain();

l’échelle Linéaire est le plus connu de mise à l’échelle de type. Il convertit un domaine d’entrée continu en une plage de sortie continue. Avis de la balise range et domain méthode. Le premier prend la longueur qui doit être divisée entre les limites des valeurs de domaine.,

rappelez-vous, le système de coordonnées SVG commence à partir du coin supérieur gauche, c’est pourquoi la plage prend la hauteur comme premier paramètre et non zéro.

créer un axe à gauche est aussi simple que d’ajouter un autre groupe et d’appeler la méthodeaxisLeft de d3 avec la fonction de mise à l’échelle comme paramètre.

chart.append('g') .call(d3.axisLeft(yScale));

Maintenant, continuer avec l’axe des abscisses.

sachez que j’utilise scaleBand pour l’axe des x, ce qui aide à diviser la plage en bandes et à calculer les coordonnées et les largeurs des barres avec un remplissage supplémentaire.

D3.,js est également capable de gérer le type de date parmi beaucoup d’autres. scaleTime est vraiment similaire à scaleLinear sauf que le domaine est ici un tableau de dates.

Barres de dessin en D3.js

réfléchissez au type d’entrée dont nous avons besoin pour dessiner les barres. Ils représentent chacun une valeur qui est illustrée par des formes simples, en particulier des rectangles. Dans l’extrait de code suivant, je les ajoute à l’élément de groupe.

tout d’Abord, j’ selectAll éléments sur le graphique qui renvoie un jeu de résultats vide., Ensuite, la fonction data indique le nombre d’éléments avec lesquels le DOM doit être mis à jour en fonction de la longueur du tableau. enter identifie les éléments manquants si l’entrée de données est plus longue que la sélection. Cela renvoie une nouvelle sélection représentant les éléments à ajouter. Habituellement, ceci est suivi d’un append qui ajoute des éléments au DOM.

fondamentalement, je dis à D3.js pour ajouter un rectangle pour chaque membre du groupe.

maintenant, cela n’ajoute que des rectangles les uns sur les autres qui n’ont ni hauteur ni largeur., Ces deux attributs doivent être calculés et c’est là que les fonctions de mise à l’échelle sont à nouveau utiles.

Voir, j’Ajoute les coordonnées des rectangles avec l’appelattr. Le deuxième paramètre peut être un rappel qui prend 3 paramètres: le membre réel des données d’entrée, son index et l’ensemble de l’entrée.

.attr(’x’, (actual, index, array) => xScale(actual.value))

la fonction de mise à l’échelle renvoie la coordonnée pour une valeur de domaine donnée. Calculer les coordonnées est un morceau de gâteau, l’astuce est avec la hauteur de la barre., La coordonnée y calculée doit être soustraite de la hauteur du graphique pour obtenir la représentation correcte de la valeur sous forme de colonne.

je définis également la largeur des rectangles avec la fonction de mise à l’échelle. scaleBand a une fonction bandwidth qui renvoie la largeur calculée pour un élément en fonction du remplissage défini.

Beau travail, mais pas tellement envie, non?

pour éviter que notre Public ne saigne des yeux, ajoutons quelques informations et améliorons les visuels!, 😉

conseils sur la création de graphiques à barres

Il existe des règles de base avec des graphiques à barres qui méritent d’être mentionnées.

• évitez d’utiliser des effets 3D;
• ordonnez intuitivement les points de données – par ordre alphabétique ou triés;
• gardez la distance entre les bandes;
• démarrez l’axe y à 0 et non avec la valeur la plus basse;
• utilisez des couleurs cohérentes;
• ajoutez des étiquettes d’axe,

D3.js Grid System

je veux mettre en évidence les valeurs en ajoutant des lignes de grille en arrière-plan.,

allez-y, expérimentez avec des lignes verticales et horizontales mais mon conseil est d’en afficher une seule. Les lignes excessives peuvent être distrayantes. Cet extrait de code présente comment ajouter les deux solutions.

je préfère les lignes de grille verticales dans ce cas, car elles conduisent les yeux et gardent l’image globale simple et simple.

étiquettes en D3.js

je veux également rendre le diagramme plus complet en ajoutant des conseils textuels. Donnons un nom au graphique et ajoutons des étiquettes pour les axes.,

Les textes sont des éléments SVG qui peuvent être ajoutés au SVG ou aux groupes. Ils peuvent être positionnés avec les coordonnées x et y tandis que l’alignement du texte est effectué avec l’attribut text-anchor. Pour ajouter l’étiquette elle-même, appelez simplement la méthode text sur l’élément text.

interactivité avec D3.js

Nous avons obtenu un graphique assez informatif, mais il existe néanmoins des possibilités de le rendre interactif.

dans le bloc de code suivant, je vous montre comment ajouter des écouteurs d’événement aux éléments SVG.,

notez que j’utilise une expression de fonction au lieu d’une fonction de flèche car j’accède à l’élément via le mot-cléthis.

je règle l’opacité de l’élément SVG sélectionné sur la moitié de la valeur d’origine lors du survol de la souris et le réinitialise lorsque le curseur quitte la zone.

Vous pouvez également obtenir les coordonnées de la souris avec des d3.mouse. Il renvoie un tableau avec les coordonnées x et Y. De cette façon, afficher une info-bulle à la pointe du curseur ne poserait aucun problème.

créer des diagrammes accrocheurs n’est pas une forme d’art facile.,

on pourrait avoir besoin de la sagesse des graphistes, des chercheurs UX et d’autres créatures puissantes. Dans l’exemple suivant, je vais montrer quelques possibilités pour booster votre graphique!

j’ai des valeurs très similaires affichées sur le graphique, donc pour mettre en évidence les divergences entre les valeurs de barre, j’ai configuré un écouteur d’événement pour l’événementmouseenter. Chaque fois que l’utilisateur survole une colonne spécifique, une ligne horizontale est tracée au-dessus de cette barre. De plus, je calcule également les différences par rapport aux autres bandes et je les affiche sur les barres.,

très soigné, hein? J’ai également ajouté l’exemple d’opacité à celui-ci et augmenté la largeur de la barre.

la méthode transition indique que je souhaite animer les modifications du DOM. Son intervalle est défini avec la fonction duration qui prend des millisecondes comme arguments. Cette transition ci-dessus estompe la couleur de la bande et élargit la largeur de la barre.

pour dessiner une ligne SVG, j’ai besoin d’un point de départ et d’un point de destination., Cela peut être réglée via la balise x1, y1 et x2, y2 coordonnées. La ligne ne sera pas visible tant que je n’en ai pas défini la couleur avec l’attribut stroke.

je n’ai révélé qu’une partie de l’événementmouseenter ici, alors gardez à l’esprit que vous devez annuler ou supprimer les modifications sur l’événementmouseout. Le code source complet est disponible à la fin de l’article.

ajoutons un peu de Style au graphique!,

voyons ce que nous avons réalisé jusqu’à présent et comment pouvons-nous secouer ce tableau avec un peu de style. Vous pouvez ajouter des attributs de classe aux éléments SVG avec la même fonction attr que nous utilisions auparavant.

le diagramme a un bel ensemble de fonctionnalités. Au lieu d’une image terne et statique, elle révèle également les divergences entre les valeurs représentées au survol de la souris. Le titre met le graphique en contexte et les étiquettes aider à identifier les axes avec l’unité de mesure. J’ai également ajouter une nouvelle étiquette dans le coin inférieur droit pour marquer la source d’entrée.,

Il ne reste plus qu’à mettre à niveau les couleurs et les polices!

les graphiques avec un fond sombre rendent les barres de couleur vive cool. J’ai également appliqué la famille de polices Open Sans à tous les textes et défini la taille et le poids des différentes étiquettes.

remarquez-vous que la ligne a été pointillée? Cela peut être fait en définissant les attributsstroke-width etstroke-dasharray. Avec stroke-dasharray, vous pouvez définir un motif de tirets et d’espaces qui modifient le contour de la forme.

lignes de grille où cela devient délicat., Je dois appliquer stroke-width: 0 aux éléments de chemin du groupe pour masquer le cadre du diagramme et je réduit également leur visibilité en définissant l’opacité des lignes.

Toutes les autres règles css couvrent les tailles et les couleurs de police que vous pouvez trouver dans le code source.

Habillage de notre D3.tutoriel graphique à barres js

D3.js est une bibliothèque étonnante pour la manipulation DOM. La profondeur de celui-ci Cache d’innombrables trésors cachés (en fait pas cachés, c’est vraiment bien documenté) qui attendent la découverte., Cette Écriture ne couvre que des fragments de son ensemble d’outils qui aident à créer un graphique à barres Pas si médiocre.

Allez, explorer, utiliser et créer des visualisations!