jwilber/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org
forked from jwilber's block: streamgraph d3ia
forked from jwilber's block: streamgraph d3ia

  
## 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
	<!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>
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