D3.js - Graphiques

Un graphique est un espace plat à 2 dimensions représenté sous la forme d'un rectangle. Les graphiques ont un espace de coordonnées où les coordonnées x = 0 et y = 0 se trouvent en bas à gauche. Selon l'espace de coordonnées cartésiennes mathématiques, les graphiques ont la coordonnée X croissante de gauche à droite et la coordonnée Y de bas en haut.

Lorsque nous parlons de dessiner un cercle avec x = 30 et y = 30 coordonnées, nous allons 30 unités du bas à gauche vers la droite, puis nous montons 30 unités.

Espace de coordonnées SVG

L'espace de coordonnées SVG fonctionne de la même manière qu'un espace de coordonnées de graphique mathématique, à l'exception de deux caractéristiques importantes -

L'espace de coordonnées SVG a les coordonnées x = 0 et y = 0 en haut à gauche.
L'espace de coordonnées SVG a la coordonnée Y croissant de haut en bas.

Graphique de l'espace de coordonnées SVG

Lorsque nous parlons de dessiner un cercle avec x = 30 et y = 30 coordonnées dans l'espace de coordonnées SVG, nous allons 30 unités du haut à gauche vers la droite, puis nous descendons de 30 unités vers le haut. Il est défini comme suit.

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

Considérez l'élément SVG sous la forme d'un graphique de 200 unités de largeur et 200 unités de hauteur. Nous savons maintenant que les coordonnées zéro X et Y sont en haut à gauche. Nous savons également maintenant que lorsque la coordonnée Y augmente, elle se déplacera du haut vers le bas de notre graphique. Vous pouvez styliser les éléments SVG comme indiqué ci-dessous.

var svgContainer = d3
   .select("body").append("svg")
   .attr("width", 200)
   .attr("height", 200)
   .style("border", "1px solid black");

Exemple de graphique

Prenons un exemple du graphe linéaire.

Line Graph- Un graphique linéaire est utilisé pour visualiser la valeur de quelque chose au fil du temps. Il compare deux variables. Chaque variable est tracée le long d'un axe. Un graphique linéaire a un axe vertical et un axe horizontal.

Dans cet exemple de graphique, nous pouvons prendre les enregistrements de fichier csv comme la croissance de la population des États indiens de 2006 à 2017. Commençons par créer un data.csv pour afficher les enregistrements de population.

Créez un nouveau fichier csv dans votre dossier D3 -

year,population
2006,40
2008,45
2010,48
2012,51
2014,53
2016,57
2017,62

Maintenant, enregistrez le fichier et effectuez les étapes suivantes pour dessiner un graphique linéaire dans D3. Passons en revue chaque étape en détail.

Step 1 - Adding styles - Ajoutons un style au line classe en utilisant le code ci-dessous.

.line {
   fill: none;
   stroke: green;
   stroke-width: 5px;
}

Step 2 - Define variables - Les attributs SVG sont définis ci-dessous.

var margin = {top: 20, right: 20, bottom: 30, left: 50},
   width = 960 - margin.left - margin.right,
   height = 500 - margin.top - margin.bottom;

Ici, la première ligne définit les quatre marges, qui entourent le bloc où le graphique est positionné.

Step 3 - Define line - Tracez une nouvelle ligne en utilisant le d3.line() fonction, illustrée ci-dessous.

var valueline = d3.line()
   .x(function(d) { return x(d.year); })
   .y(function(d) { return y(d.population); });

Ici, Year représente les données des enregistrements de l'axe X et la population fait référence aux données de l'axe Y.

Step 4 - Append SVG attributes - Ajoutez des attributs SVG et des éléments de groupe en utilisant le code ci-dessous.

var svg = d3.select("body").append("svg")
   .attr("width", width + margin.left + margin.right)
   .attr("height", height + margin.top + margin.bottom)
   .append("g").attr("transform",
      "translate(" + margin.left + "," + margin.top + ")");

Ici, nous avons ajouté les éléments de groupe et appliqué la transformation.

Step 5 - Read data - Maintenant, nous pouvons lire les données de notre ensemble de données data.csv.

d3.csv("data.csv", function(error, data) {
   if (error) throw error;
}

Ici, le data.csv n'est pas présent, il renvoie une erreur.

Step 6 - Format data - Maintenant, formatez les données en utilisant le code ci-dessous.

data.forEach(function(d) {
   d.year = d.year;
   d.population = +d.population;
});

Ce code ci-dessus garantit que toutes les valeurs extraites du fichier csv sont définies et formatées correctement. Chaque ligne se compose de deux valeurs - une valeur pour «année» et une autre valeur pour «population». La fonction extrait les valeurs de «année» et de «population» une ligne à la fois.

Step 7 - Set scale range - Une fois les données formatées, vous pouvez définir la plage d'échelle pour X et Y.

x.domain(d3.extent(data, function(d) { return d.year; }));
y.domain([0, d3.max(data, function(d) { return d.population; })]);

Step 8 - Append path - Ajoutez le chemin et les données comme indiqué ci-dessous.

svg.append("path").data([data])
   .attr("class", "line").attr("d", valueline);

Step 9 - Add X-axis - Maintenant, vous pouvez ajouter l'axe X en utilisant le code ci-dessous.

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

Step 10 - Add Y-axis - Nous pouvons ajouter l'axe Y au groupe comme indiqué ci-dessous.

svg.append("g")
   .call(d3.axisLeft(y));

Step 11 - Working Example- Le code complet est donné dans le bloc de code suivant. Créer une page Web simplelinegraphs.html et ajoutez-y les modifications suivantes.

graph.html

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
      <style> 
         .line {
            fill: none;
            stroke: green;
            stroke-width: 5px;
         }
      </style>
   </head>

   <body>
      <script>
         // set the dimensions and margins of the graph
         var margin = {top: 20, right: 20, bottom: 30, left: 50},
         width = 960 - margin.left - margin.right,
         height = 500 - margin.top - margin.bottom;

         // set the ranges
         var x = d3.scaleTime().range([0, width]);
         var y = d3.scaleLinear().range([height, 0]);

         // define the line
         var valueline = d3.line()
            .x(function(d) { return x(d.year); })
            .y(function(d) { return y(d.population); });

         // append the svg obgect to the body of the page
         // appends a 'group' element to 'svg'
         // moves the 'group' element to the top left margin
         var svg = d3.select("body").append("svg")
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom)
            .append("g").attr("transform",
               "translate(" + margin.left + "," + margin.top + ")");

         // Get the data
         d3.csv("data.csv", function(error, data) {
            if (error) throw error;
            // format the data
            data.forEach(function(d) {
               d.year = d.year;
               d.population = +d.population;
            });

            // Scale the range of the data
            x.domain(d3.extent(data, function(d) { return d.year; }));
            y.domain([0, d3.max(data, function(d) { return d.population; })]);

            // Add the valueline path.
            svg.append("path")
               .data([data])
               .attr("class", "line")
               .attr("d", valueline);

            // Add the X Axis
            svg.append("g")
               .attr("transform", "translate(0," + height + ")")
               .call(d3.axisBottom(x));

            // Add the Y Axis
            svg.append("g")
               .call(d3.axisLeft(y));
         });
      </script>
   </body>
</html>

Maintenant, demandez le navigateur et nous verrons le résultat suivant.

↰ Previous page Next page ↱

D3.js - Graphiques

Espace de coordonnées SVG

Graphique de l'espace de coordonnées SVG

Exemple de graphique

Tutoriel D3.js