D3.js - Exemple de travail

Examinons un histogramme animé dans ce chapitre. Pour cet exemple, nous prenons le fichier data.csv utilisé dans le chapitre précédent des enregistrements de population comme ensemble de données et générons un histogramme animé.

Pour ce faire, nous devons effectuer les étapes suivantes -

Step 1 - Apply styles - Appliquez les styles CSS en utilisant le codage ci-dessous.

<style>
   .bar {
      fill: green;
   }
   
   .highlight {
      fill: red;
   }
   
   .title {
      fill: blue;
      font-weight: bold;
   }
</style>

Step 2 - Define variables - Définissons les attributs SVG à l'aide du script ci-dessous.

<script>
   var svg = d3.select("svg"), margin = 200,
   width = svg.attr("width") - margin,
   height = svg.attr("height") - margin;
</script>

Step 3 - Append text - Maintenant, ajoutez du texte et appliquez la transformation en utilisant le codage ci-dessous.

svg.append("text")
   .attr("transform", "translate(100,0)")
   .attr("x", 50)
   .attr("y", 50)
   .attr("font-size", "20px")
   .attr("class", "title")
   .text("Population bar chart")

Step 4 - Create scale range- Dans cette étape, nous pouvons créer une plage d'échelle et ajouter les éléments du groupe. Il est défini ci-dessous.

var x = d3.scaleBand().range([0, width]).padding(0.4),
   y = d3.scaleLinear()
      .range([height, 0]);
   var g = svg.append("g")
      .attr("transform", "translate(" + 100 + "," + 100 + ")");

Step 5 - Read data - Nous avons déjà créé le data.csvfichier dans nos exemples précédents. Le même fichier que nous avons utilisé ici.

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

Maintenant, lisez le fichier ci-dessus en utilisant le code ci-dessous.

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

Step 6 - Set domain - Maintenant, définissez le domaine en utilisant le codage ci-dessous.

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

Step 7 - Add X-axis- Maintenant, vous pouvez ajouter l'axe X à la transformation. Il est montré ci-dessous.

g.append("g")
   .attr("transform", "translate(0," + height + ")")
   .call(d3.axisBottom(x)).append("text")
   .attr("y", height - 250).attr("x", width - 100)
   .attr("text-anchor", "end").attr("font-size", "18px")
   .attr("stroke", "blue").text("year");

Step 8 - Add Y-axis - Ajoutez l'axe Y à la transformation en utilisant le code ci-dessous.

g.append("g")
   .append("text").attr("transform", "rotate(-90)")
   .attr("y", 6).attr("dy", "-5.1em")
   .attr("text-anchor", "end").attr("font-size", "18px")
   .attr("stroke", "blue").text("population");

Step 9 - Append group elements - Maintenant, ajoutez les éléments du groupe et appliquez la transformation à l'axe Y comme défini ci-dessous.

g.append("g")
   .attr("transform", "translate(0, 0)")
   .call(d3.axisLeft(y))

Step 10 - Select the bar class - Sélectionnez maintenant tous les éléments de la classe de barres comme défini ci-dessous.

g.selectAll(".bar")
   .data(data).enter()
   .append("rect")
   .attr("class", "bar")
   .on("mouseover", onMouseOver) 
   .on("mouseout", onMouseOut)
   .attr("x", function(d) { return x(d.year); })
   .attr("y", function(d) { return y(d.population); })
   .attr("width", x.bandwidth())
   .transition()
   .ease(d3.easeLinear)
   .duration(200)
   .delay(function (d, i) {
      return i * 25;
   })
   .attr("height", function(d) { return height - y(d.population); });
});

Ici, nous avons ajouté l'événement d'écoute pour le mouseout et mouseover pour effectuer l'animation. Il applique l'animation, lorsque la souris survole une barre particulière et en sort. Ces fonctions sont expliquées à l'étape suivante.

le .ease(d3.easeLinear)La fonction est utilisée pour effectuer un mouvement apparent dans l'animation. Il traite le ralenti et le ralenti d'une durée de 200. Le retard peut être calculé en utilisant -

.delay(function (d, i) {
   return i * 25;
})

Step 11 - Mouseover event handler function - Créons un gestionnaire d'événements mouseover pour gérer un événement souris comme indiqué ci-dessous.

function onMouseOver(d, i) {
   d3.select(this)
      .attr('class', 'highlight');
   d3.select(this)
      .transition()
      .duration(200)
      .attr('width', x.bandwidth() + 5)
      .attr("y", function(d) { return y(d.population) - 10; })
      .attr("height", function(d) { return height - y(d.population) + 10; });
   g.append("text")
      .attr('class', 'val') 
   
   .attr('x', function() {
      return x(d.year);
   })
   
   .attr('y', function() {
      return y(d.value) - 10;
   })
}

Ici, dans l'événement mouseover, nous voulons augmenter la largeur et la hauteur de la barre et la couleur de la barre sélectionnée en rouge. Pour la couleur, nous avons ajouté une classe «surbrillance», qui change la couleur de la barre sélectionnée en rouge.

