1 var w = 960,

     2     h = 500,

     3     x = d3.scale.linear().range([0, w]),

     4     y = d3.scale.linear().range([0, h - 40]);

     5 

     6 // An SVG element with a bottom-right origin.

     7 var svg = d3.select("#chart").append("svg:svg")

     8     .attr("width", w)

     9     .attr("height", h)

    10     .style("padding-right", "30px")

    11   .append("svg:g")

    12     .attr("transform", "translate(" + x(1) + "," + (h - 20) + ")scale(-1,-1)");

    13 

    14 // A sliding container to hold the bars.

    15 var body = svg.append("svg:g")

    16     .attr("transform", "translate(0,0)");

    17 

    18 // A container to hold the y-axis rules.

    19 var rules = svg.append("svg:g");

    20 

    21 // A label for the current year.

    22 var title = svg.append("svg:text")

    23     .attr("class", "title")

    24     .attr("dy", ".71em")

    25     .attr("transform", "translate(" + x(1) + "," + y(1) + ")scale(-1,-1)")

    26     .text(2000);

    27 

    28 d3.csv("population.csv", function(data) {

    29 

    30   // Convert strings to numbers.

    31   data.forEach(function(d) {

    32     d.people = +d.people;

    33     d.year = +d.year;

    34     d.age = +d.age;

    35   });

    36 

    37   // Compute the extent of the data set in age and years.

    38   var age0 = 0,

    39       age1 = d3.max(data, function(d) { return d.age; }),

    40       year0 = d3.min(data, function(d) { return d.year; }),

    41       year1 = d3.max(data, function(d) { return d.year; }),

    42       year = year1;

    43 

    44   // Update the scale domains.

    45   x.domain([0, age1 + 5]);

    46   y.domain([0, d3.max(data, function(d) { return d.people; })]);

    47 

    48   // Add rules to show the population values.

    49   rules = rules.selectAll(".rule")

    50       .data(y.ticks(10))

    51     .enter().append("svg:g")

    52       .attr("class", "rule")

    53       .attr("transform", function(d) { return "translate(0," + y(d) + ")"; });

    54 

    55   rules.append("svg:line")

    56       .attr("x2", w);

    57 

    58   rules.append("svg:text")

    59       .attr("x", 6)

    60       .attr("dy", ".35em")

    61       .attr("transform", "rotate(180)")

    62       .text(function(d) { return Math.round(d / 1e6) + "M"; });

    63 

    64   // Add labeled rects for each birthyear.

    65   var years = body.selectAll("g")

    66       .data(d3.range(year0 - age1, year1 + 5, 5))

    67     .enter().append("svg:g")

    68       .attr("transform", function(d) { return "translate(" + x(year1 - d) + ",0)"; });

    69 

    70   years.selectAll("rect")

    71       .data(d3.range(2))

    72     .enter().append("svg:rect")

    73       .attr("x", 1)

    74       .attr("width", x(5) - 2)

    75       .attr("height", 1e-6);

    76 

    77   years.append("svg:text")

    78       .attr("y", -6)

    79       .attr("x", -x(5) / 2)

    80       .attr("transform", "rotate(180)")

    81       .attr("text-anchor", "middle")

    82       .style("fill", "#fff")

    83       .text(String);

    84 

    85   // Add labels to show the age.

    86   svg.append("svg:g").selectAll("text")

    87       .data(d3.range(0, age1 + 5, 5))

    88     .enter().append("svg:text")

    89       .attr("text-anchor", "middle")

    90       .attr("transform", function(d) { return "translate(" + (x(d) + x(5) / 2) + ",-4)scale(-1,-1)"; })

    91       .attr("dy", ".71em")

    92       .text(String);

    93 

    94   // Nest by year then birthyear.

    95   data = d3.nest()

    96       .key(function(d) { return d.year; })

    97       .key(function(d) { return d.year - d.age; })

    98       .rollup(function(v) { return v.map(function(d) { return d.people; }); })

    99       .map(data);

   100 

   101   // Allow the arrow keys to change the displayed year.

   102   d3.select(window).on("keydown", function() {

   103     switch (d3.event.keyCode) {

   104       case 37: year = Math.max(year0, year - 10); break;

   105       case 39: year = Math.min(year1, year + 10); break;

   106     }

   107     redraw();

   108   });

   109 

   110   redraw();

   111 

   112   function redraw() {

   113     if (!(year in data)) return;

   114     title.text(year);

   115 

   116     body.transition()

   117         .duration(750)

   118         .attr("transform", function(d) { return "translate(" + x(year - year1) + ",0)"; });

   119 

   120     years.selectAll("rect")

   121         .data(function(d) { return data[year][d] || [0, 0]; })

   122       .transition()

   123         .duration(750)

   124         .attr("height", y);

   125   }

   126 });