D3 Examples - TP3_dataviz_moisson

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;
    }
  </style>
</head>
​
<body>
  <script>
    
    var margin = {top: 20, right: 30, bottom: 20, left: 100},
        width = 760 - margin.left - margin.right,
        height = 300 - margin.top - margin.bottom;
    var x, y;
        var duration = 2000;
    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 parseDate = d3.timeParse("%b %Y");
        var data, symbols;
    var c = d3.scaleOrdinal(d3.schemeCategory10);
    
    d3.text('dataset.csv', function(error, raw) {
​
      var dsv = d3.dsvFormat(',')
      data = dsv.parse(raw);
​
      // Nest stock values by symbol.
      symbols = d3.nest()
          .key(function(d) { return d.symbol; })
          .entries(data);
      
            svg.selectAll(".area").data(symbols, function(d) {
        return d.key;
      }).enter()
        .append("path")
        .attr("class", "area");
      
      svg.selectAll(".text").data(symbols, function(d) {
        return d.key;
      }).enter()
        .append("text")
        .attr("class", "text"); 
      // Parse and caculate some values for each symbols
      var i = 0;
    var sumMaxPrice = 0;
    symbols.forEach(function(s) {
      s.values.forEach(function(d) { 
        d.date = parseDate(d.date); 
        d.price = +d.price; 
      });
      
      // Pour faire pointer un element sur le suivant
      var j = 0;
      s.values.forEach(function(v){
        if(i == 0){ // pas de petit frere
          v.beforePrice = 0; 
        }else{          
          v.beforePrice = symbols[i-1].values[j].somePrice;
        }
        v.somePrice = v.beforePrice + v.price;
        j++;
      });
      i++;
      
      s.maxPrice = d3.max(s.values, function(d) { return d.somePrice; });
      s.sumPrice = d3.sum(s.values, function(d) { return d.price; });
      s.lastPrice = s.values[s.values.length - 1].price;
      s.someLastPrice = s.values[s.values.length - 1].somePrice;
    });
​
      stream_graph();
    });
    
    function stackMax(layer) {
      return d3.max(layer, function(d) { return d[1]; });
    }
​
    function stackMin(layer) {
      return d3.min(layer, function(d) { return d[0]; });
    }
​
    function bumps(indice) {
      var map = [];
      var nbValues = symbols[0].values.length;
      for(var i = 0; i < nbValues; ++i){
        map[i] = parseInt(symbols[indice].values[i].price);
      }
      return map;
    }         
    
    // Les fonctions pour afficher les differents résultats
    function stream_graph(){
      //svg.selectAll("*").remove();
            var numberOfSymbols = symbols.length, // number of layers
          m = symbols[0].values.length; // number of samples per layer
​
      var stack = d3.stack().keys(d3.range(numberOfSymbols)).offset(d3.stackOffsetWiggle),
          layers = stack(d3.transpose(d3.range(numberOfSymbols).map(function(indice) { return bumps(indice); })));
      var x = d3.scaleLinear()
          .domain([0, m - 1])
          .range([0, width]);
​
​
      var y = d3.scaleLinear()
          .domain([d3.min(layers, stackMin), d3.max(layers, stackMax)])
          .range([height, 0]);
​
      var z = d3.interpolateCool;
​
      var area = d3.area()
            .curve(d3.curveBasis)
          .x(function(d, i) { return x(i); })
          .y0(function(d) { return y(d[0]); })
          .y1(function(d) { return y(d[1]); });
​
      svg.selectAll(".area")
        .data(layers)
        .transition().duration(duration)
        .attr("d", area)
        .attr("fill", function(d) { return c(d.key) })
        .style("fill-opacity", 1)// Opacity du remplissage
        .style("stroke", "black" )
        .style("stroke-opacity", 1); // Opacity du trait;;
      
      svg.selectAll(".text")
          .data(symbols)
            .transition().duration(duration)
          .attr("x", width + 30)
          .attr("y", function(d) { return height - d.someLastPrice/2 })
          .style("text-anchor", "end")// start don't work i don't know why
          .text(function(d) { return d.key });  
        setTimeout(empiler_graph, duration);
    }
    
    function empiler_graph(){
      //svg.selectAll("*").remove();
        var x = d3.scaleTime().range([0, width]),
          y = d3.scaleLinear().range([height, 0]),
          c = d3.scaleOrdinal(d3.schemeCategory10);
​
      var area = d3.area()
        .curve(d3.curveBasis)
        .x(function(d) { return x(d.date); })
        .y0(function(d) { return y(d.beforePrice); })
        .y1(function(d) { return y(d.somePrice); });
​
      var line = d3.line()
        .curve(d3.curveBasis)
        .x(function(d) { return x(d.date); })
        .y(function(d) { return y(d.price); });
      
      x.domain(d3.extent(data, function(d) { return d.date; }));
​
      y.domain([0, d3.max(symbols.map(function(d) { return d.maxPrice; }))])
​
​
      svg.selectAll(".area").data(symbols)
        .transition().duration(duration)
        .attr("fill", function(d) { return c(d.key); })
        .attr("d", function(d) { return area(d.values); })
        .style("fill-opacity", 1)// Opacity du remplissage
        .style("stroke", "black" )
        .style("stroke-opacity", 1); // Opacity du trait;
​
      svg.selectAll(".text")
           .data(symbols).transition().duration(duration)
          .attr("x", width + 30)
          .attr("y", function(d) { return height - d.someLastPrice/2 })
          .style("text-anchor", "end")
          .text(function(d) { return d.key });  
     
      setTimeout(trasparent_graph, duration);
    }
    
    function trasparent_graph(){      
      //svg.selectAll("*").remove();
        var x = d3.scaleTime().range([0, width]),
          y = d3.scaleLinear().range([height, 0]),
          c = d3.scaleOrdinal(d3.schemeCategory10);
​
      var line = d3.line()
        .curve(d3.curveBasis)
        .x(function(d) { return x(d.date); })
        .y(function(d) { return y(d.price); });
​
      var area = d3.area()
        .curve(d3.curveBasis)
        .x(function(d) { return x(d.date); })
        .y1(function(d) { return y(d.price); });
      
      x.domain(d3.extent(data, function(d) { return d.date; }));
      y.domain([0, d3.max(data, function(d) { return d.price; })]);
      area.y0(y(0));
​
​
      svg.selectAll(".area").data(symbols)
        .transition().duration(duration)
        .attr("fill", function(d) { return c(d.key); })
        .attr("d", function(d) { return area(d.values); })
        .style("fill-opacity", 0.5) 
        .style("stroke", "black" )
        .style("stroke-opacity", 1);
​
      svg.selectAll(".text")
           .data(symbols).transition().duration(duration)
            .attr("x", width + 30)
            .attr("y", function(d) { return height - d.lastPrice })
            .style("text-anchor", "end")
            .text(function(d) { return d.key });
      setTimeout(stream_graph, duration);
    }   
    
    // Il faudrai pour que le multiple marche faire en sorte qu'il ne crée pas plusieur svg
    // A reflechir...
    function multiple_graph(){
      svg.selectAll("*").remove();
      
      var x = d3.scaleTime().range([0, width]),
          y = d3.scaleLinear().range([height, 0]),
          c = d3.scaleOrdinal(d3.schemeCategory10);
      var area = d3.area()
        .curve(d3.curveBasis)
        .x(function(d) { return x(d.date); })
        .y0(height)
        .y1(function(d) { return y(d.price); });
​
      var line = d3.line()
        .curve(d3.curveBasis)
        .x(function(d) { return x(d.date); })
        .y(function(d) { return y(d.price); });
      x.domain([
        d3.min(symbols, function(s) { return s.values[0].date; }),
        d3.max(symbols, function(s) { return s.values[s.values.length - 1].date; })
      ]);
      
        // Add the area path elements. Note: the y-domain is set per element.
      svg.selectAll(".line").data(symbols).enter()
        .append("path")
          .attr("class", "area")
          
          .attr("d", function(d) { y.domain([0, d.maxPrice]); return area(d.values); })
            .style("fill", function(d) { return c(d.key); });
​
      // Add the line path elements. Note: the y-domain is set per element.
      svg.selectAll(".line").data(symbols).enter()
        .append("path")
          .attr("class", "line")
          .attr("fill", function(d) { return c(d.key); })
          .attr("d", function(d) { y.domain([0, d.maxPrice]); return line(d.values); });
​
      // Add a small label for the symbol name.
      svg.selectAll(".line").data(symbols).enter()
        .append("path")
          .attr("x", width - 6)
          .attr("y", height - 6)
          .style("text-anchor", "end")
          .text(function(d) { return d.key; }); 
    }
    
  </script>
</body>
    