d3byex · November 29, 2015 23:55
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
 <head>
    <meta name="description" content="D3byEX 10.8" />
    <meta charset="utf-8">
 </head>
 <body>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script>
        var url = 'https://gist.githubusercontent.com/d3byex/25129228aa50c30ef01f/raw/4393a0e579cbfd9bb20a431ce93c72fb1ea23537/streamgraph.json';
        d3.json(url, function (error, rawData) {
            var width = 960, height = 500;
            var svg = d3.select('body')
                .append('svg')
                .attr({
                    'width': width,
                    'height': height
                });

            var data = Array();
            d3.map(rawData, function (d, i) {
                data[i] = d.map(function (i, j) {
                    return { x: j, y: i };
                });
            });

            var numPointsPerLayer = data[0].length;

            var xScale = d3.scale.linear()
                .domain([0, numPointsPerLayer - 1])
                .range([0, width]);

            var layers = d3.layout.stack()
                .offset('wiggle')(data);

            var yScale = d3.scale.linear()
                .domain([
                    0, d3.max(layers, function (layer) {
                        return d3.max(layer, function (d) {
                            return d.y0 + d.y;
                        });
                    })
                ])
                .range([height, 0]);

            var area = d3.svg.area()
                .x(function (d) { return xScale(d.x); })
                .y0(function (d) { return yScale(d.y0); })
                .y1(function (d) { return yScale(d.y0 + d.y); });

            var color = d3.scale.category10();

            svg.selectAll('path')
                .data(layers)
                .enter()
                .append('path')
                .attr('d', area)
                .style('fill', function () {
                    return color(Math.random());
                });
        });
    </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta name="description" content="D3byEX 10.8" />
	<meta charset="utf-8">
	</head>
	<body>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script>
	var url = 'https://gist.githubusercontent.com/d3byex/25129228aa50c30ef01f/raw/4393a0e579cbfd9bb20a431ce93c72fb1ea23537/streamgraph.json';
	d3.json(url, function (error, rawData) {
	var width = 960, height = 500;
	var svg = d3.select('body')
	.append('svg')
	.attr({
	'width': width,
	'height': height
	});

	var data = Array();
	d3.map(rawData, function (d, i) {
	data[i] = d.map(function (i, j) {
	return { x: j, y: i };
	});
	});

	var numPointsPerLayer = data[0].length;

	var xScale = d3.scale.linear()
	.domain([0, numPointsPerLayer - 1])
	.range([0, width]);

	var layers = d3.layout.stack()
	.offset('wiggle')(data);

	var yScale = d3.scale.linear()
	.domain([
	0, d3.max(layers, function (layer) {
	return d3.max(layer, function (d) {
	return d.y0 + d.y;
	});
	})
	])
	.range([height, 0]);

	var area = d3.svg.area()
	.x(function (d) { return xScale(d.x); })
	.y0(function (d) { return yScale(d.y0); })
	.y1(function (d) { return yScale(d.y0 + d.y); });

	var color = d3.scale.category10();

	svg.selectAll('path')
	.data(layers)
	.enter()
	.append('path')
	.attr('d', area)
	.style('fill', function () {
	return color(Math.random());
	});
	});
	</script>
	</body>
	</html>