Skip to content

Instantly share code, notes, and snippets.

@tgerard

tgerard/index.html

Last active September 22, 2015 03:45
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save tgerard/9d5ba4a84b70a5a26a5c to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save tgerard/9d5ba4a84b70a5a26a5c to your computer and use it in GitHub Desktop.
Download ZIP
Birth rate and life expectancy
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Life Expectancy and Birth Rates</title>
<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
<link href="life.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<h1>UN World Population Prospects</h1>
<h3>Life expectancy and birth rates</h3>
<div id="selector"></div>
<div id="legend"></div>
<div class="clear"></div>
<script type="text/javascript">
var w = 700;
var h = 600;
var padding = [ 20, 20, 50, 50 ]; //Top, right, bottom, left
var xScale = d3.scale.linear()
.range([ padding[3], w - padding[1] ]);
var yScale = d3.scale.linear()
.range([ padding[0], h - padding[2] ]);
var xAxis = d3.svg.axis()
.scale(xScale)
.innerTickSize(-(h -padding[0] - padding[2]))
.outerTickSize(0)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left");
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
var thou = d3.format(",");
//Make the radio buttons
var selectors = ["2015", "2100 Projections"],
j = 0;
var form = d3.select("#selector").append("form");
var labelEnter = form.selectAll("span")
.data(selectors)
.enter().append("span");
labelEnter.append("input")
.attr({
type: "radio",
class: "selector",
id: function(d, i) {return "selector-" + i;},
name: "dataType",
value: function(d, i) {return i;}
})
.property("checked", function(d, i) {
return (i===j);
});
labelEnter.append("label").text(function(d) {return d;}).append("br");
d3.csv("lifeExpectancyBirthRate.csv", function(data) {
data.forEach(function(d) {
d.leCurrent = +d.le2015;
d.leProjected = +d.le2100;
d.brCurrent = +d.br2015;
d.brProjected = +d.br2100;
});
var leCurrentMin = d3.min(data, function(d) { return d.leCurrent; })
var leCurrentMax = d3.max(data, function(d) { return d.leCurrent; })
var brCurrentMax = d3.max(data, function(d) { return d.brCurrent; })
var leProjectedMin = d3.min(data, function(d) { return d.leProjected; })
var leProjectedMax = d3.max(data, function(d) { return d.leProjected; })
var brProjectedMax = d3.max(data, function(d) { return d.brProjected; })
xScale.domain([ leCurrentMin -1, leCurrentMax +2]);
yScale.domain([ brCurrentMax +0.3, 0 ]);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + (h - padding[2]) + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + padding[3] + ",0)")
.call(yAxis);
var current = svg.selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr("class", function(d) { return d.Continent + " today"; });
current.attr("cx", function(d) {
return xScale(d.leCurrent);
})
.attr("cy", function(d) {
return yScale(d.brCurrent);
})
.attr("r", 0.1)
.append("title")
.text(function(d) {
return d.Country + "'s life expectancy at birth is " + d.leCurrent + " years, and its birth rate is " + d.brCurrent + " children per woman";
});
current.sort(function(a, b) {
return d3.ascending(+a.leCurrent, +b.leCurrent);
})
.transition()
.delay(function(d, i) {
return i * 50;
})
.duration(40)
.attr("r", 5);
svg.append("text")
.attr("class", "label")
.attr("x", w / 2)
.attr("y", h - (padding[2] / 3))
.text("Life expectancy at birth");
svg.append("text")
.attr("class", "label")
.attr("transform", "translate(10,300)rotate(270)")
.text("Birth rate");
// Create legend
var legend = d3.select("#legend").append("svg");
legend.selectAll("circle")
.data(d3.map(data, function(d, i){return d.Continent;}).keys())
.enter()
.append("circle")
.attr("r", 5)
.attr("cx", 5)
.attr("cy", function(d, i){return i * 20 + 5;})
.attr("class", function(d){return d + " legendCirc";});
legend.selectAll("text")
.data(d3.map(data, function(d, i){return d.Continent;}).keys())
.enter()
.append("text")
.attr("x", 15)
.attr("y", function(d, i){return i * 20 + 8;})
.text(function(d){return d;});
// Click functions
d3.select("#selector-0").on("click", function () {
xScale.domain([ leCurrentMin -1, leCurrentMax +2]);
yScale.domain([ brCurrentMax +0.3, 0 ]);
svg.selectAll("circle")
.transition()
.duration(1000)
.attr("cx", function(d) {
return xScale(d.leCurrent);
})
.attr("cy", function(d) {
return yScale(d.brCurrent);
})
.select("title")
.text(function(d) {
return d.Country + "'s life expectancy at birth is " + d.leCurrent + " years, and its birth rate is " + d.brCurrent + " children per woman";
});
svg.selectAll(".x")
.transition()
.duration(1000)
.call(xAxis);
svg.selectAll(".y")
.transition()
.duration(1000)
.call(yAxis);
});
d3.select("#selector-1").on("click", function () {
xScale.domain([ leProjectedMin -1, leProjectedMax +2]);
yScale.domain([ brProjectedMax +0.3, 0 ]);
svg.selectAll("circle")
.transition()
.duration(1000)
.attr("cx", function(d) {
return xScale(d.leProjected);
})
.attr("cy", function(d) {
return yScale(d.brProjected);
})
.select("title")
.text(function(d) {
return d.Country + "'s life expectancy at birth is projected to be " + d.leProjected + " years, and its birth rate is projected to be " + d.brProjected + " children per woman";
});
svg.selectAll(".x")
.transition()
.duration(1000)
.call(xAxis);
svg.selectAll(".y")
.transition()
.duration(1000)
.call(yAxis);
});
});
</script>
<div id="attribution"><p>Source: <a href="http://esa.un.org/unpd/wpp/Publications/Files/Key_Findings_WPP_2015.pdf">UN World Population Prospects – key findings and advance tables 2015 revision</a></p></div>
</body>
</html>
Raw
life.css
h1, .label {
font-family: verdana, sans-serif;
font-size: 18px;
margin-bottom: 0;
}
h1, h3, .attribution {
color: #56350c;
margin-left: 50px;
}
h3 {
font-family: verdana, sans-serif;
margin-top: 0;
font-size: 14px;
}
.label {
fill: #56350c;
font-size: 14px;
text-anchor: middle;
}
.today {
opacity: 0.85;
}
.today:hover {
opacity: 1;
}
.axis path, .axis line {
fill: none;
stroke: #ccc;
shape-rendering: crispEdges;
}
.axis text {
font-family: verdana, sans-serif;
fill: #56350c;
font-size: 11px;
}
#attribution {
font: 0.7em verdana, sans-serif;
margin: 0.2em 0 2em 50px;
border-top: solid 1px #f2f6cb;
}
#selector, #legend {
font: 0.7em verdana, sans-serif;
margin-left: 50px;
width: 400px;
float: left;
}
.clear {
clear: both;
}
a, a:visited {
color: #af1e23;
text-decoration: none;
}
a:hover, a:active {
color: #af1e23;
text-decoration: underline;
}
.Africa {
fill: #c2491f;
}
.Asia {
fill: #882b3c;
}
.Europe {
fill: #af991e;
}
.South {
fill: #75963c;
}
.North {
fill: #8d5919;
}
.Oceania {
fill: #2f4e63;
}
Raw
lifeExpectancyBirthRate.csv
Country Continent le2015 le2100 br2015 br2100
Afghanistan Asia 59.8 74.9 5.13 1.74
Albania Europe 77.5 89.5 1.78 1.82
Algeria Africa 74.4 87.9 2.93 1.87
Angola Africa 51.7 75.4 6.20 2.20
Antigua and Barbuda North America 75.8 88.1 2.10 1.83
Argentina South America 76.0 88.5 2.35 1.84
Armenia Asia 74.4 85.8 1.55 1.79
Aruba North America 75.4 85.9 1.68 1.81
Australia Oceania 82.1 93.1 1.92 1.82
Austria Europe 81.1 92.5 1.47 1.83
Azerbaijan Asia 70.6 80.9 2.30 1.86
Bahamas North America 75.1 87.5 1.89 1.81
Bahrain Asia 76.4 87.0 2.10 1.77
Bangladesh Asia 71.0 84.9 2.23 1.78
Barbados North America 75.4 87.5 1.79 1.87
Belarus Europe 71.1 81.3 1.58 1.88
Belgium Europe 80.5 91.7 1.82 1.90
Belize North America 69.8 81.2 2.64 1.78
Benin Africa 59.2 72.6 4.89 2.04
Bhutan Asia 68.9 84.5 2.10 1.77
Bolivia South America 67.7 84.4 3.04 1.82
Bosnia and Herzegovina Europe 76.3 87.8 1.28 1.76
Botswana Africa 64.1 78.7 2.90 1.81
Brazil South America 74.1 88.6 1.82 1.79
Brunei Darussalam Asia 78.4 91.2 1.90 1.79
Bulgaria Europe 74.0 83.9 1.52 1.88
BurkinaFaso Africa 58.1 75.5 5.65 2.16
Burundi Africa 56.1 76.7 6.08 2.33
Cabo Verde Africa 73.0 87.2 2.37 1.79
Cambodia Asia 67.6 86.3 2.70 1.80
Cameroon Africa 54.9 77.2 4.81 2.08
Canada North America 81.8 92.2 1.61 1.80
Central African Republic Africa 49.5 78.4 4.41 1.90
Chad Africa 51.1 75.9 6.31 2.12
Channel Islands Europe 80.4 91.1 1.46 1.72
Chile. South America 81.2 93.5 1.78 1.82
China Asia 75.4 89.9 1.55 1.81
Colombia South America 73.7 87.2 1.93 1.79
Comoros Africa 62.8 78.8 4.60 2.00
Congo Africa 61.4 79.0 4.95 2.30
CostaRica North America 79.2 90.1 1.85 1.80
Côte d’Ivoire Africa 51.0 77.7 5.10 2.31
Croatia Europe 77.0 88.8 1.52 1.79
Cuba North America 79.2 90.4 1.63 1.80
Curaçao North America 77.8 89.1 2.10 1.87
Cyprus Asia 79.9 90.9 1.46 1.79
CzechRepublic Europe 78.3 89.2 1.45 1.86
North Korea Asia 69.9 85.1 2.00 1.83
Democratic Republic of the Congo Africa 58.1 77.7 6.15 2.13
Denmark Europe 80.0 90.6 1.73 1.88
Djibouti Africa 61.6 75.9 3.30 1.81
Dominican Republic North America 73.2 85.6 2.53 1.79
Ecuador South America 75.5 89.0 2.59 1.80
Egypt Africa 70.8 84.3 3.38 1.90
El Salvador North America 72.6 86.4 1.97 1.77
Equatorial Guinea Africa 57.1 80.4 4.97 1.92
Eritrea Africa 63.1 80.4 4.40 1.93
Estonia Europe 76.5 87.4 1.59 1.87
Ethiopia Africa 63.1 81.3 4.59 1.79
Fiji Oceania 69.7 83.1 2.61 1.83
Finland Europe 80.5 91.6 1.75 1.85
France Europe 81.8 92.7 2.00 1.95
French Guiana South America 79.0 92.5 3.48 2.02
French Polynesia Oceania 76.1 90.1 2.07 1.79
Gabon Africa 63.7 79.5 4.00 1.93
Gambia Africa 59.8 72.4 5.78 2.04
Georgia Asia 74.6 86.4 1.81 1.87
Germany Europe 80.6 92.0 1.39 1.74
Ghana Africa 61.0 73.5 4.25 2.03
Greece Europe 80.6 91.7 1.34 1.77
Grenada North America 73.2 85.5 2.18 1.80
Guadeloupe North America 80.5 93.7 2.17 1.87
Guam Oceania 78.7 92.7 2.42 1.83
Guatemala North America 71.5 85.4 3.30 1.83
Guinea Africa 58.0 80.3 5.13 2.06
Guinea-Bissau Africa 54.7 71.8 4.95 2.05
Guyana South America 66.3 75.9 2.60 1.83
Haiti North America 62.3 78.9 3.13 1.80
Honduras North America 72.8 86.1 2.47 1.78
Hungary Europe 75.0 85.8 1.34 1.77
Iceland Europe 82.3 92.8 1.96 1.82
India Asia 67.5 84.6 2.48 1.80
Indonesia Asia 68.6 81.2 2.50 1.84
Iran Asia 75.1 85.4 1.75 1.79
Iraq Asia 69.2 80.6 4.64 2.24
Ireland Europe 80.6 91.5 2.01 1.93
Israel Asia 82.1 93.6 3.05 1.94
Italy Europe 82.8 94.2 1.43 1.81
Jamaica North America 75.4 86.6 2.08 1.81
Japan Asia 83.3 93.7 1.40 1.81
Jordan Asia 73.8 85.8 3.51 1.80
Kazakhstan Asia 69.1 80.2 2.64 1.88
Kenya Africa 60.6 79.5 4.44 1.97
Kiribati Oceania 65.7 78.6 3.79 2.05
Kuwait Asia 74.3 84.6 2.15 1.86
Kyrgyzstan Asia 70.3 81.0 3.12 1.91
Laos Asia 65.5 84.8 3.10 1.79
Latvia Europe 73.9 84.2 1.48 1.85
Lebanon Asia 78.9 92.0 1.72 1.81
Lesotho Africa 49.5 76.3 3.26 1.85
Liberia Africa 60.3 76.2 4.83 2.09
Libya Africa 71.5 84.1 2.53 1.81
Lithuania Europe 73.1 83.8 1.57 1.87
Luxembourg Europe 81.3 93.0 1.57 1.82
Madagascar Africa 64.5 82.0 4.50 2.14
Malawi Africa 61.0 80.4 5.25 2.23
Malaysia Asia 74.5 86.9 1.97 1.79
Maldives Asia 76.4 87.8 2.18 1.80
Mali Africa 57.2 80.5 6.35 2.13
Malta Europe 80.3 91.5 1.43 1.81
Martinique North America 81.2 94.2 1.95 1.84
Mauritania Africa 62.8 72.7 4.69 2.18
Mauritius Africa 74.1 86.8 1.50 1.79
Mayotte Africa 79.3 92.4 4.10 1.83
Mexico North America 76.5 89.4 2.29 1.79
Micronesia Oceania 68.9 80.8 3.33 1.83
Mongolia Asia 68.9 85.7 2.68 1.93
Montenegro Europe 76.0 86.2 1.71 1.80
Morocco Africa 73.6 86.9 2.56 1.82
Mozambique Africa 54.6 76.8 5.45 2.19
Myanmar Asia 65.6 77.0 2.25 1.80
Namibia Africa 64.3 79.4 3.60 1.85
Nepal Asia 69.0 85.6 2.32 1.78
Netherlands Europe 81.3 91.6 1.75 1.86
New Caledonia Oceania 76.2 89.5 2.13 1.83
New Zealand Oceania 81.6 92.6 2.05 1.82
Nicaragua North America 74.5 88.6 2.32 1.79
Niger Africa 60.7 77.3 7.63 2.49
Nigeria Africa 52.3 73.5 5.74 2.27
Norway Europe 81.3 91.7 1.80 1.87
Oman Asia 76.4 89.6 2.88 1.79
Pakistan Asia 65.9 79.0 3.72 1.83
Panama North America 77.3 88.3 2.48 1.83
Papua New Guinea Oceania 62.3 75.0 3.84 1.98
Paraguay South America 72.7 83.3 2.60 1.79
Peru South America 74.2 89.0 2.50 1.79
Philippines Asia 68.0 79.8 3.04 1.83
Poland Europe 77.1 88.4 1.37 1.78
Portugal Europe 80.5 92.9 1.28 1.76
Puerto Rico North America 79.2 90.0 1.64 1.79
Qatar Asia 77.9 89.0 2.08 1.78
South Korea Asia 81.4 93.6 1.26 1.76
Moldova Europe 71.3 80.4 1.27 1.77
Réunion Africa 79.5 92.4 2.24 1.84
Romania Europe 74.5 85.9 1.48 1.82
Russia Europe 69.8 80.3 1.66 1.91
Rwanda Africa 63.1 81.3 4.05 1.73
Saint Lucia North America 74.8 86.5 1.92 1.79
St. Vincent and the Grenadines North America 72.7 83.2 2.01 1.80
Samoa Oceania 73.0 87.6 4.16 2.04
Sao Tome and Principe Africa 66.2 76.0 4.67 2.14
Saudi Arabia Asia 74.1 85.3 2.85 1.78
Senegal Africa 65.8 84.9 5.18 2.28
Serbia Europe 74.6 86.1 1.56 1.82
Seychelles Africa 72.9 85.4 2.33 1.85
Sierra Leone Africa 50.2 70.2 4.79 1.86
Singapore Asia 82.6 94.1 1.23 1.49
Slovakia Europe 76.0 86.7 1.37 1.80
Slovenia Europe 80.1 91.3 1.58 1.89
Solomon Islands Oceania 67.5 81.4 4.06 1.94
Somalia Africa 54.9 74.1 6.61 2.28
South Africa Africa 57.1 77.6 2.40 1.80
South Sudan Africa 55.1 73.0 5.15 2.04
Spain Europe 82.3 93.0 1.32 1.75
Sri Lanka Asia 74.6 87.3 2.11 1.82
Palestine Asia 72.6 85.2 4.28 1.95
Sudan Africa 63.1 77.1 4.46 2.03
Suriname South America 70.9 82.8 2.40 1.81
Swaziland Africa 49.2 75.7 3.36 1.80
Sweden Europe 81.9 92.3 1.92 1.94
Switzerland Europe 82.7 93.4 1.52 1.83
Syria Asia 69.5 84.4 3.03 1.77
Tajikistan Asia 69.1 81.0 3.55 1.91
FYR Macedonia Europe 75.2 87.0 1.51 1.81
Thailand Asia 74.1 87.0 1.53 1.78
Timor-Leste Asia 67.7 83.0 5.91 1.94
Togo Africa 59.0 77.7 4.69 2.07
Tonga Oceania 72.6 85.3 3.79 2.01
Trinidad and Tobago North America 70.2 80.5 1.80 1.81
Tunisia Africa 74.6 85.9 2.16 1.84
Turkey Asia 74.8 88.5 2.10 1.80
Turkmenistan Asia 65.4 76.1 2.34 1.79
Uganda Africa 57.2 77.0 5.91 2.12
Ukraine Europe 70.7 79.1 1.49 1.84
United Arab Emirates Asia 76.7 88.8 1.82 1.79
United Kingdom Europe 80.4 91.0 1.92 1.89
Tanzania Africa 64.0 80.0 5.24 2.32
United States North America 78.9 89.3 1.89 1.93
Uruguay South America 77.0 88.3 2.04 1.83
Uzbekistan Asia 68.2 77.7 2.48 1.83
Vanuatu Oceania 71.5 86.0 3.41 1.90
Venezuela South America 73.9 87.0 2.40 1.80
Viet Nam Asia 75.6 87.0 1.96 1.91
Western Sahara Africa 67.6 85.1 2.20 1.78
Yemen Asia 63.5 76.0 4.35 1.69
Zambia Africa 58.8 78.5 5.45 2.58
Zimbabwe Africa 54.8 78.2 4.02 1.85
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment