TOC

Prise en main de la visualisation de données à l’aide de JavaScript et de la bibliothèque D3

introduction

  • D3.js *, ou D3, est une bibliothèque JavaScript. Son nom signifie D ata - D riven D ocuments (3 «D») et est connu sous le nom de bibliothèque de visualisation de données interactive et dynamique pour le Web.

Initialement publié en février 2011, la version 4 de D3 a été publiée en juin 2016. Au moment de la rédaction de ce document, la dernière version stable est la version 4.4, qui est constamment mise à jour.

D3 tire parti du format * Scalable Vector Graphic * ou * SVG *, qui vous permet de restituer des formes, des lignes et des remplissages qui peuvent être agrandis ou réduits sans perte de qualité.

Ce didacticiel vous guidera tout au long de la création d’un graphique à barres à l’aide de la bibliothèque JavaScript D3.

Conditions préalables

Pour tirer le meilleur parti de ce didacticiel, vous devez vous familiariser avec le langage de programmation JavaScript ainsi que vos connaissances en CSS et en HTML.

Bien que vous utilisiez CSS pour style D3, il est intéressant de noter que de nombreux CSS standard fonctionnant en HTML fonctionnent différemment sur SVG - autrement dit, vous utiliserez + stroke + au lieu de + border + et ` + remplir + au lieu de + couleur + `. Pour en savoir plus, vous pouvez lire l’article Mozilla Developer Network sur SVG et CSS.

Nous utiliserons un éditeur de texte et un navigateur Web. À des fins de test, il est recommandé d’utiliser un outil pour examiner et déboguer JavaScript, HTML et CSS, tel que Firefox Developer Tools ou https: / /developer.chrome.com/devtools[Chrome DevTools].

Étape 1 - Créer des fichiers et référencer D3

Commençons par créer un répertoire pour conserver tous nos fichiers. Vous pouvez l’appeler comme vous le souhaitez, nous l’appellerons ici. Une fois créé, accédez au répertoire.

mkdir
cd

Pour utiliser les fonctionnalités de D3, vous devez inclure le fichier + d3.js + dans votre page Web. Il compte environ 16 000 lignes et 500 Ko.

Utilisons + curl pour télécharger le fichier dans votre répertoire.

Pour télécharger une version compactée plus adaptée à votre projet, tapez:

curl https://d3js.org/d3.v4.min.js --output d3.min.js

Si vous envisagez de lire le code D3, il est probablement préférable d’obtenir la version non compressée avec des espaces conviviaux en tapant:

curl https://d3js.org/d3.v4.js --output d3.js

Nous utiliserons le fichier + d3.min.js tout au long de ce didacticiel, mais si vous optez pour une version lisible par un humain, faites référence à` + d3.js` dans votre fichier HTML à la place.

D3 version 4 étant modulaire, vous pouvez également réduire la taille du fichier en intégrant uniquement les modules que vous utiliserez.

Avec D3 téléchargé, configurons nos fichiers CSS et HTML. Vous pouvez choisir l’éditeur de texte sur lequel vous souhaitez travailler, tel que + nano +. Nous commencerons par le fichier CSS + style.css +, afin que nous puissions immédiatement le lier à partir de notre fichier HTML.

nano style.css

Nous allons commencer par une déclaration CSS standard pour styler la page à une hauteur de 100%, sans marge.

html, body {
 margin: 0;
 height: 100%;
}

Vous pouvez enregistrer et fermer le fichier CSS pour l’instant.

Nous allons ensuite créer notre fichier JavaScript, que nous nommerons + barchart.js + car nous allons créer un graphique à barres pour cet exemple. Ce fichier contient la majorité de notre travail en D3, sur lequel nous commencerons à travailler dans la prochaine étape. Puisque nous n’avons pas besoin d’ouvrir le fichier pour le moment et que nous pouvons utiliser la commande + touch +.

touch barchart.js

Pour l’instant, connectons tous ces éléments à un fichier HTML, que nous appellerons + barchart.html +:

nano barchart.html

Nous pouvons configurer ce fichier comme la plupart des autres fichiers HTML, et à l’intérieur, nous référencerons les fichiers + style.css + et + barchart.js + que nous venons de créer, ainsi que le script + d3.min.js + .

barchart.html

<!DOCTYPE html>
<html lang="en">
 <head>
   <meta charset="utf-8">
   <title>Bar Chart</title>
   <link rel="stylesheet" type="text/css" href="style.css">

   <!-- Alternatively use d3.js here -->
   <script type="text/javascript" src="d3.min.js"></script>

 </head>

 <body>
   <script type="text/javascript" src="barchart.js"></script>
 </body>