Une fonction de transition vers la barre pour une durée de 200 millisecondes. Lorsque nous augmentons la largeur de la barre de 5 pixels et la hauteur de 10 pixels, la transition de la largeur et de la hauteur précédentes de la barre aux nouvelles largeur et hauteur durera 200 millisecondes.

Ensuite, nous avons calculé une nouvelle valeur «y» pour la barre, afin que la barre ne se déforme pas en raison de la nouvelle valeur de hauteur.

Step 12 - Mouseout event handler function- Créons un gestionnaire d'événement mouseout pour gérer un événement souris. Il est défini ci-dessous.

function onMouseOut(d, i) {
   d3.select(this).attr('class', 'bar');
   
   d3.select(this)
      .transition()     
      .duration(400).attr('width', x.bandwidth())
      .attr("y", function(d) { return y(d.population); })
      .attr("height", function(d) { return height - y(d.population); });
   
   d3.selectAll('.val')
      .remove()
}

Ici, dans l'événement mouseout, nous voulons supprimer les fonctionnalités de sélection que nous avions appliquées dans l'événement mouseover. Par conséquent, nous rétablissons la classe de barre à la classe d'origine 'barre' et restaurons la largeur et la hauteur d'origine de la barre sélectionnée et restaurons la valeur y à la valeur d'origine.

le d3.selectAll(‘.val’).remove() La fonction est utilisée pour supprimer la valeur de texte que nous avions ajoutée lors de la sélection de la barre.

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

<!DOCTYPE html>
<html>
   <head>
      <style>
         .bar {
            fill: green;
         }
        
         .highlight {
            fill: red;
         }
         
         .title {
            fill: blue;
            font-weight: bold;
         }
      </style>
      <script src = "https://d3js.org/d3.v4.min.js"></script>
      <title> Animated bar chart </title>
   </head>

   <body>
      <svg width = "500" height = "500"></svg>
      <script>
         var svg = d3.select("svg"),
         margin = 200, width = svg.attr("width") - margin,
         height = svg.attr("height") - margin;
         
         svg.append("text")
            .attr("transform", "translate(100,0)")
            .attr("x", 50).attr("y", 50)
            .attr("font-size", "20px")
            .attr("class", "title")
            .text("Population bar chart")
            
         var x = d3.scaleBand().range([0, width]).padding(0.4),
         y = d3.scaleLinear().range([height, 0]);
            
         var g = svg.append("g")
            .attr("transform", "translate(" + 100 + "," + 100 + ")");

         d3.csv("data.csv", function(error, data) {
            if (error) {
               throw error;
            }
               
            x.domain(data.map(function(d) { return d.year; }));
            y.domain([0, d3.max(data, function(d) { return d.population; })]);
                     
            g.append("g")
               .attr("transform", "translate(0," + height + ")")
               .call(d3.axisBottom(x))
               .append("text")
               .attr("y", height - 250)
               .attr("x", width - 100)
               .attr("text-anchor", "end")
               .attr("font-size", "18px")
               .attr("stroke", "blue").text("year");
               
            g.append("g")
               .append("text")
               .attr("transform", "rotate(-90)")
               .attr("y", 6)
               .attr("dy", "-5.1em")
               .attr("text-anchor", "end")
               .attr("font-size", "18px")
               .attr("stroke", "blue")
               .text("population");
                         
            g.append("g")
               .attr("transform", "translate(0, 0)")
               .call(d3.axisLeft(y))

            g.selectAll(".bar")
               .data(data)
               .enter()
               .append("rect")
               .attr("class", "bar")
               .on("mouseover", onMouseOver) 
               .on("mouseout", onMouseOut)   
               .attr("x", function(d) { return x(d.year); })
               .attr("y", function(d) { return y(d.population); })
               .attr("width", x.bandwidth()).transition()
               .ease(d3.easeLinear).duration(200)
               .delay(function (d, i) {
                  return i * 25;
               })
                  
            .attr("height", function(d) { return height - y(d.population); });
         });
          
          
         function onMouseOver(d, i) {
            d3.select(this)
            .attr('class', 'highlight');
               
            d3.select(this)
               .transition()     
               .duration(200)
               .attr('width', x.bandwidth() + 5)
               .attr("y", function(d) { return y(d.population) - 10; })
               .attr("height", function(d) { return height - y(d.population) + 10; });
              
            g.append("text")
               .attr('class', 'val')
               .attr('x', function() {
                  return x(d.year);
               })
               
            .attr('y', function() {
               return y(d.value) - 10;
            })
         }
          
         function onMouseOut(d, i) {
             
            d3.select(this)
               .attr('class', 'bar');
            
            d3.select(this)
               .transition()     
               .duration(200)
               .attr('width', x.bandwidth())
               .attr("y", function(d) { return y(d.population); })
               .attr("height", function(d) { return height - y(d.population); });
            
            d3.selectAll('.val')
               .remove()
         }
      </script>
   </body>
</html>

Maintenant, demandez le navigateur et nous verrons la réponse suivante.

Si nous sélectionnons une barre, elle sera mise en évidence en rouge. D3 est une bibliothèque de visualisation à usage général qui traite de la transformation des données en informations, documents, éléments, etc., et aide finalement à créer la visualisation des données.