An implementation in D3 of Figure 4-41 "World population over the past five decades" in "Visualize This" by Nathan Yau.
Last active
December 23, 2015 14:39
-
-
Save ckuijjer/6650460 to your computer and use it in GitHub Desktop.
World population over the past five decades
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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