bump chart tutorial, part 1

florida.csv

live_state	born_state	1900	1910	1920	1930	1940	1950	1960	1970	1980	1990	2000	2012
Florida	Alabama	0.0477	0.0484	0.0541	0.0508	0.0555	0.0554	0.0458	0.0344	0.0259	0.0197	0.0145	0.0102
Florida	Alaska	0.0000	0.0000	0.0000	0.0000	0.0001	0.0000	0.0002	0.0004	0.0005	0.0005	0.0005	0.0008
Florida	Arizona	0.0000	0.0000	0.0000	0.0001	0.0004	0.0003	0.0004	0.0007	0.0008	0.0011	0.0014	0.0015
Florida	Arkansas	0.0007	0.0009	0.0021	0.0035	0.0024	0.0040	0.0040	0.0043	0.0032	0.0030	0.0025	0.0022
Florida	California	0.0003	0.0003	0.0009	0.0006	0.0017	0.0032	0.0056	0.0074	0.0086	0.0104	0.0131	0.0141
Florida	Colorado	0.0001	0.0001	0.0006	0.0004	0.0008	0.0008	0.0013	0.0017	0.0018	0.0024	0.0024	0.0026
Florida	Connecticut	0.0018	0.0025	0.0018	0.0032	0.0043	0.0058	0.0076	0.0089	0.0106	0.0111	0.0112	0.0097
Florida	Delaware	0.0002	0.0004	0.0010	0.0004	0.0005	0.0007	0.0009	0.0012	0.0013	0.0013	0.0013	0.0014
Florida	District of Columbia	0.0004	0.0005	0.0005	0.0012	0.0011	0.0019	0.0036	0.0028	0.0035	0.0037	0.0035	0.0028
Florida	Florida	0.6524	0.6237	0.5757	0.5075	0.4872	0.4286	0.3759	0.3688	0.3123	0.3038	0.3253	0.3574
Florida	Georgia	0.1090	0.1097	0.1031	0.1509	0.1469	0.1251	0.0920	0.0605	0.0473	0.0338	0.0248	0.0190
Florida	Hawaii	0.0000	0.0000	0.0000	0.0000	0.0001	0.0003	0.0003	0.0008	0.0009	0.0009	0.0011	0.0013
Florida	Idaho	0.0000	0.0000	0.0005	0.0001	0.0002	0.0002	0.0003	0.0004	0.0008	0.0004	0.0005	0.0004
Florida	Illinois	0.0038	0.0038	0.0156	0.0149	0.0153	0.0203	0.0256	0.0282	0.0300	0.0310	0.0260	0.0223
Florida	Indiana	0.0028	0.0020	0.0061	0.0099	0.0114	0.0126	0.0164	0.0172	0.0183	0.0179	0.0146	0.0128
Florida	Iowa	0.0012	0.0008	0.0046	0.0036	0.0053	0.0042	0.0060	0.0055	0.0048	0.0052	0.0042	0.0033
Florida	Kansas	0.0005	0.0007	0.0034	0.0024	0.0030	0.0029	0.0033	0.0032	0.0032	0.0029	0.0026	0.0022
Florida	Kentucky	0.0042	0.0036	0.0084	0.0116	0.0103	0.0120	0.0140	0.0139	0.0130	0.0121	0.0093	0.0068
Florida	Louisiana	0.0027	0.0023	0.0031	0.0046	0.0040	0.0033	0.0037	0.0041	0.0038	0.0052	0.0048	0.0040
Florida	Maine	0.0015	0.0017	0.0022	0.0017	0.0020	0.0027	0.0035	0.0032	0.0039	0.0042	0.0038	0.0032
Florida	Maryland	0.0016	0.0017	0.0035	0.0024	0.0029	0.0047	0.0074	0.0068	0.0091	0.0085	0.0080	0.0077
Florida	Massachusetts	0.0027	0.0020	0.0070	0.0073	0.0097	0.0131	0.0170	0.0170	0.0209	0.0217	0.0202	0.0184
Florida	Michigan	0.0026	0.0035	0.0064	0.0097	0.0095	0.0117	0.0181	0.0211	0.0241	0.0282	0.0241	0.0214
Florida	Minnesota	0.0004	0.0003	0.0018	0.0020	0.0026	0.0028	0.0043	0.0051	0.0049	0.0050	0.0046	0.0042
Florida	Mississippi	0.0040	0.0033	0.0052	0.0052	0.0056	0.0061	0.0082	0.0072	0.0062	0.0055	0.0045	0.0038
Florida	Missouri	0.0022	0.0027	0.0056	0.0065	0.0067	0.0070	0.0080	0.0087	0.0077	0.0078	0.0067	0.0056
Florida	Montana	0.0000	0.0004	0.0006	0.0002	0.0002	0.0005	0.0005	0.0007	0.0008	0.0006	0.0005	0.0004
Florida	Nebraska	0.0007	0.0000	0.0016	0.0015	0.0020	0.0017	0.0021	0.0024	0.0019	0.0020	0.0017	0.0017
Florida	Nevada	0.0000	0.0000	0.0000	0.0001	0.0000	0.0002	0.0001	0.0002	0.0006	0.0003	0.0005	0.0007
Florida	New Hampshire	0.0007	0.0005	0.0009	0.0007	0.0011	0.0013	0.0023	0.0019	0.0025	0.0029	0.0026	0.0025
Florida	New Jersey	0.0009	0.0020	0.0040	0.0052	0.0068	0.0136	0.0172	0.0206	0.0276	0.0290	0.0281	0.0249
Florida	New Mexico	0.0000	0.0001	0.0000	0.0001	0.0003	0.0003	0.0006	0.0011	0.0011	0.0009	0.0010	0.0011
Florida	New York	0.0080	0.0113	0.0171	0.0177	0.0282	0.0441	0.0607	0.0653	0.0985	0.0979	0.0933	0.0817
Florida	North Carolina	0.0248	0.0247	0.0156	0.0176	0.0165	0.0162	0.0193	0.0170	0.0144	0.0114	0.0097	0.0084
Florida	North Dakota	0.0000	0.0000	0.0002	0.0001	0.0009	0.0007	0.0008	0.0008	0.0010	0.0010	0.0008	0.0007
Florida	Ohio	0.0053	0.0085	0.0153	0.0139	0.0192	0.0277	0.0346	0.0367	0.0408	0.0397	0.0325	0.0278
Florida	Oklahoma	0.0002	0.0001	0.0009	0.0012	0.0012	0.0026	0.0031	0.0029	0.0029	0.0032	0.0028	0.0023
Florida	Oregon	0.0001	0.0004	0.0001	0.0002	0.0004	0.0004	0.0007	0.0007	0.0007	0.0008	0.0009	0.0008
Florida	Pennsylvania	0.0037	0.0068	0.0122	0.0184	0.0214	0.0323	0.0423	0.0413	0.0448	0.0423	0.0361	0.0286
Florida	Rhode Island	0.0002	0.0003	0.0006	0.0016	0.0007	0.0030	0.0033	0.0032	0.0036	0.0038	0.0038	0.0034
Florida	South Carolina	0.0499	0.0603	0.0355	0.0346	0.0245	0.0188	0.0177	0.0143	0.0104	0.0083	0.0067	0.0053
Florida	South Dakota	0.0001	0.0001	0.0002	0.0004	0.0009	0.0007	0.0009	0.0010	0.0009	0.0010	0.0009	0.0007
Florida	Tennessee	0.0043	0.0056	0.0074	0.0136	0.0121	0.0169	0.0180	0.0166	0.0121	0.0109	0.0081	0.0066
Florida	Texas	0.0019	0.0031	0.0025	0.0033	0.0050	0.0057	0.0090	0.0090	0.0095	0.0117	0.0115	0.0103
Florida	Utah	0.0000	0.0000	0.0000	0.0004	0.0006	0.0002	0.0004	0.0006	0.0004	0.0007	0.0008	0.0007
Florida	Vermont	0.0004	0.0004	0.0010	0.0013	0.0015	0.0011	0.0020	0.0021	0.0021	0.0018	0.0017	0.0013
Florida	Virginia	0.0064	0.0054	0.0078	0.0087	0.0084	0.0106	0.0132	0.0127	0.0128	0.0109	0.0103	0.0102
Florida	Washington	0.0002	0.0003	0.0001	0.0004	0.0008	0.0010	0.0012	0.0013	0.0021	0.0022	0.0021	0.0021
Florida	West Virginia	0.0002	0.0021	0.0035	0.0040	0.0035	0.0061	0.0120	0.0134	0.0112	0.0104	0.0076	0.0055
Florida	Wisconsin	0.0024	0.0013	0.0036	0.0033	0.0034	0.0054	0.0064	0.0078	0.0081	0.0089	0.0074	0.0061
Florida	Wyoming	0.0000	0.0000	0.0001	0.0003	0.0004	0.0001	0.0001	0.0003	0.0003	0.0004	0.0004	0.0005
Florida	US Other	0.0000	0.0001	0.0001	0.0001	0.0001	0.0010	0.0031	0.0035	0.0065	0.0118	0.0175	0.0207
Florida	Foreign Born	0.0468	0.0514	0.0567	0.0506	0.0506	0.0583	0.0574	0.0946	0.1144	0.1377	0.1754	0.2058

index.html

<html>
<head>
</head>
<body>
<script src="http://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>