D3 population chart test

Original example taken from http://bl.ocks.org/mbostock/4062085

[d3-link][/d3-link]
[d3-source canvas=”d3chart”]
var margin = {top: 20, right: 40, bottom: 30, left: 20},
width = 600 – margin.left – margin.right,
height = 300 – margin.top – margin.bottom,
barWidth = Math.floor(width / 19) – 1;

var x = d3.scale.linear().range([barWidth / 2, width – barWidth / 2]);
var y = d3.scale.linear().range([height, 0]);
var yAxis = d3.svg.axis().scale(y).orient(“right”).tickSize(-width).tickFormat(function(d) {
return Math.round(d / 1e6) + “M”; });

// An SVG element with a bottom-right origin.
var svg = d3.select(“.d3chart”).append(“svg”)
.attr(“width”, width + margin.left + margin.right)
.attr(“height”, height + margin.top + margin.bottom)
.append(“g”)
.attr(“transform”, “translate(” + margin.left + “,” + margin.top + “)”)
.style(“font”, “10px sans-serif”);

// A sliding container to hold the bars by birthyear.
var birthyears = svg.append(“g”)
.attr(“class”, “birthyears”)
.style({“fill”:”#fff”,”text-anchor”:”middle”});

// A label for the current year.
var title = svg.append(“text”)
.attr(“class”, “title”)
.attr(“dy”, “.71em”)
.text(2000)
.style({“font”:”300 78px”, “fill”:”#666″});

d3.csv(“http://veniceatlas.epfl.ch/wp-content/uploads/2013/11/population.csv”, function(error, data) {

// Convert strings to numbers.
data.forEach(function(d) {
d.people = +d.people;
d.year = +d.year;
d.age = +d.age;
});

// Compute the extent of the data set in age and years.
var age1 = d3.max(data, function(d) { return d.age; }),
year0 = d3.min(data, function(d) { return d.year; }),
year1 = d3.max(data, function(d) { return d.year; }),
year = year1;

// Update the scale domains.
x.domain([year1 – age1, year1]);
y.domain([0, d3.max(data, function(d) { return d.people; })]);

// Produce a map from year and birthyear to [male, female].
data = d3.nest()
.key(function(d) { return d.year; })
.key(function(d) { return d.year – d.age; })
.rollup(function(v) { return v.map(function(d) { return d.people; }); })
.map(data);

// Add an axis to show the population values.
svg.append(“g”)
.attr(“class”, “y axis”)
.attr(“transform”, “translate(” + width + “,0)”)
.call(yAxis)
.selectAll(“g”)
.filter(function(value) { return !value; })
.classed(“zero”, true);

svg.select(“.y.axis path”).style(“display”,”none”);
svg.select(“.y.axis line”).style({“stroke”:”#fff”,”stroke-opacity”:”.2″,”shape-rendering”:”crispEdges”});
svg.select(“.y.axis .zero line”).style({“stroke”:”black”,”stroke-opacity”:”1″});

// Add labeled rects for each birthyear (so that no enter or exit is required).
var birthyear = birthyears.selectAll(“.birthyear”)
.data(d3.range(year0 – age1, year1 + 1, 5))
.enter().append(“g”)
.attr(“class”, “birthyear”)
.attr(“transform”, function(birthyear) { return “translate(” + x(birthyear) + “,0)”; });

birthyear.selectAll(“rect”)
.data(function(birthyear) { return data[year][birthyear] || [0, 0]; })
.enter().append(“rect”)
.attr(“x”, -barWidth / 2)
.attr(“width”, barWidth)
.attr(“y”, y)
.attr(“height”, function(value) { return height – y(value); });

birthyear.selectAll(“rect”).style({“fill”:”blue”,”fill-opacity”:”0.6″});
birthyear.selectAll(“rect:first-child”).style({“fill”:”red”,”fill-opacity”:”0.6″})

// Add labels to show birthyear.
birthyear.append(“text”)
.attr(“y”, height – 4)
.text(function(birthyear) { return birthyear; });

// Add labels to show age (separate; not animated).
svg.selectAll(“.age”)
.data(d3.range(0, age1 + 1, 5))
.enter().append(“text”)
.attr(“class”, “age”)
.attr(“x”, function(age) { return x(year – age); })
.attr(“y”, height + 4)
.attr(“dy”, “.71em”)
.text(function(age) { return age; })
.style(“text-anchor”, “middle”);

// Allow the arrow keys to change the displayed year.
window.focus();
d3.select(window).on(“keydown”, function() {
switch (d3.event.keyCode) {
case 37: year = Math.max(year0, year – 10); break;
case 39: year = Math.min(year1, year + 10); break;
}
update();
});

function update() {
if (!(year in data)) return;
title.text(year);

birthyears.transition()
.duration(750)
.attr(“transform”, “translate(” + (x(year1) – x(year)) + “,0)”);

birthyear.selectAll(“rect”)
.data(function(birthyear) { return data[year][birthyear] || [0, 0]; })
.transition()
.duration(750)
.attr(“y”, y)
.attr(“height”, function(value) { return height – y(value); });
}
});
[/d3-source]