Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <meta charset="utf-8">
- <style>
- svg {
- font: 10px sans-serif;
- }
- .y.axis path {
- display: none;
- }
- .y.axis line {
- stroke: #fff;
- stroke-opacity: .2;
- shape-rendering: crispEdges;
- }
- .y.axis .zero line {
- stroke: #000;
- stroke-opacity: 1;
- }
- .title {
- font: 300 78px Helvetica Neue;
- fill: #666;
- }
- .birthyear,
- .age {
- text-anchor: middle;
- }
- .birthyear {
- fill: #BD8A53;
- }
- rect {
- fill-opacity: .6;
- fill: #7F5232;
- }
- rect:first-child {
- fill: #432E27;
- }
- </style>
- <body>
- <script src="//d3js.org/d3.v3.min.js"></script>
- <script>
- var margin = {top: 20, right: 40, bottom: 30, left: 20},
- width = 960 - margin.left - margin.right,
- height = 500 - 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("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 + ")");
- // A sliding container to hold the bars by birthyear.
- var birthyears = svg.append("g")
- .attr("class", "birthyears");
- // A label for the current year.
- var title = svg.append("text")
- .attr("class", "title")
- .attr("dy", ".71em")
- .text("2018");
- d3.csv("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);
- // 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); });
- // 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) { return height - y(value); });
- }
- });
- </script>
Add Comment
Please, Sign In to add comment