D3 Examples - [animated charts] stocks from dataset

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
​
        svg {
        font: 10px sans-serif;
        }
​
    .line {
      fill: none;
      stroke: black;
      stroke-width: 2px;
    }
​
    .area {
      stroke: black;
      stroke-width: 2px;
    }
  </style>
</head>
<body>
  <script>
​
​
     var parseDate = d3.timeParse("%Y-%m");
     var date_mois = []; //va contenir toute les dates
     var nom_regions= [];
      var list_regu ={};
     d3.text("regularite-mensuelle-ter.csv", function (error, raw) {
       var dsv = d3.dsvFormat(';');
       var data = dsv.parse(raw);
       //color scale
     
​
     console.log(data[0].Région)
     var reg = d3.nest()
     .key(function(d) { return d.Région; })
     .entries(data);
​
​
​
     // Parse and caculate some values for each symbols
     reg.forEach(function(s) {
     s.values.forEach(function(d) {
     d.mois = parseDate(d.Date);
     d.regu=+d["Taux de régularité"];
     });
​
​
     s.moy_reg = d3.mean(s.values, function(d) { return d.regu; });
       for(let i of s.values ){
         date_mois.push(i["Date"]) ; //ajoute la date dans array
          nom_regions.push(i["Région"]);
         //console.log(i["Taux de régularité"]);
         if (i["Région"] in list_regu){
           list_regu[i["Région"]][i["Date"]]=i["Taux de régularité"];
​
         }
​
         else {
           list_regu[i["Région"]]={};
           list_regu[i["Région"]][i["Date"]]=i["Taux de régularité"];
​
         }
       }
     list_regu[s.key]["regularité_moyenne"]=s.moy_reg;
​
     });
​
  console.log(list_regu["Lorraine"]);
     //fonction qui enleve les duplicate
     function removeDuplicates(arr){
     let unique_array = []
     for(let i = 0;i < arr.length; i++){
     if(unique_array.indexOf(arr[i]) == -1){
       unique_array.push(arr[i])
     }
     }
     return unique_array
     }
     var mois_uniq  = removeDuplicates(date_mois).sort(); //enleve les date dupliquercomme ça on a la liste des dates
     nom_regions= removeDuplicates(nom_regions).sort();//nom des régions
​
 
​
​
​
​
​
​
​
});  
​
​
​
​
​
​
​
​
  
  var margin = {top: 20, right: 30, bottom: 20, left: 100},
      width = 760 - margin.left - margin.right,
      height = 300 - margin.top - margin.bottom;
​
​
  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 + ")");
​
 
  var x = d3.scaleTime().range([0, width]),
      y = d3.scaleLinear().range([height, 0]),
      c = d3.scaleOrdinal(d3.schemeCategory20);
​
  // Chargement du jeu de données stock market
  d3.text("regularite-mensuelle-ter.csv", function(error, raw) {
​
    var dsv = d3.dsvFormat(';')
    var data = dsv.parse(raw);
​
    // Nest stock values by symbol.
    var regions = d3.nest()
        .key(function(d) { return d.Région; })
        .entries(data);
​
        // Parse and caculate some values for each symbols
    regions.forEach(function(s) {
      s.values.forEach(function(d) {
     d.mois = parseDate(d.Date);
     d.regu=+d["Taux de régularité"];
      });
​
      s.maxregu = d3.max(s.values, function(d) { return d.regu; });
      s.sumregu = d3.sum(s.values, function(d) { return d.regu; });
    });
​
    // Important pour la suite car les symbols sont ordonnés
    // en particulier les multiple
    regions.sort(function(a, b) { return b.maxregu - a.maxregu; });
​
    // Le scale X ne change pas: on map toujours les données temporelles
    // par leur valeur price
    x.domain(d3.extent(data, function(d) { return d.mois; }));
​
    // On créee un seul élément <path> qui sera ensuite utilisé tout
    // le temps quel que soit le graphique
    // La fonction anonyme après .data(symbols, func.. permet de s'assurer
    // que l'on va toujours associer les bonnes données à la bonne forme
    // Lire https://bost.ocks.org/mike/constancy/
    svg.selectAll(".area").data(regions, function(d) {
        return d.key;
      }).enter()
        .append("path")
          .attr("class", "area");
​
    var duration = 1000;
​
   
​
​
​
    // STACKED CHART
    // Il s'agit de dessiner les cours de bourses de manière relative
    // aux autres pour chaque jour
​
      y.domain([0, d3.sum(regions, function(d) { return d.maxregu; })]);
      y.range([height, 0]);
​
      // On crée une fonction
      var area = d3.area()
          .x(function(d) { return x(d.data.mois); })
          .y0(function(d) { return y(d[0]); })
          .y1(function(d) { return y(d[1]); });
​
    
      var stacked_data = [];
​
      data.forEach(function(d) {
        
        if(typeof(stacked_data[d.mois]) === "undefined") {
          stacked_data[d.mois] = {};
          stacked_data[d.mois].mois = d.mois;
          
        }
        
        stacked_data[d.mois][d.Région] = d.regu;
     
        
      });
   console.log(stacked_data);
​
      // Permet de supprimer l'index du tableau
      stacked_data = d3.values(stacked_data);
​
      var wide_data = d3.nest()
        .key(function(d) { return d["Date"] }) // Groupe par date
        .rollup(function(d) {
​
          return d.reduce(function(prev, curr) {
            prev["Date"] = curr["Date"];
            prev[curr["Région"]] = curr["Taux de régularité"];
            return prev;
          });
        })
        .entries(data)
        .map(function(d) { 
          return d.value;
        });
​
      stack = d3.stack()
          .keys(nom_regions)
          .order(d3.stackOrderNone)
          .offset(d3.stackOffsetNone);
​
     svg.selectAll(".area").data(stack(stacked_data), function(d) {
          return d.key;
        })
      .transition().duration(duration)
        .style("fill", function(d) { return c(d.key); })
        .attr("d", function(d) { return area(d); })
        .attr("transform", function(d, i) { return "translate(0, 0)"; });
    
​
   
​
  });
​
  </script>
</body>
​
    