</html>

Le fichier HTML peut être enregistré et fermé pour l’instant.

Étape 2 - Configurer le SVG en JavaScript

Nous pouvons maintenant ouvrir le fichier + barchart.js + avec notre éditeur de texte de choix:

nano barchart.js

Commençons par ajouter un tableau de nombres que nous utiliserons comme base pour notre diagramme à barres:

barchart.js

var dataArray = [23, 13, 21, 14, 37, 15, 18, 34, 30];

Ensuite, nous devons créer l’élément SVG. C’est ici que nous placerons toutes nos formes. Dans D3, nous utilisons + d3.select + pour indiquer au navigateur de rechercher des éléments.

Nous pouvons le faire avec la simple ligne + d3.select (" body "). Append (" svg "); +, mais il serait préférable que nous la déclarions comme une variable afin que nous puissions facilement la référencer dans notre code plus tard.

barchart.js

var dataArray = [23, 13, 21, 14, 37, 15, 18, 34, 30];

Si nous chargeons maintenant + barchart.html + dans le navigateur Web de votre choix, vous devriez pouvoir vérifier les sites DOM ou * Document Object Model * avec nos outils de développement et passez la souris sur la boîte SVG. Selon votre navigateur, il peut être assez petit.

image: http: //assets.digitalocean.com/articles/eng_javascript/d3-barchart/d3-svg-dom.png [SVG D3 visible dans le DOM]

De retour dans notre fichier JavaScript, nous pouvons chaîner * attributs * au SVG pour en faire toute la hauteur et la largeur de la page Web. Nous allons utiliser + .attr () + pour attribut. Bien que nous puissions garder tout cela sur une seule ligne, il est un peu plus lisible de le casser. Assurez-vous de déplacer votre point-virgule jusqu’à la fin de la déclaration de variable.

barchart.js

var dataArray = [23, 13, 21, 14, 37, 15, 18, 34, 30];

var svg = d3.select("body").append("svg")

Si vous rechargez la page dans votre navigateur, vous devriez voir un rectangle occupant tout l’écran lorsque vous passez la souris sur le DOM.

Étape 3 - Ajout de rectangles

Avec notre fichier SVG prêt à l’emploi, nous pouvons commencer à ajouter des rectangles de notre ensemble de données au fichier JavaScript.

barchart.js

var dataArray = [23, 13, 21, 14, 37, 15, 18, 34, 30];

var svg = d3.select("body").append("svg")
         .attr("height","100%")
         .attr("width","100%");

Comme avec + d3.select ci-dessus, nous demandons au navigateur de rechercher des éléments. Cette fois, c’est pour un tableau de rectangles. Comme il s’agit d’un tableau, nous utilisons + d3.selectAll + et + d3.selectAll (" rect ") + car il s’agit d’un tableau de rectangles. Si le navigateur trouve des rectangles, il les retournera dans une sélection. S’il est vide, il sera retourné vide. Avec D3, vous devez d’abord sélectionner les éléments sur lesquels vous allez agir.

Nous associons ce tableau rectangle aux données stockées dans + dataArray + avec + .data (dataArray) +.

Pour ajouter un rectangle à chaque élément de la sélection (qui correspond au tableau de données), nous ajouterons également + .enter (). Append (" rect "); + pour ajouter les rectangles. Dans cet exemple, il y aura 9 rectangles pour correspondre aux 9 nombres du tableau.

Si vous rechargez votre page maintenant, vous ne verrez pas encore de rectangles, mais si vous vérifiez le DOM, vous verrez 9 rectangles définis ici.

image: http: //assets.digitalocean.com/articles/eng_javascript/d3-barchart/DOM-rectangles.png [rectangles D3 affichés dans le DOM]

Nous n’avons pas encore défini d’attributs pour les rectangles afin de les rendre visibles, ajoutons donc ceux-ci.

Définition d’attributs pour les formes

Nous pouvons ajouter des attributs aux formes de la même manière que nous avons défini les attributs pour le SVG, en utilisant + .attr () +. Chaque forme dans D3 aura des attributs différents en fonction de la façon dont ils sont définis et dessinés.

