xxxxxxxxxx
<html>
<head>
</head>
<body>
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script type="text/javascript">
var margin = {top: 10, right: 10, bottom: 10, left: 10 },
width = innerWidth - margin.left - margin.right,
height = innerHeight - margin.top - margin.bottom;
var svg = d3.select('body')
.append('svg')
.attr({ width: innerWidth, height: innerHeight })
.append('g')
.attr('transform', 'translate(' + [margin.left, margin.top] + ')');
var x = d3.scale.linear().range([0, width]),
y = d3.scale.linear().range([height, 0]);
var area = d3.svg.area()
.x(function(d) { return x(d.x); })
.y0(function(d) { return y(d.y0); })
.y1(function(d) { return y(d.y0 + d.y); });
var color = d3.scale.ordinal()
.range(['#ecc', '#dbb', '#caa', '#b99', '#a88']);
d3.tsv('florida.csv', function(data) {
var years = d3.keys(data[0])
.filter(function(key) { return !isNaN(key); })
.map(function(key) { return +key; });
var layers = data.map(function(s) {
return {
name: s.born_state,
region: s.born_region,
values: years.map(function(yr) {
return { x: +yr, y: +s[yr] };
})
};
});
var stack = d3.layout.stack()
.values(function(d) { return d.values; });
layers = stack(layers);
x.domain(d3.extent(years));
var maxY = d3.max(layers, function(layer) {
return d3.max(layer.values, function(d) {
return d.y + d.y0; });
});
y.domain([0, maxY]);
var state = svg.selectAll(".state")
.data(layers)
.enter().append("g")
.attr("class", "state");
state.append("path")
.attr("class", "area")
.attr("d", function(d) { return area(d.values); })
.style("fill", function(d) { return color(d.region); });
state
.filter(function(d) { return d3.max(d.values, function(d) { return d.y; }) > 0.05; })
.append("text")
.datum(function(d) { return {
name: d.name,
value: d.values[d.values.length - 1]};
})
.attr("transform", function(d) { return "translate(" + x(d.value.x) + "," + y(d.value.y0 + d.value.y / 2) + ")"; })
.attr("x", -6)
.attr("dy", ".35em")
.text(function(d) { return d.name; });
});
</script>
<style type="text/css">
body { margin: 0; padding: 0; }
svg text { font-family: Helvetica Neue, Helvetica; font-weight: 400;}
svg .state text { text-anchor: end; font-size: 11px;}
svg .state path { stroke: #fff; stroke-width: 0.5px;}
</style>
</body>
</html>
Modified http://d3js.org/d3.v3.min.js to a secure url
https://d3js.org/d3.v3.min.js