D3 Examples - loading multiple stock data 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;
    }
  </style>
</head>
​
<body>
  <script>
  var parseDate = d3.timeParse("%b %Y");
  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);
        
    symbolsDate = d3.nest()
            .key(function(d){return d.date})
            .entries(data) ;
    structuredSymbols = [];
    symbolsDate.forEach(function(s) {
      var obj = {};
      s.values.forEach(function(d) { 
        obj.date=parseDate(d.date);
        symbols.forEach(function(s){
            obj[d.symbol] = d.symbol != undefined ? +d.price : 0;
        })
      }); 
      structuredSymbols.push(obj);      
    });
​
    
        // Parse and caculate some values for each symbols
    symbols.forEach(function(s) {
      s.values.forEach(function(d) { 
        d.date = parseDate(d.date); 
        d.price = +d.price; 
      });      
      s.maxPrice = d3.max(s.values, function(d) { return d.price; });
      s.sumPrice = d3.sum(s.values, function(d) { return d.price; });
    });
    
    var t = d3.transition()
      .duration(500)
      .ease(d3.easeLinear);
​
    streamgraph();
  });
    
        
    function multiples(){
      d3.selectAll("svg").remove();
      var margin = {top: 0, right: 30, bottom: 0, left: 100},
        width = 760 - margin.left - margin.right,
        height = 100 - margin.top - margin.bottom;
      
      var x = d3.scaleTime().range([0, width]),
        y = d3.scaleLinear().range([height, 0]),
        c = d3.scaleOrdinal(d3.schemeCategory10);
      
      x.domain(d3.extent(data, function(d) { return d.date; }));
      y.domain([0, d3.max(symbols.map(function(d) { return d.maxPrice; }))])
      
        area = d3.area()
            .x(function(d) { return x(d.date); })
            .y1(function(d){ return y(d.price); })
            .y0(function(d){ return y(0) }) ;
      
      var svg = d3.select("body").selectAll("svg")
        .data(symbols)
        .enter().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("path")
        .attr("fill", function(d) { return c(d.key); })
        .attr("d",  function(d) { return area(d.values); });
​
      setTimeout(pile, 1500);
​
    }
    
    function pile(){
      d3.selectAll("svg").remove();
      
       var margin = {top: 20, right: 30, bottom: 0, left: 100},
        width = 760 - margin.left - margin.right,
        height = 300 - margin.top - margin.bottom;
      
      var x = d3.scaleTime().range([0, width]),
        y = d3.scaleLinear().range([height, 200]),
        c = d3.scaleOrdinal(d3.schemeCategory10);
      x.domain(d3.extent(data, function(d) { return d.date; }));
      y.domain([0, d3.max(symbols.map(function(d) { return d.maxPrice; }))])
      
       areaStack = d3.area()
        .x(function(d) { return x(d.data.date); })
        .y1(function(d){ return y(d[1]); })
        .y0(function(d){ return y(d[0]); }); 
      
     
      var stack = d3.stack()
      stack.keys(["MSFT","AMZN","IBM","AAPL"]);  
      stack.value(function(d,key){ /*console.log(d) ;*/ return d[key] ; })
        stack.order(d3.stackOrderInsideOut);
      
      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 layer = svg.selectAll(".layer")
      .data(stack(structuredSymbols))
      .enter().append("g")
      .attr("class", "layer");
         
      layer.append("path")
          .attr("class", "area")
          .style("fill", function(d) { return c(d.key); })
            .attr("d",  function(d) {/* console.log(d) ;*/return areaStack(d); });
      
      setTimeout(streamgraph, 1500);
​
    }
    
    function streamgraph(){
      d3.selectAll("svg").remove();
      
       var margin = {top: 20, right: 30, bottom: 0, left: 100},
        width = 760 - margin.left - margin.right,
        height = 300 - margin.top - margin.bottom;
      
      var x = d3.scaleTime()
            .range([0, width]),
        y = d3.scaleLinear()
            .range([height, 0]),
        c = d3.scaleOrdinal(d3.schemeCategory10);
      x.domain(d3.extent(data, function(d) { return d.date; }));
      y.domain([
        -300, 
        300
      ])
      
       areaStack = d3.area()
        .x(function(d) { return x(d.data.date); })
        .y1(function(d){ return y(d[1]); })
        .y0(function(d){ return y(d[0]); }); 
      
     
      var stack = d3.stack()
      stack.keys(["MSFT","AMZN","IBM","AAPL"])
        .value(function(d,key){ return d[key] ; })
            .order(d3.stackOrderInsideOut)
        .offset(d3.stackOffsetSilhouette);
      
      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 layer = svg.selectAll(".layer")
      .data(stack(structuredSymbols))
      .enter().append("g")
      .attr("class", "layer");
         
      layer.append("path")
          .attr("class", "area")
          .style("fill", function(d) { return c(d.key); })
            .attr("d",  function(d) {/* console.log(d) ;*/return areaStack(d); });
      setTimeout(lines, 1500);      
    }
    
    function lines(){ 
      d3.selectAll("svg").remove();
      var margin = {top: 20, right: 30, bottom: 0, left: 100},
        width = 760 - margin.left - margin.right,
        height = 300 - margin.top - margin.bottom;
      
      var x = d3.scaleTime().range([0, width]),
        y = d3.scaleLinear().range([height, 0]),
        c = d3.scaleOrdinal(d3.schemeCategory10);
      
      x.domain(d3.extent(data, function(d) { return d.date; }));
      y.domain([0, d3.max(symbols.map(function(d) { return d.maxPrice; }))])
      
      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 line = d3.line()
        .curve(d3.curveBasis)
        .x(function(d) { return x(d.date); })
        .y(function(d) { return y(d.price); });
      
      svg.selectAll(".line").data(symbols).enter()
        .append("path")
          .attr("class", "line")
          .attr("d", function(d) { return line(d.values); })
          .style("stroke", function(d) { return c(d.key); });
      
      setTimeout(multiples, 1500);      
​
    }
    
    
  </script>
</body>
​
    