Skip to content

Instantly share code, notes, and snippets.

@ckuijjer
Last active December 23, 2015 14:39
Show Gist options
  • Save ckuijjer/6650460 to your computer and use it in GitHub Desktop.
Save ckuijjer/6650460 to your computer and use it in GitHub Desktop.
World population over the past five decades

An implementation in D3 of Figure 4-41 "World population over the past five decades" in "Visualize This" by Nathan Yau.

<!DOCTYPE html>
<body>
<style>
body {
font-family: Georgia;
font-size: 14px;
color: #333;
}
#container {
width: 640px;
height: 500px;
margin: 0 auto;
position: relative;
border: 1px solid #eee;
}
#inner-container {
position: absolute;
top: 20px;
left: 20px;
bottom: 20px;
right: 20px;
}
#header {
font-size: 20px;
font-weight: bold;
}
#description {
position: absolute;
width: 270px;
right: 0;
top: 310px;
line-height: 1.6em;
}
svg {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
}
.axis-rule {
shape-rendering: crispEdges;
stroke: #eee;
}
.axis-rule.zero {
stroke-width: 2;
stroke: #000;
}
.axis .domain {
display: none;
}
.axis.x line {
shape-rendering: crispEdges;
stroke: #999;
}
.line {
fill-opacity: 0;
stroke-width: 4;
stroke: #8b001b;
}
</style>
<div id="container">
<div id="inner-container">
<div id="header">WORLD POPULATION</div>
<div id="description">The world population has grown from just over 3 billion to nearly 7 billion over the past five decades.</div>
</div>
</div>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
var width = 640,
height = 500,
margin = { top: 90, right: 20, bottom: 40, left: 20},
padding = { top: 0, right: 10, bottom: 0, left: 50 };
// Width/height of the chart without margin and padding
var chartWidth = width - margin.left - margin.right - padding.left - padding.right;
var chartHeight = height - margin.top - margin.bottom - padding.top - padding.bottom;
var xValue = function(d) { return d.year; },
xScale = d3.scale.linear().range([0, chartWidth]),
xMap = function(d) { return xScale(xValue(d)); },
xAxis = d3.svg.axis()
.scale(xScale)
.tickFormat(d3.format('f'))
.tickSize(8)
.ticks(6)
.orient('bottom');
var yValue = function(d) { return d.population; },
yScale = d3.scale.linear().range([chartHeight, 0]),
yMap = function(d) { return yScale(yValue(d)); },
yAxis = d3.svg.axis()
.scale(yScale)
.orient('right');
var svg = d3.select('#container').append('svg')
.attr('width', width)
.attr('height', height);
var chart = svg.append('g')
.attr('class', 'chart')
.attr('transform', 'translate(' + (margin.left + padding.left) + ', ' + (margin.top + padding.top) + ')');
var csvfile = 'world-population.csv';
d3.csv(csvfile, function(d) {
return {
year: +d.Year,
population: +d.Population / Math.pow(10, 9)
};
}, function(error, data) {
// Set the domain based on the data
xScale.domain(d3.extent(data, xValue)).nice();
yScale.domain([0, d3.max(data, yValue)]).nice();
// Render the X axis
chart.append('g')
.attr('class', 'axis x')
.attr('transform', 'translate(0, ' + chartHeight + ')')
.call(xAxis)
// Render the Y axis
chart.append('g')
.attr('transform', 'translate(' + (-padding.left - 5) + ', -12)')
.attr('class', 'axis y')
.call(yAxis)
.append('text')
.attr('x', 24)
.attr('y', 6)
.style('text-anchor', 'start')
.text('billion people');
// Render the Y axis rulers
chart.selectAll('.axis-rule.x')
.data(yScale.ticks(7))
.enter()
.append('line')
.attr('class', function(d) {
var cls = 'axis-rule x'
if (d == 0) {
cls += ' zero';
}
return cls;
})
.attr('x1', -padding.left)
.attr('x2', chartWidth + padding.right)
.attr('y1', function(d) { return yScale(d); })
.attr('y2', function(d) { return yScale(d); })
// Render the line
chart.append('path')
.datum(data)
.attr('class', 'line')
.attr('d', d3.svg.line()
.x(xMap)
.y(yMap));
});
</script>
</body>
Year Population
1960 3028654024
1961 3068356747
1962 3121963107
1963 3187471383
1964 3253112403
1965 3320396924
1966 3390712300
1967 3460521851
1968 3531547287
1969 3606994959
1970 3682870688
1971 3761750672
1972 3839147707
1973 3915742695
1974 3992806090
1975 4068032705
1976 4141383058
1977 4214499013
1978 4288485981
1979 4363754326
1980 4439638086
1981 4516734312
1982 4595890494
1983 4675178812
1984 4753877875
1985 4834206631
1986 4918126890
1987 5004006066
1988 5090899475
1989 5178059174
1990 5266783430
1991 5351836347
1992 5433823608
1993 5516863641
1994 5598658151
1995 5681689325
1996 5762235749
1997 5842585301
1998 5921799957
1999 6001269553
2000 6078274622
2001 6155652495
2002 6232413711
2003 6309266583
2004 6385778679
2005 6462054420
2006 6538196688
2007 6614396907
2008 6692030277
2009 6775235741
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment