bump chart tutorial, part 1

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