Nos rectangles auront 4 attributs:

  • + (" height "," ") + pour la hauteur des rectangles

  • + (" width "," ") + pour la largeur des rectangles

  • + (" x "," ") + pour leur distance du côté gauche de la fenêtre du navigateur

  • + (" y "," ") + pour leur distance du haut de la fenêtre du navigateur

Donc, si nous voulons des rectangles mesurant par exemple 250 pixels de haut, 40 pixels de large, 25 pixels du côté gauche du navigateur et 50 pixels du haut, nous écrirons notre code comme suit:

barchart.js

var dataArray = [23, 13, 21, 14, 37, 15, 18, 34, 30];

var svg = d3.select("body").append("svg")
         .attr("height","100%")
         .attr("width","100%");

svg.selectAll("rect")
   .data(dataArray)
   .enter().append("rect")

Si nous actualisons le navigateur, nous verrons tous les rectangles se chevaucher:

image: http: //assets.digitalocean.com/articles/eng_javascript/d3-barchart/d3-overlapping-rectangles.png [Les rectangles D3 qui se chevauchent en noir par défaut]

Par défaut, les formes dans D3 sont remplies en noir, mais nous pouvons les modifier ultérieurement car nous devons d’abord aborder le positionnement et la taille des rectangles.

Faire en sorte que les rectangles reflètent les données

Actuellement, tous les rectangles de notre tableau ont la même position le long de l’axe des abscisses et ne représentent pas les données en termes de hauteur.

Pour modifier la position et la taille des rectangles, nous devrons introduire functions pour certains de nos attributs. L’ajout de fonctions rendra la valeur dynamique plutôt que manuelle.

Commençons par modifier l’attribut + x +. Actuellement, cette ligne de code ressemble à ceci:

       .attr("x","25")

Nous allons remplacer le chiffre de 25 pixels par une fonction. Nous allons passer deux variables définies par D3 à + ​​function () +, représentant le point de données et l’index. L’index nous indique la position du point de données dans le tableau. C’est la convention d’utiliser '+ d + pour le point de données et + i + pour l’index, comme dans + function (d, i) + `, mais vous pouvez utiliser les variables de votre choix.

