Population in US

Press Left <- / Right -> to navigate to different years

<!DOCTYPE html>
<html>
<head>
	<title>Population in US</title>
	<style>

.y.axis path {
			display: none;
		}

.y.axis line {
			stroke: #fff;
			stroke-opacity: .2;
			shape-rendering: crispEdges;
		}

.y.axis .major line {
			stroke: #000;
			stroke-opacity: 1;
		}

.birthyear,
		.age {
			text-anchor: middle;
		}

.birthyear {
			fill: #fff;
		}

rect {
			fill-opacity: .6;
			fill: #e377c2;
		}

rect:first-child {
			fill: #1f77b4;
		}

.title {
			font: 300 78px Helvetica Neue;
			fill: #666;
			text-anchor : end;
		}
	</style>
</head>
<body>
	<script src="https://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;

var barWidth = (width/20)-1;

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 + ')');

var xScale = d3.scale.linear().range([0, width]);
		var yScale = d3.scale.linear().range([height, 0]);

var yAxis = d3.svg.axis()
		.scale(yScale)
		.orient("right")
		// .tickSize(-(width + margin.left + margin.right))
		.tickSize(-width)
		.tickFormat(function(d) { return Math.round(d / 1e6) + "M"; });
		var initYear, minYear, maxYear, presentYear;

d3.csv('population.csv', function(d) {
			return {
				year:+d.year,
				age:+d.age,
				sex:+d.sex,
				people:+d.people,
			};
		}, function(err, data) {
			maxYear = d3.max(data, function(d) {return d.year;});
			initYear = presentYear = maxYear;
			minYear = d3.min(data, function(d) {return d.year});
			//Domains updated
			// xScale.domain([maxYear - d3.max(data, function(d) {return d.age;}), maxYear]);
			xScale.domain([0, 95]);
			yScale.domain([0, d3.max(data, function(d) {return d.people;})]);
			data = d3.nest()
			.key(function(d) {return d.year})
			.key(function(d) {return d.age})
				// .key(function(d) {return d.year - d.age})
				.rollup(function(d) {return d.map(function(s) {return s.people;})})
				.map(data);

plotGraph.call(svg, {
					data:data,
					axis:{
						y:yAxis,
					}
				});
			});

function drawAxis(params) {
			this.append('g')
			.classed("y axis", true)
			.attr('transform', 'translate(' + (width) + ',' + 0 + ')')
			.call(params.axis.y)
			.selectAll("g")
			.filter(function(val) {
				return !val;
			})
			.classed("major", true);
		}

function plotGraph(params) {
			// console.log(params.data);
			var birthyears = this.append("g")
			.classed('birthyears', true);

var title = this.append("text")
			.attr("class", "title")
			.attr("dy", ".71em")
			.text(initYear)
			.attr('transform', 'translate(' + (width) + ',' + 0 + ')')

var birthyear = birthyears.selectAll('.birthyear')
			.data(d3.range(0, 90 + 1, 5))
			.enter()
			.append('g')
			.classed('birthyear', true)
			.attr('transform', function(d) {return 'translate(' + xScale(d) + ',' + 0 + ')';} );

birthyear.selectAll('rect')
			.data(function(age) {return params.data[initYear][age] || [0,0];})
			.enter()
			.append('rect')
			.attr({
				// 'x': -barWidth/2,
				'y': yScale,
				'width': barWidth,
				'height': function(d) {return height - yScale(d);}
			});

birthyear.append('text')
			.attr('x', barWidth/2)
			.attr('y', height-4)
			.text(function(d) {return d;});

drawAxis.call(this, params);

d3.select(window).on('keydown', function() {
				switch(d3.event.keyCode) {
					case 37: initYear = Math.max(minYear, initYear-10); break;
					case 39: initYear = Math.min(maxYear, initYear+10); break;
					default: return;
				}
				if(!(initYear in params.data) || initYear === presentYear) {
					return;
				}

title.text(initYear);
				
				presentYear = initYear;
				var rects = birthyear.selectAll('rect,text');
				rects
				.remove();

birthyear.selectAll('rect')
				.data(function(age) {return params.data[initYear][age] || [0,0];})
				.enter()
				.append('rect')
				.attr('height', 0)
				.transition()
				.attr({
					'y': yScale,
					'width': barWidth,
					'height': function(d) {return height - yScale(d);}
				});

birthyear.append('text')
				.text(function(d) {return d;})
				.attr({
					'y': height-4,
					'x': barWidth/2
				});
			});
		}

</script>
</body>
</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js