D3 Examples - Stocks transition

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; }
  </style>
</head>
​
<body>
  <script>
    
var dataset;
var raw_data;
var w = 900;
var h = 400;
var margin = {top: 20, right: 30, bottom: 30, left: 40}
​
d3.csv("stocks.csv", function(error, data){
  if (error){
    console.log(error)
  } else {
    raw_data = data;
        dataset = data_parser(data);
  }
  create_vizualisation(dataset);
  }
)
​
//Fonctions de mise en forme des données
function data_parser(data){
  var symbols=[];
  var years=[];
  var formated_data=[];
  data.forEach(function(d){
    d.price = +d.price;
    d.year = d3.timeParse("%b %Y")(d.date).getFullYear();
    if (!symbols.includes(d.symbol)) {symbols.push(d.symbol);};
    if (!years.includes(d.year)) {years.push(d.year);};
  })
  for (var i=0; i<symbols.length; i++){
    formated_data.push([])
    for (var j=0; j<years.length; j++){
      filtered_dataset = data.filter(function(d) {
            return d.year ===  years[j] && d.symbol === symbols[i]
      })
      filtered_mean = d3.mean(filtered_dataset, function(d) {return d.price})
      formated_data[i].push(filtered_mean); 
    }
  }
  return formated_data;
}
​
​
function create_vizualisation(dataset){
  
  var color = d3.scaleOrdinal()
                        .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);
  
  color = d3.scaleOrdinal(d3.schemeCategory20);
  
  var n_symbol = dataset.length
  var n_year = dataset[0].length
  
    var x = d3.scaleBand()
    .rangeRound([0, w])
    .paddingInner(0.05)
    .align(0.1)
    .domain(d3.range(n_symbol));
  
  var x0 = d3.scaleBand()
    .domain(d3.range(n_year))
    .range([0, w], .2);
  
  var x1 = d3.scaleBand()
      .domain(d3.range(n_symbol))
      .range([0, x0.bandwidth() - 10]);
  
  
    var x2 = d3.scaleBand()
      .domain(d3.range(n_year + 1))
      .range([0, x.bandwidth() - 1]);
​
  var y_bar = d3.scaleLinear()
      .domain([0, d3.max(raw_data, function(d){return d.price})])
      .range([h, 0]);
  
  max_sum = d3.max(dataset, function(d) {return d3.sum(d)})
  
  var y_stacked = d3.scaleLinear()
      .domain([0, max_sum])
      .rangeRound([h, 0])
      .nice();
  
  
//Create stacked chart
var svg = d3.select("body").append("svg")
    .attr("width", w + margin.left + margin.right)
    .attr("height", h + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
​
svg.selectAll("g")
        .data(d3.stack().keys(d3.range(n_year))(dataset))
  .enter().append("g")
        .attr("class", "symbolG")
    .attr("fill", function(d) { return color(d.key); }) 
    .attr("id", function(d, i){return i})
    .selectAll("rect")
  .data(function(d) { return d; })
    .enter().append("rect")
      .attr("x", function(d, i) { return x(i); })
      .attr("y", function(d) { return y_stacked(d[1]); })
      .attr("height", function(d) { return y_stacked(d[0]) - y_stacked(d[1]); })
      .attr("width", x.bandwidth());
  
    //Transition
  d3.select("body").on("click", function(){
    svg.selectAll("g")
        .transition()
        .duration(500)
        .attr("transform", function(d, i) { return "translate(" + x2(i) + ",0)"; });
    
    svg.selectAll("rect")
        .transition()
        .duration(500)
    .attr("width", function(d, i) {return x.bandwidth() / (n_year + 2)});
    
    svg.selectAll("rect")
        .transition()
        .delay(500)
        .duration(300)
        .attr("height", function(d, i) {return y_bar(d[1] - d[0])})
        .attr("y", function(d, i) {return h - y_bar(d[1] - d[0])})
  })
​
}
​
  </script>
</body>
​
    