valex · November 9, 2017 18:34
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
 <head>
    <meta charset="utf-8">
 </head>

 <body>
    <script src="http://d3js.org/d3.v4.min.js"></script>
    <script src="https://d3js.org/d3-selection-multi.v1.min.js"></script>
 <script>
    var url = 'https://gist.githubusercontent.com/d3byex/25129228aa50c30ef01f/raw/17838a0a03d94328a529de1dd768e956ce217af1/stacked_bars.csv';
    d3.csv(url, function (error, data) {

        var keys = d3.keys(data[0])
            .filter(function (key) {
                return key !== "State";
            });

        var statesAndAges = keys.map(function (ageRange) {
            return data.map(function (d) {
                return {
                    x: d.State,
                    y: +d[ageRange]
                };
            });
        });

        var stackedData = d3.stack()
            .keys(keys)(data);

        var width = 960, height = 500;
        var svg = d3.select('body')
            .append("svg")
            .attrs({
                width: width,
                height: height
            });

        var yScaleMaxDomain = (d3.max(stackedData, function (d) {
            return d3.max(d, function (d) {
                return d[1];
            });
        }));

        var yScale = d3.scaleLinear()
            .domain([0, yScaleMaxDomain])
            .range([0, height]);

        var xScale = d3.scaleBand()
            .domain(d3.range(stackedData[0].length))
            .padding(0.05)
            .rangeRound([0, width]);

        var colors = d3.scaleOrdinal()
            .range(["#98abc5", "#8a89a6", "#7b6888",
                "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);

        svg.selectAll("path")
            .data(stackedData)
            .enter()
            .append("path")
            .style("fill", function(d, i) {
                return colors(i);
            });

        var area = d3.area()
            .x(function(d, i) {
                return xScale(i);
            })
            .y0(function (d) {
                return height - yScale(d[0]);
            })
            .y1(function(d) {
                return height - yScale(d[1]);
            });

        svg.selectAll("path")
            .data(stackedData)
            .transition()
            .attr("d", function(d) {
                return area(d);
            });
    });
 </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	</head>

	<body>
	<script src="http://d3js.org/d3.v4.min.js"></script>
	<script src="https://d3js.org/d3-selection-multi.v1.min.js"></script>
	<script>
	var url = 'https://gist.githubusercontent.com/d3byex/25129228aa50c30ef01f/raw/17838a0a03d94328a529de1dd768e956ce217af1/stacked_bars.csv';
	d3.csv(url, function (error, data) {

	var keys = d3.keys(data[0])
	.filter(function (key) {
	return key !== "State";
	});

	var statesAndAges = keys.map(function (ageRange) {
	return data.map(function (d) {
	return {
	x: d.State,
	y: +d[ageRange]
	};
	});
	});

	var stackedData = d3.stack()
	.keys(keys)(data);

	var width = 960, height = 500;
	var svg = d3.select('body')
	.append("svg")
	.attrs({
	width: width,
	height: height
	});

	var yScaleMaxDomain = (d3.max(stackedData, function (d) {
	return d3.max(d, function (d) {
	return d[1];
	});
	}));

	var yScale = d3.scaleLinear()
	.domain([0, yScaleMaxDomain])
	.range([0, height]);

	var xScale = d3.scaleBand()
	.domain(d3.range(stackedData[0].length))
	.padding(0.05)
	.rangeRound([0, width]);

	var colors = d3.scaleOrdinal()
	.range(["#98abc5", "#8a89a6", "#7b6888",
	"#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);

	svg.selectAll("path")
	.data(stackedData)
	.enter()
	.append("path")
	.style("fill", function(d, i) {
	return colors(i);
	});

	var area = d3.area()
	.x(function(d, i) {
	return xScale(i);
	})
	.y0(function (d) {
	return height - yScale(d[0]);
	})
	.y1(function(d) {
	return height - yScale(d[1]);
	});

	svg.selectAll("path")
	.data(stackedData)
	.transition()
	.attr("d", function(d) {
	return area(d);
	});
	});
	</script>
	</body>
	</html>