JavaScript va parcourir it + d + et + i + . Laissons-le ajouter un espacement pour chaque index sur lequel il itère, de sorte que chaque rectangle soit espacé. Pour ce faire, on peut multiplier l’indice `+ i + par un certain nombre de pixels. Nous allons utiliser 60 pour le moment, mais vous pouvez choisir l’espacement qui vous convient le mieux. Notre nouvelle ligne pour l’attribut X-axis ressemble maintenant à ceci:

       .attr("x", function(d, i) {return i * 60;})

Cependant, si nous exécutons le code maintenant, nous verrons que les rectangles sont alignés sur le côté gauche du navigateur, ajoutons donc un espacement supplémentaire, disons à 25 pixels du bord. Maintenant, notre code complet devrait ressembler à ceci:

barchart.js

var dataArray = [23, 13, 21, 14, 37, 15, 18, 34, 30];

var svg = d3.select("body").append("svg")
         .attr("height","100%")
         .attr("width","100%");

svg.selectAll("rect")
   .data(dataArray)
   .enter().append("rect")
         .attr("height","250")
         .attr("width","40")

         .attr("y","50");

Et si nous actualisons le navigateur à ce stade, nous verrons quelque chose qui ressemble à ceci:

image: http: //assets.digitalocean.com/articles/eng_javascript/d3-barchart/9-d3-rectangles.png [D3 rectangulaires espacés]

Nous avons maintenant nos rectangles espacés le long de l’axe des X, représentatifs de chacun des éléments de notre tableau. Ensuite, faisons en sorte que la hauteur des rectangles reflète les données du tableau.

Nous allons maintenant utiliser l’attribut + height + et ajouter une fonction similaire à celle que nous avons ajoutée à l’attribut + x +. Commençons par passer les variables + d + et + i + à + ​​fonction +, et retournons + d +. Rappelons que + d + représente un point de données.

         .attr("height", function(d, i) {return (d)})

Si vous exécutez le code maintenant, vous remarquerez deux choses. Premièrement, les rectangles sont plutôt petits et, deuxièmement, ils sont attachés au haut du graphique plutôt qu’au bas.

image: http: //assets.digitalocean.com/articles/eng_javascript/d3-barchart/d3-chart-top-to-bottom.png [Diagramme à barres D3 de haut en bas]

Pour remédier à la petite taille des rectangles, multiplions le + d + qui est renvoyé:

         .attr("height", function(d, i) {return (d * 10)})

Maintenant, la taille des rectangles est plus grande, mais ils sont toujours affichés de haut en bas.

Les navigateurs lisent généralement les pages Web de haut en bas à droite, tandis que nous lisons les graphiques à barres de bas en haut. Pour repositionner les rectangles, nous allons modifier l’attribut + y + pour soustraire l’espace au-dessus.

Encore une fois, nous utiliserons + function (d, i) +, et nous renverrons une valeur Y supérieure à la valeur la plus élevée de notre graphique à barres, soit 400. Nous allons soustraire la hauteur renvoyée de «+ (d * 10) +» de 400, de sorte que notre ligne ressemble maintenant à ceci:

         .attr("y", function(d, i) {return 400 - (d * 10)});

Regardons notre code JavaScript complet:

barchart.js

var dataArray = [23, 13, 21, 14, 37, 15, 18, 34, 30];

var svg = d3.select("body").append("svg")
         .attr("height","100%")
         .attr("width","100%");

svg.selectAll("rect")
   .data(dataArray)
   .enter().append("rect")

         .attr("width","40")
         .attr("x", function(d, i) {return (i * 60) + 25})

À ce stade, lorsque nous rechargerons notre page, nous verrons un graphique à barres que nous pouvons lire de bas en haut:

image: http: //assets.digitalocean.com/articles/eng_javascript/d3-barchart/d3-bar-chart-black.png [Diagramme à barres D3 en noir]

Maintenant, nous pouvons travailler sur le style du graphique.

Étape 4 - Styling avec D3

Nous utiliserons notre fichier CSS pour styliser nos formes D3, mais pour faciliter ce travail, nous allons d’abord attribuer à nos rectangles un nom de classe dans le fichier JavaScript que nous pouvons référencer dans notre fichier CSS.

Ajouter une classe revient à ajouter n’importe quel attribut en utilisant la notation par points. Nous appellerons la classe + bar +, car il s’agit d’un diagramme à barres, mais nous pouvons l’appeler comme nous le voulons tant que toutes les références font référence au même nom. Notre syntaxe ressemblera à ceci:

         .attr("class", "bar")

Nous pouvons ajouter cet attribut où bon nous semble. Le garder comme premier attribut peut faciliter la référence dans notre fichier CSS.

barchart.js

var dataArray = [23, 13, 21, 14, 37, 15, 18, 34, 30];

var svg = d3.select("body").append("svg")
         .attr("height","100%")
         .attr("width","100%");

svg.selectAll("rect")
   .data(dataArray)
   .enter().append("rect")

         .attr("height", function(d, i) {return (d * 10)})
         .attr("width","40")
         .attr("x", function(d, i) {return (i * 60) + 25})
         .attr("y", function(d, i) {return 400 - (d * 10)});

Passons maintenant à notre fichier + style.css +, qui ressemble actuellement à ceci:

style.css

html, body {
 margin: 0;
 height: 100%
}

Nous pouvons commencer à modifier nos rectangles en changeant leur couleur de remplissage en faisant référence à la classe + bar + que nous venons de créer:

style.css

html, body {
 margin: 0;
 height: 100%
}

Ici, nous avons rendu les rectangles bleus, et nous pouvons aussi leur assigner un code couleur hex, comme dans:

.bar {
 fill: #0080FF
}

À ce stade, nos rectangles ressemblent à ceci:

image: http: //assets.digitalocean.com/articles/eng_javascript/d3-barchart/d3-bar-chart-blue-fill.png [Remplissage bleu du diagramme à barres D3]

Nous pouvons donner des valeurs supplémentaires aux rectangles, tels que + stroke + pour délimiter les rectangles dans une couleur particulière, et un + stroke-width +:

style.css

html, body {
 margin: 0;
 height: 100%
}

.bar {
 fill: #0080FF;


}

Cela donnera à nos rectangles un contour noir de 5 pixels de large.

image: http: //assets.digitalocean.com/articles/eng_javascript/d3-barchart/bar-chart-blue-fill-black-stroke.png [Diagramme à barres D3 bleu remplir noir 5px accident vasculaire cérébral]

De plus, nous pouvons ajouter une touche d’interactivité à notre graphique en ajoutant un style pour que la couleur de la barre change au survol de la souris:

.bar:hover {
 fill: red
}

Maintenant, lorsque nous passons la souris sur l’un des rectangles, ce rectangle particulier change de couleur rouge:

image: http: //assets.digitalocean.com/articles/eng_javascript/d3-barchart/d3-red-hover-bar-chart.png [Couleur de l’histogramme D3 interactive]

Vous pouvez également attribuer un style aux formes de votre fichier JavaScript en ajoutant des attributs supplémentaires. Dans le bloc rectangle, nous les écrirons comme les autres attributs + .attr () +. Ainsi, l’ajout d’un trait noir autour des rectangles sera écrit comme suit: «+ .attr (" trait "," noir ") +`. Ajoutons également une largeur de trait et une largeur de 5 pixels et veillez à déplacer le point-virgule vers le bas.

