streamgraph d3ia by jwilber

index.html

<!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 { border: 1px dotted red; }
  </style>
</head>
<svg width="800" height="600"></svg>
<body>
  <script>
    d3.csv('movies.csv', dataViz);
    function dataViz(data){
      console.log(data);
      var xScale = d3.scaleLinear().domain([0, 10]).range([0, 800]);
      var movies = ['titanic', 'avatar', 'akira', 'frozen', 'deliverance',
                   'avengers'];
      
      var fillScale = d3.scaleOrdinal()
      	.domain(movies)
      	.range(['red', 'orange', 'yellow', 'coral', 'blue', 'grey']);
      
      stackLayout = d3.stack()
      	.keys(movies)
//       	.offset(d3.stackOffsetWiggle)
      	.offset(d3.stackOffsetSilhouette).order(d3.stackOrderInsideOut);
      var stacked = stackLayout(data);
      
      var yScale = d3.scaleLinear()
        .domain([
            d3.min(stacked, function (series) {
              return d3.min(series, function (d) { return d[0]; });
            }),
            d3.max(stacked, function (series) {
              return d3.max(series, function (d) { return d[1]; });
            })
          ])
        .range([500, 0]);
      
      var stackArea = d3.area()
      	.x((d, i) => xScale(i))
      	.y0(d => yScale(d[0]))
      	.y1(d => yScale(d[1]))
      	.curve(d3.curveBasis);
      
      d3.select('svg').selectAll('path')
      	.data(stacked)
      	.enter().append('path')
      	.style('fill', d => fillScale(d.key))
      	.style('stroke', 'black')
      	.attr('d', d => stackArea(d));
      
      
    }
  </script>
</body>

movies.csv

day,titanic,avatar,akira,frozen,deliverance,avengers
1,20,8,3,0,0,0
2,18,5,1,13,0,0
3,14,3,1,10,0,0
4,7,3,0,5,27,15
5,4,3,0,2,20,14
6,3,1,0,0,10,13
7,2,0,0,0,8,12
8,0,0,0,0,6,11
9,0,0,0,0,3,9
10,0,0,0,0,1,8