Dans cet article, je veux vous guider à travers un exemple de projet que j'ai construit récemment - un type totalement original Type de visualisation à l'aide de la bibliothèque D3, qui montre comment chacun de ces composants s'ajoute pour faire D3 une grande bibliothèque à apprendre.
D3 signifie des documents basés sur les données. C'est une bibliothèque JavaScript qui peut être utilisée pour faire toutes sortes de merveilleuses visualisations et graphiques de données.Si vous avez déjà vu les fabuleuses histoires interactives du New York Times, vous aurez déjà vu D3 en action. Vous pouvez également voir des exemples intéressants de grands projets qui ont été construits avec D3 ici.
La courbe d'apprentissage est assez raide pour commencer la bibliothèque, car D3 a quelques bizarreries spéciales que vous n'aurez probablement pas vues auparavant. Cependant, si vous pouvez dépasser la première phase d'apprentissage suffisamment de D3 pour être dangereux, vous pourrez bientôt construire des choses vraiment cool pour vous-même.
Il y a trois facteurs principaux qui font vraiment ressortir D3 de toutes les autres bibliothèques:
En tant que majeure en économie au collège, j'avais toujours été intéressé par les inégalités des revenus. J'ai suivi quelques cours sur le sujet, et cela m'a frappé comme quelque chose qui n'était pas entièrement compris dans la mesure où il devrait être.
J'ai commencé à explorer les inégalités des revenus à l'aide de l'explorateur de données publiques de Google…
Lorsque vous vous adaptez à l'inflation, le revenu des ménages est resté à peu près constant pour les 40% les plus bas de la société, bien que la productivité par travailleur ait monté en flèche. Il n'a vraiment été que le top 20% qui a récolté plus des avantages (et dans ce support, la différence est encore plus choquante si vous regardez les 5% supérieurs).
Voici un message que je voulais passer de manière convaincante, qui a fourni une occasion parfaite d'utiliser des D3.js, alors j'ai commencé à esquisser quelques idées.esquisse
absolument n'importe quoi auquel je pourrais penser. Faire un graphique de ligne simple, un graphique à barres ou un graphique à bulles aurait été assez facile, mais je voulais faire quelque chose de différent.
Je trouve que l'analogie la plus courante que les gens avaient tendance à utiliser comme contre-argument aux préoccupations concernant l'inégalité est que «si le tarte grossir, alors il y a plus à faire». L'intuition est que, si la part totale du PIB parvient à augmenter dans une large mesure, alors même si certaines personnes obtiennent une tranche plus mincede tarte, alors ils seront toujours mieux off . Cependant, comme nous pouvons le voir, il est totalement possible que la tarte grossir et pour que les gens en obtiennent moins dans l'ensemble. Ma première idée de visualisation de ces données ressemblait à ceci:
L'idée serait que nous aurions ce graphique à tarte pulsé, chaque tranche représentant un cinquième de la distribution des revenus américains. La superficie de chaque tranche de tarte se rapporterait à la quantité de revenus de ce segment de la population, et la superficie totale du graphique représenterait son PIB total.
Cependant, je suis vite tombé sur un peu de problème. Il s'avère que le cerveau humain est
exceptionnellement pauvre pour distinguer la taille de différentes zones. Lorsque j'ai cartographié cela plus concrètement, le message n'était pas aussi évident qu'il aurait dû l'être:
Ici, il semble que les Américains les plus pauvres deviennent
au fil du temps, ce qui confirme ce qui semble être intuitivement vrai. J'ai pensé à ce problème un peu plus, et ma solution impliquait de garder l'angle de chaque arc constant, le rayon de chaque arc changeant dynamiquement.
Voici comment cela a fini par regarder dans la pratique:
Je tiens à souligner que cette image a toujours tendance à sous-estimer l'effet ici. L'effet aurait été plus évident si nous utilisons un graphique à barres simple:
Cependant, je me suis engagé à faire une visualisation unique, et je voulais marteler ce message que le tarte peut obtenir plus grand , tandis que un partager Il peut obtenir plus petit . Maintenant que j'avais mon idée, il était temps de le construire avec D3.
donc, maintenant que je sais ce que je vais construire, il est temps d'entrer dans la vraie viande de ce projet et de commencer écrire du code .
Vous pourriez penser que je commencerais par écrire mes premières lignes de code à partir de zéro, mais vous vous tromperiez. C'est D3, et comme nous travaillons avec D3, nous pouvons toujours trouver un code pré-écrit de la communauté pour nous démarrer.
Nous créons quelque chose de complètement nouveau, mais il a beaucoup en commun avec un graphique à secteurs ordinaire, alors j'ai jeté un coup d'œil sur Bl.ocks.org, et j'ai décidé d'aller avec cette implémentation classique de Mike Bostock, L'un des créateurs de D3. Ce fichier a probablement été copié des milliers de fois déjà, et le gars qui l'a écrit est un vrai sorcier avec JavaScript, nous pouvons donc être sûrs que nous commençons par un joli bloc de code.
Ce fichier est écrit dans D3 V3, qui est maintenant deux versions obsolètes, car la version 5 a finalement été publiée le mois dernier. Un grand changement dans D3 V4 était que la bibliothèque est passée à l'utilisation d'un espace de noms plat, de sorte que les fonctions d'échelle comme d3.scale.ordinal () sont écrites comme d3.ScaleOrdinal () à la place. Dans la version 5, le plus grand changement était que les fonctions de chargement des données sont désormais structurées comme des promesses, ce qui facilite la gestion des ensembles de données à la fois.
Pour éviter la confusion, j'ai déjà pris la peine de créer une version V5 mise à jour de ce code, que j'ai enregistrée sur blockbuilder.org. J'ai également converti la syntaxe pour s'adapter aux conventions ES6, telles que la commutation des fonctions anonymes ES5 en fonctions flèches.
Voici ce que nous commençons déjà:
J'ai ensuite copié ces fichiers dans mon répertoire de travail et je me suis assuré que je pouvais tout reproduire sur ma propre machine. Si vous voulez suivre ce tutoriel vous-même, vous pouvez cloner ce projet à partir de notre répension GitHub. Vous pouvez commencer par le code dans le fichier starter.html. Veuillez noter que vous aurez besoin d'un serveur (comme celui-ci) pour exécuter ce code, comme sous le capot, il s'appuie sur l'API Fetch pour récupérer les données.
Permettez-moi de vous donner un aperçu rapide de la façon dont ce code fonctionne.
Tout d'abord, nous déclarons quelques constantes en haut de notre fichier, que nous utiliserons pour définir la taille de notre graphique à tarte:
<span>const width = 540; </span><span>const height = 540; </span><span>const radius = Math.min(width, height) / 2; </span>
Cela rend notre code super réutilisable, car si jamais nous voulons le rendre plus grand ou plus petit, nous devons seulement nous soucier de modifier ces valeurs ici.
Ensuite, nous ajoutons un canevas SVG à l'écran. Si vous ne savez pas grand-chose sur les SVG, vous pouvez considérer la toile comme l'espace sur la page sur laquelle nous pouvons dessiner des formes. Si nous essayons de dessiner un SVG en dehors de cette zone, il n'apparaîtra tout simplement pas à l'écran:
<span>const width = 540; </span><span>const height = 540; </span><span>const radius = Math.min(width, height) / 2; </span>
Nous saisissons une div vide avec l'ID de la région du graphique avec un appel à D3.Select (). Nous attachons également un canevas SVG avec la méthode D3.APPEND (), et nous définissons quelques dimensions pour sa largeur et sa hauteur en utilisant la méthode d3.attr ().
Nous attachons également un élément de groupe SVG à cette toile, qui est un type spécial d'élément que nous pouvons utiliser pour structurer les éléments ensemble. Cela nous permet de déplacer l'ensemble de notre visualisation dans le centre de l'écran, en utilisant l'attribut de transformation de l'élément de groupe.
Après cela, nous configurons une échelle par défaut que nous utiliserons pour attribuer une nouvelle couleur pour chaque tranche de notre tarte:
<span>const svg = d3.select("#chart-area")
</span> <span>.append("svg")
</span> <span>.attr("width", width)
</span> <span>.attr("height", height)
</span> <span>.append("g")
</span> <span>.attr("transform", <span>`translate(<span>${width / 2}</span>, <span>${height / 2}</span>)`</span>);
</span>Ensuite, nous avons quelques lignes qui ont configuré la disposition des tartes de D3:
<span>const color = d3.scaleOrdinal(["#66c2a5", "#fc8d62", "#8da0cb","#e78ac3", "#a6d854", "#ffd92f"]); </span>
En D3, les dispositions sont des fonctions spéciales que nous pouvons appeler sur un ensemble de données. Une fonction de mise en page prend un tableau de données dans un format particulier et crache un tableau transformé avec certaines valeurs générées automatiquement, avec lesquelles nous pouvons alors faire quelque chose.
Nous devons ensuite définir un générateur de chemins que nous pouvons utiliser pour dessiner nos arcs. Les générateurs de chemins nous permettent de dessiner des SVG de chemin dans un navigateur Web. Tout ce que D3 fait vraiment, c'est associer des données aux formes à l'écran, mais dans ce cas, nous voulons définir une forme plus compliquée qu'un simple cercle ou carré simple. Le chemin que les SVG fonctionnent en définissant un itinéraire pour qu'une ligne soit tracée entre, que nous pouvons définir avec son attribut d.
Voici à quoi cela pourrait ressembler:
<span>const pie = d3.pie() </span> <span>.value(d => d.count) </span> <span>.sort(null); </span>
L'attribut D contient un encodage spécial qui permet au navigateur de dessiner le chemin que nous voulons. Si vous voulez vraiment savoir ce que signifie cette chaîne, vous pouvez le découvrir dans la documentation SVG de MDN. Pour la programmation en D3, nous n'avons pas vraiment besoin de savoir quoi que ce soit sur ce codage spécial, car nous avons des générateurs qui crachent nos attributs D, que nous avons juste besoin d'initialiser avec des paramètres simples.
Pour un arc, nous devons donner à notre générateur de chemins un innerradius et une valeur extérieure dans les pixels, et le générateur triera les mathématiques complexes qui entrent dans le calcul de chacun des angles pour nous:
<span><span><span><svg</span> width<span>="190"</span> height<span>="160"</span>></span> </span> <span><span><span><path</span> d<span>="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80"</span> stroke<span>="black"</span> fill<span>="transparent"</span>/></span> </span><span><span><span></svg</span>></span> </span>
Pour notre graphique, nous utilisons une valeur de zéro pour notre Innerradius, qui nous donne un graphique à secteurs standard. Cependant, si nous voulions dessiner un tableau de beignets à la place, alors tout ce que nous aurions à faire est de brancher une valeur plus petite que notre valeur extérieure.
Après quelques déclarations de fonctions, nous chargeons dans nos données avec la fonction d3.json ():
<span>const width = 540; </span><span>const height = 540; </span><span>const radius = Math.min(width, height) / 2; </span>
Dans la version D3 5.x, un appel à d3.json () renvoie une promesse, ce qui signifie que D3 rapportera le contenu du fichier JSON qu'il trouve sur le chemin relatif que nous lui donnons et exécutera la fonction qui Nous appelons la méthode alors () une fois qu'elle a été chargée. Nous avons ensuite accès à l'objet que nous examinons dans l'argument de données de notre rappel.
Nous transmettons également une référence de fonction ici - type - qui va convertir toutes les valeurs dans lesquelles nous chargeons en nombres, avec lesquels nous pouvons travailler plus tard:
<span>const svg = d3.select("#chart-area")
</span> <span>.append("svg")
</span> <span>.attr("width", width)
</span> <span>.attr("height", height)
</span> <span>.append("g")
</span> <span>.attr("transform", <span>`translate(<span>${width / 2}</span>, <span>${height / 2}</span>)`</span>);
</span>si nous ajoutons une console.log (données); Déclaration en haut de notre rappel D3.json, nous pouvons jeter un œil aux données avec lesquelles nous travaillons maintenant:
<span>const color = d3.scaleOrdinal(["#66c2a5", "#fc8d62", "#8da0cb","#e78ac3", "#a6d854", "#ffd92f"]); </span>
Nos données sont divisées en deux tableaux différents ici, représentant nos données pour les pommes et les oranges, respectivement.
Avec cette ligne, nous allons changer les données que nous recherchons chaque fois que l'un de nos boutons radio est cliqué:
<span>const pie = d3.pie() </span> <span>.value(d => d.count) </span> <span>.sort(null); </span>
Nous devrons également appeler la fonction Update () lors de la première exécution de notre visualisation, passant dans une valeur initiale (avec notre tableau «pommes»).
<span><span><span><svg</span> width<span>="190"</span> height<span>="160"</span>></span> </span> <span><span><span><path</span> d<span>="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80"</span> stroke<span>="black"</span> fill<span>="transparent"</span>/></span> </span><span><span><span></svg</span>></span> </span>
Voyons ce que fait notre fonction de mise à jour (). Si vous êtes nouveau dans D3, cela pourrait provoquer une certaine confusion, car c'est l'une des parties les plus difficiles de D3 à comprendre…
<span>const arc = d3.arc() </span> <span>.innerRadius(0) </span> <span>.outerRadius(radius); </span>
Tout d'abord, nous utilisons un paramètre de fonction par défaut pour la valeur. Si nous transmettons un argument à notre fonction Update () (lorsque nous l'exécutons pour la première fois), nous utiliserons cette chaîne, ou sinon nous obtiendrons la valeur que nous voulons de l'événement de clic de nos entrées radio.
Nous utilisons ensuite le modèle de mise à jour général en D3 pour gérer le comportement de nos arcs. Cela consiste généralement à effectuer une jointure de données, à sortir d'anciens éléments, à mettre à jour des éléments existants à l'écran et à ajouter de nouveaux éléments qui ont été ajoutés à nos données. Dans cet exemple, nous n'avons pas à nous soucier de la sortie des éléments, car nous avons toujours le même nombre de tranches de tarte à l'écran.
Tout d'abord, il y a nos données jointes:
d3<span>.json("data.json", type).then(data => {
</span> <span>// Do something with our data
</span><span>});
</span>Chaque fois que notre visualisation se met à jour, cela associe un nouveau tableau de données avec nos SVG à l'écran. Nous passons nos données (soit le tableau pour les «pommes» ou les «oranges») dans notre fonction de mise en page PIE (), qui calcule certains angles de début et de fin, qui peuvent être utilisés pour dessiner nos arcs. Cette variable de chemin contient désormais une sélection virtuelle spéciale de tous les arcs de l'écran.
Ensuite, nous mettons à jour tous les SVG sur l'écran qui existent toujours dans notre tableau de données. Nous ajoutons ici une transition - une fonctionnalité fantastique de la bibliothèque D3 - pour répartir ces mises à jour sur 200 millisecondes:
<span>const width = 540; </span><span>const height = 540; </span><span>const radius = Math.min(width, height) / 2; </span>
Nous utilisons la méthode Attween () sur l'appel D3.Transition () pour définir une transition personnalisée que D3 devrait utiliser pour mettre à jour les positions de chacun de ses arcs (transition avec l'attribut d). Nous n'avons pas besoin de le faire si nous essayons d'ajouter une transition à la plupart de nos attributs, mais nous devons le faire pour la transition entre différents chemins. D3 ne peut pas vraiment comprendre comment passer entre les chemins personnalisés, nous utilisons donc la fonction arctween () pour faire savoir à D3 comment chacun de nos chemins devrait être dessiné à chaque instant.
Voici à quoi ressemble cette fonction:
<span>const svg = d3.select("#chart-area")
</span> <span>.append("svg")
</span> <span>.attr("width", width)
</span> <span>.attr("height", height)
</span> <span>.append("g")
</span> <span>.attr("transform", <span>`translate(<span>${width / 2}</span>, <span>${height / 2}</span>)`</span>);
</span>Nous utilisons d3.interpolate () ici pour créer ce qu'on appelle un interpolateur. Lorsque nous appelons la fonction que nous stockons dans la variable I avec une valeur entre 0 et 1, nous récupérerons une valeur quelque part entre cela. Dans ce cas, ce.__current est un objet qui contient l'angle de début et de fin de la tranche de tarte que nous regardons, et A représente le nouveau point de données que nous mettons à jour.
Une fois que nous avons configuré l'interpolateur, nous mettons à jour la valeur cette.__current pour contenir la valeur que nous aurons à la fin (i (a)), puis nous retournons une fonction qui calculera Le chemin que notre arc doit contenir, en fonction de cette valeur t. Notre transition exécutera cette fonction sur chaque tick de son horloge (passant dans un argument entre 0 et 1), et ce code signifiera que notre transition saura où nos arcs devraient être tirés à tout moment.
Enfin, notre fonction Update () doit ajouter de nouveaux éléments qui n'étaient pas dans le tableau précédent de données:
<span>const color = d3.scaleOrdinal(["#66c2a5", "#fc8d62", "#8da0cb","#e78ac3", "#a6d854", "#ffd92f"]); </span>
Ce bloc de code définira les positions initiales de chacun de nos arcs, la première fois que cette fonction de mise à jour est exécutée. La méthode ENTER () nous donne ici tous les éléments de nos données qui doivent être ajoutés à l'écran, puis nous pouvons faire une parole sur chacun de ces éléments avec les méthodes ATR (), pour définir le remplissage et la position de chacun de nos nos arcs. Nous donnons également à chacun de nos arcs une bordure blanche, ce qui rend notre graphique un peu plus net. Enfin, nous définissons la propriété ce.__currente de chacun de ces arcs comme valeur initiale de l'élément dans nos données, que nous utilisons dans la fonction artween ().
Ne vous inquiétez pas si vous ne pouvez pas suivre exactement comment cela fonctionne, car c'est un sujet assez avancé en D3. La grande chose à propos de cette bibliothèque est que vous n'avez pas besoin de connaître tous ses travaux intérieurs pour créer des trucs puissants avec. Tant que vous pouvez comprendre les bits que vous devez changer, alors c'est bien de résumer certains des détails qui ne sont pas complètement essentiels.
Cela nous amène à l'étape suivante du processus…
Maintenant que nous avons du code dans notre environnement local, et nous comprenons ce qu'il fait, je vais changer les données que nous recherchons, afin que cela fonctionne avec les données qui nous intéressent .
J'ai inclus les données avec lesquelles nous travaillerons dans le dossier / dossier de notre projet. Étant donné que ce nouveau fichier incomes.csv est dans un format CSV cette fois (c'est le type de fichier que vous pouvez ouvrir avec Microsoft Excel), je vais utiliser la fonction D3.CSV (), au lieu du D3.JSON ( ) Fonction:
<span>const width = 540; </span><span>const height = 540; </span><span>const radius = Math.min(width, height) / 2; </span>
Cette fonction fait essentiellement la même chose que d3.json () - la conversion de nos données en un format que nous pouvons utiliser. Je supprime également la fonction d'initialisateur type () comme le deuxième argument ici, car cela était spécifique à nos anciennes données.
Si vous ajoutez une instruction Console.log (données) en haut du rappel D3.CSV, vous pourrez voir la forme des données avec lesquelles nous travaillons:
<span>const svg = d3.select("#chart-area")
</span> <span>.append("svg")
</span> <span>.attr("width", width)
</span> <span>.attr("height", height)
</span> <span>.append("g")
</span> <span>.attr("transform", <span>`translate(<span>${width / 2}</span>, <span>${height / 2}</span>)`</span>);
</span>Nous avons un tableau de 50 éléments, chaque élément représentant un an dans nos données. Pour chaque année, nous avons ensuite un objet, avec des données pour chacun des cinq groupes de revenus, ainsi que quelques autres domaines. Nous pourrions créer un graphique à secteurs ici pendant l'une de ces années, mais nous devrons d'abord parcourir un peu nos données, afin qu'elle soit dans le bon format. Lorsque nous voulons rédiger une jointure de données avec D3, nous devons passer dans un tableau, où chaque élément sera lié à un svg.
Rappelez-vous que, dans notre dernier exemple, nous avions un tableau avec un élément pour chaque tranche de tarte que nous voulions afficher à l'écran. Comparez cela à ce que nous avons pour le moment, qui est un objet avec les touches de 1 à 5 représentant chaque tranche de tarte que nous voulons dessiner.
Pour résoudre ce problème, je vais ajouter une nouvelle fonction appelée préparation () pour remplacer la fonction type () que nous avions auparavant, qui iratera sur chaque élément de nos données au fur et à mesure qu'il est chargé:
<span>const color = d3.scaleOrdinal(["#66c2a5", "#fc8d62", "#8da0cb","#e78ac3", "#a6d854", "#ffd92f"]); </span>
Pour chaque année, cette fonction renverra un objet avec un tableau de valeurs, que nous passerons dans notre jointure de données. Nous étiquetons chacune de ces valeurs avec un champ de nom, et nous leur donnons une valeur numérique en fonction des valeurs de revenu que nous avions déjà. Nous gardons également une trace du revenu moyen de chaque année pour comparaison.
À ce stade, nous avons nos données dans un format avec lequel nous pouvons travailler:
<span>const pie = d3.pie() </span> <span>.value(d => d.count) </span> <span>.sort(null); </span>
Je vais commencer par générer un graphique pour la première année de nos données, puis je m'inquiète de le mettre à jour pour le reste des années.
Pour le moment, nos données commencent en 2015 et se terminent en 1967, nous devons donc inverser ce tableau avant de faire autre chose:
<span><span><span><svg</span> width<span>="190"</span> height<span>="160"</span>></span> </span> <span><span><span><path</span> d<span>="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80"</span> stroke<span>="black"</span> fill<span>="transparent"</span>/></span> </span><span><span><span></svg</span>></span> </span>
Contrairement à un graphique à secteurs normal, pour notre graphique, nous voulons réparer les angles de chacun de nos arcs, et faire changer le rayon à mesure que nos mises à jour de visualisation. Pour ce faire, nous allons modifier la méthode de valeur () sur notre disposition de tarte, afin que chaque tranche de tarte obtienne toujours les mêmes angles:
<span>const width = 540; </span><span>const height = 540; </span><span>const radius = Math.min(width, height) / 2; </span>
Ensuite, nous devrons mettre à jour notre rayon à chaque fois que nos mises à jour de la visualisation. Pour ce faire, nous devrons trouver une échelle que nous pouvons utiliser. Une échelle est une fonction en D3 qui prend une entrée entre deux valeurs, que nous passons en tant que domaine, puis crache une sortie entre deux valeurs différentes, que nous transmettons comme la gamme. Voici l'échelle que nous utiliserons:
<span>const svg = d3.select("#chart-area")
</span> <span>.append("svg")
</span> <span>.attr("width", width)
</span> <span>.attr("height", height)
</span> <span>.append("g")
</span> <span>.attr("transform", <span>`translate(<span>${width / 2}</span>, <span>${height / 2}</span>)`</span>);
</span>Nous ajoutons cette échelle dès que nous avons accès à nos données et nous disons que notre entrée devrait se situer entre 0 et la plus grande valeur de notre ensemble de données, qui est le revenu du groupe le plus riche de l'année dernière Dans nos données (données [49]. Values [4]. Value). Pour le domaine, nous définissons l'intervalle dans lequel notre valeur de sortie devrait se situer entre.
Cela signifie qu'une entrée de zéro devrait nous donner une valeur de pixel de zéro, et une entrée de la plus grande valeur de nos données devrait nous donner une valeur de la moitié de la valeur de notre largeur ou de notre hauteur - la plus petite.
Notez que nous utilisons également une échelle de racine carrée ici. La raison pour laquelle nous faisons cela est que nous voulons que la zone de nos tranches de tarte soit proportionnelle au revenu de chacun de nos groupes, plutôt que du rayon. Puisque zone = πr 2 , nous devons utiliser une échelle de racine carrée pour tenir compte de cela.
Nous pouvons ensuite utiliser cette échelle pour mettre à jour la valeur OUTERRADIUS de notre générateur d'arc dans notre fonction Update ():
<span>const color = d3.scaleOrdinal(["#66c2a5", "#fc8d62", "#8da0cb","#e78ac3", "#a6d854", "#ffd92f"]); </span>
chaque fois que nos données changent, cela modifiera la valeur du rayon que nous voulons utiliser pour chacun de nos arcs.
Nous devons également supprimer notre appel à Outradius lorsque nous avons initialement configuré notre générateur d'arc, afin que nous ayons simplement cela en haut de notre fichier:
<span>const pie = d3.pie() </span> <span>.value(d => d.count) </span> <span>.sort(null); </span>
Enfin, nous devons apporter quelques modifications à cette fonction de mise à jour (), afin que tout correspond à nos nouvelles données:
<span><span><span><svg</span> width<span>="190"</span> height<span>="160"</span>></span> </span> <span><span><span><path</span> d<span>="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80"</span> stroke<span>="black"</span> fill<span>="transparent"</span>/></span> </span><span><span><span></svg</span>></span> </span>
Puisque nous n'utiliserons plus nos boutons radio, je passe juste dans l'objectif de l'année que nous voulons utiliser en appelant:
<span>const arc = d3.arc() </span> <span>.innerRadius(0) </span> <span>.outerRadius(radius); </span>
Enfin, je vais supprimer l'écouteur d'événements que nous définissons pour nos entrées de formulaire. Si tout est allé comme prévu, nous devrions avoir un tableau magnifique pour la première année de nos données:
La prochaine étape consiste à avoir notre cycle de visualisation entre différentes années, montrant comment les revenus ont changé au fil du temps. Nous le ferons en ajoutant un appel à la fonction SetInterval () de JavaScript, que nous pouvons utiliser pour exécuter un code à plusieurs reprises:
d3<span>.json("data.json", type).then(data => {
</span> <span>// Do something with our data
</span><span>});
</span>Nous créons une minuterie dans cette variable de temps, et chaque 200 ms, ce code exécutera la fonction étape (), qui mettra à jour notre graphique aux données de l'année prochaine, et incrément la minuterie de 1. Si la minuterie est à une valeur de 49 (l'année dernière dans nos données), elle se réinitialise. Cela nous donne maintenant une belle boucle qui fonctionnera en continu:
pour rendre les choses un peu plus utiles. J'ajouterai également certaines étiquettes qui nous donnent les chiffres bruts. Je remplacerai tout le code HTML dans le corps de notre fichier par ceci:
<span>const width = 540; </span><span>const height = 540; </span><span>const radius = Math.min(width, height) / 2; </span>
Nous structurons notre page ici à l'aide du système de grille de bootstrap, qui nous permet de formater soigneusement nos éléments de page dans des boîtes.
Je mettrai ensuite à jour tout cela avec jQuery chaque fois que nos données changent:
<span>const svg = d3.select("#chart-area")
</span> <span>.append("svg")
</span> <span>.attr("width", width)
</span> <span>.attr("height", height)
</span> <span>.append("g")
</span> <span>.attr("transform", <span>`translate(<span>${width / 2}</span>, <span>${height / 2}</span>)`</span>);
</span>Je vais également effectuer quelques modifications au CSS en haut de notre fichier, ce qui nous donnera une légende pour chacun de nos arcs, et également centrer notre cap:
<span>const color = d3.scaleOrdinal(["#66c2a5", "#fc8d62", "#8da0cb","#e78ac3", "#a6d854", "#ffd92f"]); </span>
Ce que nous nous retrouvons est quelque chose de plutôt présentable:
Puisqu'il est assez difficile de voir comment ces arcs ont changé au fil du temps ici, je veux ajouter des lignes de grille pour montrer à quoi ressemblait la distribution des revenus au cours de la première année de nos données:
<span>const pie = d3.pie() </span> <span>.value(d => d.count) </span> <span>.sort(null); </span>
J'utilise la méthode Array.ForEach () pour y parvenir, bien que j'aurais pu également aller avec le modèle de mise à jour général de D3 Général (join / outre / mise à jour / entre).
Je veux également ajouter une ligne pour afficher le revenu moyen aux États-Unis, que je mettrai à jour chaque année. Tout d'abord, j'ajouterai la ligne moyenne pour la première fois:
<span><span><span><svg</span> width<span>="190"</span> height<span>="160"</span>></span> </span> <span><span><span><path</span> d<span>="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80"</span> stroke<span>="black"</span> fill<span>="transparent"</span>/></span> </span><span><span><span></svg</span>></span> </span>
Ensuite, je mettrai à jour cela à la fin de notre fonction Update () chaque fois que l'année change:
<span>const arc = d3.arc() </span> <span>.innerRadius(0) </span> <span>.outerRadius(radius); </span>
Je dois noter qu'il est important pour nous d'ajouter chacun de ces cercles après notre premier appel à mettre à jour (), car sinon ils finiront par être rendus derrière chacun de chacun de chacun de chacun de chacun de chacun de chacun de chacun de chacun de chacun de chacun de chacun de chacun de chacun de chacun de chacun de chacun de chacun de chacun de chacun de chacun de chacun de chacun de chacun de chacun de chacun de chacun de chacun de chacun de chacun de chacun de chacun de chacun de chacun de chacun de chacun de chacun des Nos chemins d'arc (les couches SVG sont déterminées par l'ordre dans lequel ils sont ajoutés à l'écran, plutôt que par leur indice z).
À ce stade, nous avons quelque chose qui transmet les données avec lesquelles nous travaillons un peu plus clairement:
En dernière étape, je veux que nous ajoutions certains contrôles pour permettre à l'utilisateur de creuser dans une année particulière. Je veux ajouter un bouton play / pause , ainsi qu'un curseur an, permettant à l'utilisateur de choisir une date particulière à regarder.
Voici le HTML que j'utiliserai pour ajouter ces éléments sur l'écran:
d3<span>.json("data.json", type).then(data => {
</span> <span>// Do something with our data
</span><span>});
</span>Nous devrons ajouter des auditeurs d'événements à ces deux éléments, pour concevoir le comportement que nous recherchons.
Tout d'abord, je veux définir le comportement de notre bouton play / pause . Nous devrons remplacer le code que nous avons écrit pour notre intervalle plus tôt pour nous permettre de nous arrêter et de démarrer la minuterie par le bouton. Je suppose que la visualisation commence dans un état «pause» et que nous devons appuyer sur ce bouton pour lancer les choses.
<span>const width = 540; </span><span>const height = 540; </span><span>const radius = Math.min(width, height) / 2; </span>
chaque fois que notre bouton est cliqué, notre bloc si / else va définir un comportement différent, selon que notre bouton est un bouton "Play" ou un bouton "Pause". Si le bouton que nous cliquez sur indique "Play", nous allons changer le bouton en un bouton "Pause" et démarrer notre boucle d'intervalle. Alternativement, si le bouton est un bouton «pause», nous allons changer son texte en «lire», et nous utiliserons la fonction ClearInterval () pour empêcher la boucle d'exécuter.
Pour notre curseur, je veux utiliser le curseur fourni avec la bibliothèque JQuery UI. J'inclus cela dans notre HTML, et je vais écrire quelques lignes pour l'ajouter à l'écran:
<span>const svg = d3.select("#chart-area")
</span> <span>.append("svg")
</span> <span>.attr("width", width)
</span> <span>.attr("height", height)
</span> <span>.append("g")
</span> <span>.attr("transform", <span>`translate(<span>${width / 2}</span>, <span>${height / 2}</span>)`</span>);
</span>Ici, nous utilisons l'option de diapositive pour attacher un écouteur d'événements au curseur. Chaque fois que notre curseur est déplacé vers une autre valeur, nous mettons à jour notre minuterie vers cette nouvelle valeur, et nous exécutons notre fonction Update () cette année-là dans nos données.
Nous pouvons ajouter cette ligne à la fin de notre fonction de mise à jour () afin que notre curseur passe à la bonne année lorsque notre boucle est en cours d'exécution:
<span>const color = d3.scaleOrdinal(["#66c2a5", "#fc8d62", "#8da0cb","#e78ac3", "#a6d854", "#ffd92f"]); </span>
Je vais également ajouter une ligne à notre fonction UpdateHtml () (qui s'exécute chaque fois que notre visualisation change), qui peut ajuster la valeur de l'étiquette en fonction de l'année en cours dans les données:
<span>const pie = d3.pie() </span> <span>.value(d => d.count) </span> <span>.sort(null); </span>
Je vais jeter quelques lignes supplémentaires à notre CSS pour que tout soit un peu plus net:
<span><span><span><svg</span> width<span>="190"</span> height<span>="160"</span>></span> </span> <span><span><span><path</span> d<span>="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80"</span> stroke<span>="black"</span> fill<span>="transparent"</span>/></span> </span><span><span><span></svg</span>></span> </span>
Et là, nous l'avons - notre produit fini - une visualisation des données interactives pleinement fonctionnelles, avec tout ce qui fonctionne comme prévu.
J'espère que ce tutoriel a démontré la véritable puissance de D3, vous permettant de créer absolument tout ce que vous pouvez imaginer.
Le début de D3 à partir de zéro est toujours un processus difficile, mais les récompenses en valent la peine. Si vous souhaitez apprendre à créer vos propres visualisations personnalisées, voici quelques ressources en ligne que vous pourriez trouver utiles:
Et n'oubliez pas, si vous voulez voir la version terminée du code que j'utilisais dans l'article, vous pouvez le trouver sur notre repo GitHub.
D3, qui signifie des documents basés sur les données, est une bibliothèque JavaScript qui est largement utilisée pour créer des visualisations de données interactives. Il vous permet de lier des données arbitraires à un modèle d'objet de document (DOM), puis d'appliquer des transformations basées sur les données au document. D3 n'est pas un cadre monolithique qui cherche à fournir toutes les fonctionnalités imaginables. Au lieu de cela, il résout le nœud du problème: manipulation efficace de documents basée sur les données. Cela évite la représentation propriétaire et offre une flexibilité extraordinaire, exposant toutes les capacités des normes Web telles que HTML, SVG et CSS.
D3 est unique car il vous donne la flexibilité de créer des visualisations de données qui ne sont pas possibles avec d'autres bibliothèques. Il vous permet de manipuler directement le DOM, ce qui signifie que vous avez un contrôle complet sur l'apparence finale de votre visualisation. D3 utilise également une approche déclarative, ce qui signifie que vous définissez à quoi vous voulez que le résultat final ressemble, et D3 trouve comment y arriver.
Oui, D3 est capable de gérer des ensembles de données importants et complexes. Il a de puissantes capacités de manipulation de données qui vous permettent de travailler avec des données dans n'importe quel format. D3 dispose également de fonctions intégrées pour charger des données provenant de différentes sources, ce qui facilite l'intégration de votre infrastructure de données existante.
D3 fournit plusieurs méthodes pour ajouter de l'interactivité à vos visualisations. Vous pouvez utiliser des auditeurs d'événements pour répondre aux actions des utilisateurs telles que des clics ou des mouvements de souris, et vous pouvez utiliser des transitions pour animer les changements dans vos données. D3 prend également en charge le zoom et le panoramique, qui peuvent être utiles pour explorer de grands ensembles de données.
D3 est utilisé dans un large éventail de domaines, du journalisme à science aux affaires. Certains cas d'utilisation courants incluent la création de cartes interactives, la création de graphiques et de graphiques dynamiques, de visualiser les réseaux complexes et de créer des animations personnalisées basées sur les données.
Oui , une compréhension de base de JavaScript est nécessaire pour utiliser efficacement D3. D3 est une bibliothèque JavaScript, vous devrez donc écrire du code JavaScript pour créer vos visualisations. Cependant, l'API de D3 est conçue pour être intuitive et facile à apprendre, donc même si vous n'êtes pas un expert JavaScript, vous pouvez toujours créer des visualisations puissantes avec D3.
Oui, D3 peut être utilisé aux côtés d'autres bibliothèques ou frameworks JavaScript. Par exemple, vous pouvez utiliser D3 pour créer le composant de visualisation d'une application plus grande construite avec un framework comme React ou Angular.
Oui, D3 est bien adapté à la visualisation des données en temps réel. Il a un mécanisme de mise à jour des données flexible qui vous permet de mettre à jour facilement vos visualisations à mesure que de nouvelles données arrivent. >
Il existe de nombreuses ressources disponibles pour l'apprentissage D3. Le site officiel de D3 a une multitude de documents et d'exemples, et il existe de nombreux tutoriels et cours en ligne qui couvrent D3 en profondeur. La pratique est également essentielle - plus vous utilisez D3, plus vous deviendrez confortable avec ses concepts et API.Alors que D3 est un outil puissant, il a certaines limites. Cela nécessite une bonne compréhension des normes JavaScript et Web, qui peuvent être un obstacle pour les débutants. D3 laisse également beaucoup de décisions au développeur, ce qui peut être écrasant si vous ne savez pas par où commencer. Enfin, alors que D3 est capable de gérer de grands ensembles de données, les performances peuvent devenir un problème avec des visualisations très grandes ou complexes.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
