Line chart of world population over time. Data from the United Nations Population Estimates. This is example 36 from the screencast Splitting Charts.
MIT License
forked from curran's block: World Population Line Chart
license: mit |
Line chart of world population over time. Data from the United Nations Population Estimates. This is example 36 from the screencast Splitting Charts.
MIT License
forked from curran's block: World Population Line Chart
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<title>D3 Example</title> | |
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> | |
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'> | |
<style> | |
body { | |
margin: 0px; | |
} | |
.chart-line { | |
fill: none; | |
stroke: black; | |
stroke-width: 5px; | |
} | |
.axis text { | |
font-family: 'Open Sans', sans-serif; | |
font-size: 12pt; | |
} | |
.axis .label { | |
font-size: 18pt; | |
} | |
.axis path, .axis line { | |
fill: none; | |
stroke: #000; | |
shape-rendering: crispEdges; | |
} | |
</style> | |
</head> | |
<body> | |
<script> | |
var outerWidth = 960; | |
var outerHeight = 500; | |
var margin = { left: 64, top: 3, right: 15, bottom: 56 }; | |
var xColumn = "year"; | |
var yColumn = "population"; | |
var xAxisLabelText = "Time"; | |
var xAxisLabelOffset = 48; | |
var yAxisLabelText = "World Population"; | |
var yAxisLabelOffset = 40; | |
var innerWidth = outerWidth - margin.left - margin.right; | |
var innerHeight = outerHeight - margin.top - margin.bottom; | |
var svg = d3.select("body").append("svg") | |
.attr("width", outerWidth) | |
.attr("height", outerHeight); | |
var g = svg.append("g") | |
.attr("transform", "translate(" + margin.left + "," + margin.top + ")"); | |
var path = g.append("path") | |
.attr("class", "chart-line"); | |
var xAxisG = g.append("g") | |
.attr("class", "x axis") | |
.attr("transform", "translate(0," + innerHeight + ")") | |
var xAxisLabel = xAxisG.append("text") | |
.style("text-anchor", "middle") | |
.attr("transform", "translate(" + (innerWidth / 2) + "," + xAxisLabelOffset + ")") | |
.attr("class", "label") | |
.text(xAxisLabelText); | |
var yAxisG = g.append("g") | |
.attr("class", "y axis"); | |
var yAxisLabel = yAxisG.append("text") | |
.style("text-anchor", "middle") | |
.attr("transform", "translate(-" + yAxisLabelOffset + "," + (innerHeight / 2) + ") rotate(-90)") | |
.attr("class", "label") | |
.text(yAxisLabelText); | |
var xScale = d3.time.scale().range([0, innerWidth]); | |
var yScale = d3.scale.linear().range([innerHeight, 0]); | |
// Use a modified SI formatter that uses "B" for Billion. | |
var siFormat = d3.format("s"); | |
var customTickFormat = function (d){ | |
return siFormat(d).replace("G", "B"); | |
}; | |
var xAxis = d3.svg.axis().scale(xScale).orient("bottom") | |
.ticks(12) | |
.outerTickSize(0); | |
var yAxis = d3.svg.axis().scale(yScale).orient("left") | |
.ticks(10) | |
.tickFormat(customTickFormat) | |
.outerTickSize(0); | |
var line = d3.svg.line() | |
.x(function(d) { return xScale(d[Year]); }) | |
.y(function(d) { return yScale(d[Better_Man_work]); }); | |
var Year | |
var Better_Man_work | |
function render(data){ | |
xScale.domain(d3.extent(data, function (d){ return d[Year]; })); | |
yScale.domain([0, d3.max(data, function (d){ return d[Better_Man_work]; })]); | |
xAxisG.call(xAxis); | |
yAxisG.call(yAxis); | |
path.attr("d", line(data)); | |
} | |
function type(d){ | |
d.Year = d.Year; | |
d.Better_Man_work = d.Better_Man_Work; | |
return d; | |
} | |
d3.csv("Society_Data.csv", type, render); | |
</script> | |
</body> | |
</html> |
Year | Better_Man_Work | kids_suffer | Good_relate | Women_in_congress | |
---|---|---|---|---|---|
1990 | 59.1 | 49.3 | 63.2 | 5.8 | |
1991 | 57.7 | 50.8 | 65.2 | 5.8 | |
1992 | 60.8 | 53.3 | 66.1 | 6.2 | |
1993 | 63.9 | 55.7 | 67 | 6.2 | |
1994 | 64.2 | 57.8 | 69.4 | 10.3 | |
1995 | 62.4 | 54.8 | 67.5 | 10.3 | |
1996 | 60.6 | 51.8 | 65.6 | 11 | |
1997 | 62.6 | 54.1 | 66.3 | 11 | |
1998 | 64.5 | 56.3 | 67 | 12.3 | |
1999 | 61.5 | 54.1 | 64 | 12.3 | |
2000 | 58.4 | 51.9 | 60.9 | 12.5 | |
2001 | 59.4 | 52.6 | 61.8 | 12.5 | |
2002 | 60.3 | 53.2 | 62.7 | 14 | |
2003 | 61.4 | 54.8 | 63.4 | 14 | |
2004 | 62.4 | 56.4 | 64 | 14.4 | |
2005 | 63.2 | 57.5 | 65.2 | 14.4 | |
2006 | 64 | 58.6 | 66.3 | 15.9 | |
2007 | 63.9 | 61.3 | 69.2 | 15.9 | |
2008 | 63.7 | 64 | 72 | 17.6 | |
2009 | 64 | 64.1 | 73.3 | 17.6 | |
2010 | 64.2 | 64.2 | 74.6 | 17.9 | |
2011 | 65.9 | 64.1 | 73 | 17.9 | |
2012 | 67.6 | 63.9 | 71.3 | 17.9 | |
2013 | 68 | 66.2 | 73.7 | 17.9 | |
2014 | 68.4 | 68.4 | 76.1 | 19.1 | |
2015 | 70.5 | 70.2 | 75.6 | 19.1 | |
2016 | 72.5 | 72 | 75 | 19.4 |