barchart.js

...
svg.selectAll("rect")
   .data(dataArray)
   .enter().append("rect")
         .attr("class", "bar")
         .attr("height", function(d, i) {return (d * 10)})
         .attr("width","40")
         .attr("x", function(d, i) {return (i * 60) + 25})
         .attr("y", function(d, i) {return 400 - (d * 10)})

         ;

Vous pouvez choisir le style de vos formes et dans quel fichier. Dans cet exemple, nous allons travailler dans le fichier + style.css + et le garder limité aux couleurs de remplissage et au survol:

style.css

html, body {
 margin: 0;
 height: 100%
}

.bar {
 fill: #0080FF
}

.bar:hover {
 fill: #003366
}

Lorsque vous travaillez avec des couleurs sur le Web, il est important de garder votre public à l’esprit et de travailler pour inclure des couleurs aussi universellement accessibles que possible. Pour en savoir plus sur les considérations relatives à l’accessibilité des couleurs, visitez Acessibility & Me.

Étape 5 - Ajout d’étiquettes

Notre dernière étape consiste à ajouter des marqueurs quantifiables à notre graphique sous forme d’étiquettes. Ces étiquettes correspondront aux numéros de notre tableau.

Ajouter du texte revient à ajouter les formes de rectangle décrites précédemment. Nous devrons sélectionner le texte, puis l’ajouter au SVG. Nous allons également le lier au + dataArray + que nous avons créé. Au lieu de " rect ", nous utiliserons " text ", mais le format général est similaire à celui que nous avons utilisé pour ajouter les rectangles ci-dessus. Nous allons ajouter ces lignes au bas de notre fichier + barchart.js +.

barchart.js

var dataArray = [23, 13, 21, 14, 37, 15, 18, 34, 30];

var svg = d3.select("body").append("svg")
         .attr("height","100%")
         .attr("width","100%");

svg.selectAll("rect")
   .data(dataArray)
   .enter().append("rect")
         .attr("class", "bar")
         .attr("height", function(d, i) {return (d * 10)})
         .attr("width","40")
         .attr("x", function(d, i) {return (i * 60) + 25})
         .attr("y", function(d, i) {return 400 - (d * 10)});

Lorsque nous actualisons votre navigateur, aucun texte ne s’affiche sur la page, mais nous le reverrons dans votre DOM:

image: http: //assets.digitalocean.com/articles/eng_javascript/d3-barchart/DOM-text.png [Texte en D3 affiché dans le DOM]

Si vous passez la souris sur les lignes de texte dans le DOM, vous verrez que tout le texte se trouve en haut de la page, où X et Y sont égaux à 0. Nous allons modifier la position en utilisant les mêmes formules de fonction que nous avons utilisées pour les rectangles en ajoutant des attributs.

barchart.js

...
svg.selectAll("text")
   .data(dataArray)
   .enter().append("text")
   .text(function(d) {return d})

         ;

Lorsque vous chargez la page Web maintenant, des chiffres flottent au-dessus des barres.

image: http: //assets.digitalocean.com/articles/eng_javascript/d3-barchart/d3-labels-bar-chart.png [libellés de texte D3 avec un graphique à barres]

Il convient de noter que, comme il s’agit de SVG et non d’une image, vous pouvez sélectionner le texte comme pour tout autre texte affiché sur une page.

À partir de là, vous pouvez commencer à repositionner les nombres en modifiant les formules des fonctions. Vous voudrez peut-être les laisser flotter au-dessus des barres, par exemple:

barchart.js

...
svg.selectAll("text")
   .data(dataArray)
   .enter().append("text")
   .text(function(d) {return d})
         .attr("x", function(d, i)
         .attr("y", function(d, i) ;

Vous pouvez également laisser les nombres flotter sur les rectangles eux-mêmes en modifiant leur position en fonction de l’axe des ordonnées. Nous voudrons également rendre cela plus lisible, ajoutons donc une classe à laquelle nous pouvons accéder à partir de notre fichier + style.css +.

barchart.js

...
svg.selectAll("text")
   .data(dataArray)
   .enter().append("text")
   .text(function(d) {return d})

         .attr("x", function(d, i) {return (i * 60) + 36})
         .attr("y", function(d, i) ;

Dans notre fichier + style.css +, nous allons rendre le texte blanc et sans serif, en ajoutant les lignes suivantes au bas de notre fichier.

style.css

...
.text {
 fill: white;
 font-family: sans-serif
}

image: http: //assets.digitalocean.com/articles/eng_javascript/d3-barchart/d3-white-text-labels.png [libellés de texte D3 en blanc avec un graphique à barres]

Vous pouvez modifier le texte autant de fois que vous le souhaitez grâce au positionnement et au style. Par exemple, vous pouvez également modifier l’attribut + font-size dans le fichier` + style.css`.

Code terminé et améliorations du code

À ce stade, vous devriez disposer d’un diagramme à barres entièrement fonctionnel rendu dans la bibliothèque JavaScript D3. Regardons tous nos fichiers de code.

barchart.html

<!DOCTYPE html>
<html lang="en">
 <head>
   <meta charset="utf-8">
   <title>Bar Chart</title>

   <!-- Reference style.css -->
   <link rel = "stylesheet" type="text/css" href="style.css">

   <!-- Reference minified version of D3 -->
   <script type="text/javascript" src="d3.min.js"></script>
 </head>

 <body>
   <script type="text/javascript" src="barchart.js"></script>
 </body>
</html>

style.css

html, body {
 margin: 0;
 height: 100%
}

/*Rectangle bar class styling*/

.bar {
 fill: #0080FF
}

.bar:hover {
 fill: #003366
}

/*Text class styling*/

.text {
 fill: white;
 font-family: sans-serif
}

barchart.js

// Create data array of values to visualize
var dataArray = [23, 13, 21, 14, 37, 15, 18, 34, 30];

// Create variable for the SVG
var svg = d3.select("body").append("svg")
         .attr("height","100%")
         .attr("width","100%");

// Select, append to SVG, and add attributes to rectangles for bar chart
svg.selectAll("rect")
   .data(dataArray)
   .enter().append("rect")
         .attr("class", "bar")
         .attr("height", function(d, i) {return (d * 10)})
         .attr("width","40")
         .attr("x", function(d, i) {return (i * 60) + 25})
         .attr("y", function(d, i) {return 400 - (d * 10)});

// Select, append to SVG, and add attributes to text
svg.selectAll("text")
   .data(dataArray)
   .enter().append("text")
   .text(function(d) {return d})
          .attr("class", "text")
          .attr("x", function(d, i) {return (i * 60) + 36})
          .attr("y", function(d, i) {return 415 - (d * 10)});

Ce code fonctionne pleinement, mais vous pouvez faire beaucoup pour améliorer le code. Par exemple, vous pouvez utiliser l’élément de groupe SVG pour regrouper des éléments SVG, ce qui vous permet de modifier votre texte et vos rectangles avec moins de lignes de code.

Vous pouvez également accéder aux données de différentes manières. Nous avons utilisé un tableau pour stocker nos données, mais vous souhaiterez peut-être visualiser les données auxquelles vous avez déjà accès, ce qui peut être considérablement plus volumineux que ce qui fonctionnerait bien dans un tableau. D3 vous permettra de travailler avec plusieurs types de fichiers de données différents:

  • HTML

  • JSON

  • Texte brut

  • CSV (valeurs séparées par des virgules)

  • TSV (valeurs séparées par des tabulations)

  • XML

Par exemple, vous pouvez insérer un fichier JSON dans le répertoire de votre site Web et le connecter au fichier JavaScript.

d3.json("myData.json", function(json) {
// code for D3 charts in here
});

Vous pouvez également combiner la bibliothèque D3 avec d’autres fonctionnalités interactives que vous connaissez peut-être déjà avec JavaScript vanille.

Conclusion

Ce tutoriel a permis de créer un diagramme à barres dans la bibliothèque JavaScript D3. Pour en savoir plus sur d3.js, visitez l’API D3 sur GitHub.

D’autres langages de programmation offrent d’autres moyens de visualiser des données qui ne se limitent pas aux navigateurs Web. À partir de là, vous pouvez apprendre à utiliser matplotlib pour tracer des données avec Python.

Related