M-dwarfs   Kepler   Segue       A. M. Price-Whelan  // An SVG element with a bottom-right origin.  var svg = d3.select("body").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 + ")"); J. E. G. Peek  // A sliding container to hold the bars by birthyear.  var birthyears = svg.append("g")  .attr("class", "birthyears"); E. R. Newton  // A label for the current year.  var title = svg.append("text")  .attr("class", "title")  .attr("dy", ".71em")  .text(2000);  function make_graph(data) { M. Borkin  // Convert strings to numbers.  data.forEach(function(d) {  d.people = +d.people;  d.year = +d.year;  d.age = +d.age;  });  nate_csv = data; J. Allen  // 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; R. Angus  // Update the scale domains.  x.domain([year1 - age1, year1]);  y.domain([0, d3.max(data, function(d) { return d.people; })]); D. Muna  // 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);  // 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); }); T. Staley  // 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; });  // 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)