D3 Examples - Transition

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    .axis text {
  font: 10px sans-serif;
}
​
.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}
​
.x.axis path {
  display: none;
}
  </style>
</head>
​
<body>
 
</body>
  <script>
    var margin = {top: 20, right: 30, bottom: 30, left: 40},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;
    
    
​
  
    
    
  data=d3.text('stocks.csv', function(error,raw) {
     
    var dsv = d3.dsvFormat(',')
    var data_raw = dsv.parse(raw);
    
        data_raw.forEach(function(d){
      year=d.date[4]+d.date[5]+d.date[6]+d.date[7];
      d.date=year;
      d.price=+d.price;}) 
        var data=data_parser(data_raw);
    var data_transpose=transpose(data);
    var data_stack=format_dataset_to_stack(data); 
    
    var n=data[0].length ;
    var m=data.length; 
​
    
        var state=0;  
     
    d3.select("body")
    .on("click", function() {console.log(state)
            if (state===0){
  
      svg.selectAll("rect") 
        .transition()
        .attr("height",(height-margin.top-margin.bottom)/n)
        .attr("y",height-(height-margin.top-margin.bottom)/n);
        
      d3.range(0,n).forEach(function(d,i){   
         svg.selectAll("rect[x='"+x0(d)+"']") 
                .transition()
        .delay(500)
        .attr("y",height-(d+1)*(height-margin.top-margin.bottom)/n); });
         
      d3.range(0,m).forEach(function(d,i){
        svg.selectAll("g").select("g[id='id_"+i+"']")
        .transition()
        .delay(1000)
        .selectAll("rect")
        .attr("x",x(i))});  
        
      svg.select("g").selectAll("g").selectAll("rect")
        .data(d3.stack().keys(d3.range(n))(data_transpose))
        .transition()
        .delay(1500)
        .attr("fill", function(d) {return z2(d.key);})
        .attr("width", x.bandwidth());                   
  
      data_stack.forEach(function(d,i){
       svg.select("g").select("g[id='id_"+i+"']").selectAll("rect")
         .data(d)
         .transition() 
         .delay(2000)
         .attr("y", function(d) {return y2(d[1]); }) 
            .attr("height", function(d) {return y2(d[0]) - y2(d[1]); })});
        state=1;
        
​
     }else if (state===1){
         d3.range(0,m).forEach(function(d,i){ 
         svg.select("g").select("g[id='id_"+i+"']").selectAll("rect")
                .transition()
        .delay(0) 
        .attr("y",function(d,i){return height-(i+1)*(height-margin.top-margin.bottom)/n;})
        .attr("height",(height-margin.top-margin.bottom)/n);});
           
 
       svg.selectAll("rect")  
        .transition() 
        .delay(500)
        .attr("width", x1.bandwidth())
        .each(function(){console.log(this)});
                                               
                                
       d3.range(0,m).forEach(function(d,i){
        svg.selectAll("g").select("g[id='id_"+i+"']")
                .selectAll("rect")
          .transition()
        .delay(1000) 
​
        .attr("x", function(d,i) {console.log(this,i);return x0(i);});  });
       
​
     
        svg.selectAll("rect") 
        .transition() 
           .delay(1500)
           .attr("y",function(d) { return (height-margin.bottom); });
           
       d3.range(0,m).forEach(function(d,i){
        svg.select("g").select("g[id='id_"+i+"']").selectAll("rect")
        .transition()
        .delay(2000)  
        .attr("fill", function() {return z(i); });});
        
      data.forEach(function(d,i){
       svg.select("g").select("g[id='id_"+i+"']").selectAll("rect")
         .data(d)  
         .transition() 
         .delay(2500)
         .attr("height", function(d,i){return y(d);})
         .attr("y", function(d) {return height-y(d); })});
    state=0; }
    
   }); 
​
​
​
       
       
​
​
    var y = d3.scaleLinear() 
    .domain([0, 210])
    .range([height, 0]);
​
        var x0 = d3.scaleBand()
    .domain(d3.range(n))
    .range([0, width], .2);
​
        var x1 = d3.scaleBand()
    .domain(d3.range(m))
    .range([0, x0.bandwidth() - 10]);
    
    var z = d3.scaleOrdinal(d3.schemeCategory20);
    
        
 
            var x = d3.scaleBand()
      .domain(d3.range(m))
      .range([0, width-margin.left-margin.right])
      .paddingInner(0.05)
        .paddingOuter(0.05);
​
        var z2 = d3.scaleOrdinal() 
    .range(d3.schemeCategory20); 
       
    
    var y2 = d3.scaleLinear() 
    .domain([0, 1100])
    .rangeRound([height, 0]);
​
​
​
    
    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 rectangles=svg.append("g").selectAll("g") 
    .data(data)
  .enter().append("g")
    .style("fill", function(d, i) { return z(i); })
        .attr("id",function(d,i){return "id_"+i;})
    .attr("transform", function(d, i) { return "translate(" + x1(i) + ",0)"; })
  .selectAll("rect")
    .data(function(d) { return d; }) 
  .enter().append("rect")
    .attr("width", x1.bandwidth())
    .attr("height", y)
    .attr("x", function(d, i) {return x0(i); }) 
    .attr("y", function(d) { return height-y(d); });
   
​
//stacked_barChart(svg,data)
    
  function stacked_barChart(el,data){ 
​
​
​
​
var svg = el.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 + ")");
​
svg.append("g").selectAll("g")
    .data(d3.stack().keys(d3.range(n))(data))
    .enter().append("g")
    .style("fill", function(d) {console.log(d) ; return z(d.key); })     
    .selectAll("rect") 
    .data(function(d) { console.log(d); return d; })
    .enter().append("rect") 
    .attr("x", function(d, i) {  return x(i); }) 
    .attr("y", function(d) {console.log(y(d[1])); return y(d[1]); }) 
    .attr("height", function(d) { return y(d[0]) - y(d[1]); })
    .attr("width", x.bandwidth());
  }
  })
     
    //Fonctions de mise en forme des données
    function data_parser(data){
      var symbols=[];
      var years=[];
      var formated_data=[];
      data.forEach(function(d){
        if (symbols.includes(d.symbol)===false){symbols.push(d.symbol);};
        if (years.includes(d.date)===false){years.push(d.date);};
      })
      for (var i=0;i<symbols.length;i++){
        formated_data.push([])
        for (var j=0;j<years.length;j++){
                        formated_data[i].push(mean(data,years[j],symbols[i]));
        ;}      
       ;}  
     return formated_data;
    ;}
    
        function mean(data,year,symbol){
      var sum=0;
      var n=0;
      data.forEach(function(d){
        if (d.date===year && d.symbol===symbol)
        {sum=sum+d.price;n=n+1;};})
      return sum/n;}
    
    
    function transpose(data){
      var n=data[0].length ; 
      var m=data.length; 
      var new_data=[]; 
      var k=0;
      for (var i=0;i<n;i++){
        new_data.push([]);
        for (var j=m-1;j>=0;j--){
          new_data[i].push(data[j][i]);
        }
      }
      return new_data;
    }
​
    
    function format_dataset_to_stack(dataset){
      var n=dataset.length;
      var output=[];
      for (var i=0;i<n;i++){
        output.push(format_to_stack(dataset[i]));
      }
      return output;
    }
​
    function format_to_stack(data){
      var n=data.length;
      var output=[];
      output.push([0,data[0]])
      for (var i=1;i<n;i++){
        output.push([output[i-1][1],output[i-1][1]+data[i]]);
      }
      return output;
    }
​
  </script>
​
​
    