Apprenez à créer un graphique en courbes à l'aide de D3.js

Utilisez la puissance de D3.js pour dessiner de belles représentations de vos données.

D3.js est une bibliothèque JavaScript open source utilisée pour créer de belles représentations de données que nous pouvons afficher dans n'importe quel navigateur moderne. En utilisant D3.js, nous pouvons créer différents types de graphiques et de graphiques à partir de nos données.

Dans ce tutoriel, nous allons créer un graphique linéaire affichant l'indice des prix Bitcoin des six derniers mois. Nous allons extraire des données d'une API externe et afficher un graphique en courbes avec des étiquettes et un axe à l'intérieur du DOM.

Nous avons également créé un cours gratuit D3.js sur Scrimba. Vérifiez le ici.

Commencer

Tout d'abord, nous allons importer la bibliothèque D3.js directement depuis le CDN dans notre HTML.

Nous avons également ajouté une balise à l'intérieur de notre HTML pour créer le graphique en courbes à l'intérieur en utilisant D3.js

Passons maintenant à l'écriture de notre code JavaScript. Tout d'abord, nous voulons charger nos données de l'indice des prix Bitcoin à partir d'une API externe une fois que le DOM a été chargé.

Récupérer des données

var api = '//api.coindesk.com/v1/bpi/historical/close.json?start=2017-12-31&end=2018-04-01';
document.addEventListener("DOMContentLoaded", function(event) { fetch(api) .then(function(response) { return response.json(); }) .then(function(data) { //DO SOMETHING WITH DATA })});

Dans le code ci-dessus, nous utilisons la fetchméthode pour obtenir les données d'une API externe. Nous l'analysons ensuite en utilisant la .json()méthode.

Nous voulons maintenant convertir ces données en paires clé / valeur afin qu'elles soient au format date:price. Pour cela, nous allons envoyer nos données à une autre fonction qui les analysera et les renverra sous la forme souhaitée.

Analyser les données

.....then(function(data) { var parsedData = parseData(data) })
function parseData(data) { var arr = []; for (var i in data.bpi) { arr.push( { date: new Date(i), //date value: +data.bpi[i] //convert string to number }); } return arr;}

Nous transmettons nos données à une fonction parseDataqui renvoie un autre tableau d'objets. Chaque objet contient une date et le prix du bitcoin à cette date particulière.

Une fois que nous avons les données dans notre format requis, nous enverrons ces données à la drawChartfonction dans laquelle tout le code restant sera écrit en utilisant D3.js pour rendre le graphique en courbes.

.....then(function(data) { var parsedData = parseData(data); drawChart(parsedData);})

Sélectionnez l'élément SVG

Dans la drawChartfonction, nous sélectionnons tout d'abord notre élément SVG et lui fournissons un style.

function drawChart(data) {
 var svgWidth = 600, svgHeight = 400; var margin = { top: 20, right: 20, bottom: 30, left: 50 }; var width = svgWidth - margin.left - margin.right; var height = svgHeight - margin.top - margin.bottom;
 var svg = d3.select('svg') .attr("width", svgWidth) .attr("height", svgHeight);...

Dans le code ci-dessus, nous définissons la largeur et la hauteur du conteneur SVG en le sélectionnant d'abord à l'aide de la select()méthode, puis en utilisant la attr()méthode pour attribuer les attributs.

Nous avons également défini des marges et utilisons leurs valeurs pour calculer les attributs de largeur et de hauteur du conteneur SVG. Ces valeurs de marge nous aideront plus tard à positionner et à afficher notre graphique correctement.

En utilisant CSS, nous avons donné des bordures à notre conteneur SVG:

 .line-chart { border: 1px solid lightgray; }

Jusqu'à présent, nous n'avons encore rien dans notre DOM:

Ensuite, nous allons créer un élément de groupe pour contenir notre graphique linéaire, notre axe et nos étiquettes.

Créer et transformer un élément de groupe

...var g = svg.append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")" );

Le regroupement d'éléments permet d'organiser ensemble des éléments similaires ou liés. Ici, après avoir rendu un élément de groupe, nous lui fournissons une transformation.

D3 nous offre différentes options pour transformer nos éléments. Dans le code ci-dessus, nous utilisons la translatepropriété pour repositionner notre élément de groupe avec des marges à gauche et en haut.

Ajouter des échelles

Maintenant, nous voulons ajouter des échelles à notre graphique.

var x = d3.scaleTime().rangeRound([0, width]);
var y = d3.scaleLinear().rangeRound([height, 0]);

Comme nous le savons, nos données se composent de dates et de la valeur du Bitcoin à ces dates. Par conséquent, nous pouvons supposer que l'axe des x contiendrait les dates et l'axe des y contiendrait des valeurs. C'est ainsi que nous pouvons voir la variation du graphique linéaire par rapport au temps.

Ainsi, dans l'extrait de code ci-dessus, nous avons créé une échelle de temps de type sur l'axe des x et de type linéaire sur l'axe des y. Nous fournissons également ces échelles avec les plages selon la largeur et la hauteur de notre conteneur SVG.

Créer une ligne

Passons maintenant à la définition de notre ligne en utilisant la d3.lineméthode. Nous définirons les attributs x et y de la ligne en passant des fonctions anonymes et en retournant l'objet date et la valeur bitcoin pour ce jour particulier.

var line = d3.line() .x(function(d) { return x(d.date)}) .y(function(d) { return y(d.value)}) x.domain(d3.extent(data, function(d) { return d.date })); y.domain(d3.extent(data, function(d) { return d.value }));

Ajouter des axes

Nous allons maintenant ajouter nos axes gauche et inférieur à l'intérieur de notre élément de groupe pour le graphique en courbes. L'axe de gauche représentera la valeur du bitcoin tandis que l'axe du bas affiche la date correspondante.

g.append("g") .attr("transform", "translate(0," + height + ")") .call(d3.axisBottom(x)) .select(".domain") .remove();

In the above code, we are appending a group element inside our main group and translating it at the very bottom our container. Then, we pass d3.axisBottom method in the call function where d3.axisBottom takes the parameter of x which is defined in the Add Scales section.

g.append("g") .call(d3.axisLeft(y)) .append("text") .attr("fill", "#000") .attr("transform", "rotate(-90)") .attr("y", 6) .attr("dy", "0.71em") .attr("text-anchor", "end") .text("Price ($)");

Similar to the bottom axis, we append another group element and then call on it the d3.axisLeft method which takes the parameter of y. Then, we also style our axis by assigning it different attributes and a label.

If we save and refresh the page, we can see our axes being rendered inside the DOM:

Append a Path

In the last step, we will be appending a path inside our main group element. This path will actually draw the line chart as per the values of the data.

We pass our dataset using the datum method and then set the attributes of fill color, stroke color, and width. In the end, we set the attribute of d which actually gives instruction to the SVG path about where to connect the points of the path.

g.append("path").datum(data).attr("fill", "none").attr("stroke", "steelblue").attr("stroke-linejoin", "round").attr("stroke-linecap", "round").attr("stroke-width", 1.5).attr("d", line);

Here is the final result:

Conclusion

Congratulations! We have successfully created the line chart using D3.js. You can check out the official documentation of D3.js to learn more about different charts and graphs you can create.

If you’re interested in learning more about D3.js, be sure to check out our free course on Scrimba.

I am Sohaib Nehal. I am a Full-Stack Web Application Developer. You can reach me at [email protected] or on Twitter @Sohaib_Nehal. Thank you :-)