Skip to content

Instantly share code, notes, and snippets.

@yan2014

yan2014/index.html

Last active October 22, 2015 17:59
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save yan2014/7e7d91af038d7f5ed88c to your computer and use it in GitHub Desktop.
Save yan2014/7e7d91af038d7f5ed88c to your computer and use it in GitHub Desktop.
Download ZIP
Week 7: Dots on Lines
Raw
index.html
<!DOCcountry html>
<head>
<meta charset="utf-8">
<style>
.graph .axis path {
fill: none;
stroke: #ccc;
shape-rendering: crispEdges;
}
.graph .axis text {
font-family: Helvetica, Arial, sans-serif;
font-size: 13px;
fill: #333;
}
.axis path,
.axis line {
fill: #888888;
stroke: #000;
shape-rendering: crispEdges;
}
.countries {
stroke: gray;
}
.focus text {
text-anchor: middle;
text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, 0 -1px 0 #fff, -1px 0 0 #fff;
}
.voronoi path {
fill: none;
pointer-events: all;
}
.voronoi--show path {
stroke: red;
stroke-opacity: .2;
}
.line-hover {
stroke: #000;
stroke-width: 3;
}
</style>
<title>Under Five Mortality Rate</title>
</head>
<body>
<h1>Under Five Mortality Rate</h1>
<p>Data source: <a href="http://www.unicef.org/statistics/index_countrystats.html">http://www.unicef.org/statistics/index_countrystats.html</a></p>
<p>Format for tooltip: "Country:Year,Mortality Rate"</p>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var width = 800;
var height = 600;
var dateFormat = d3.time.format("%Y");
var margin = {top: 20, right: 100, bottom: 40, left:25};
var xScale = d3.time.scale()
.range([ margin.left, width - margin.right - margin.left ]);
var yScale = d3.scale.linear()
.range([ margin.top,height - margin.bottom ]);
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom")
.ticks(4)
.tickFormat(function(d) {
return dateFormat(d);
})
.innerTickSize([0]);
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left")
.innerTickSize([0]);
var svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);
d3.csv("under 5 mortality rate.csv", function(error, data) {
data.forEach(function(d) {
d.Year = dateFormat.parse(d.Year);
d.number = +d.number;
});
var years = ["1970","1990","2000","2013"];
var graph = d3.select("svg")
.attr("class","graph");
xScale.domain(
d3.extent(years, function(d) {
return dateFormat.parse(d);
}));
yScale.domain([
d3.max(data, function(d) {
return d.number;
}),
0
]);
graph.append("svg:g")
.attr("transform", "translate(0," + (height - margin.bottom) + ")")
.attr("class", "axis")
.call(xAxis);
graph.append("svg:g")
.attr("transform", "translate(" + margin.left + ",0)")
.attr("class", "axis")
.call(yAxis);
var kind = d3.nest()
.key(function(d) {
return d.country;
})
.entries(data);
var vor = d3.nest()
.key(function(d) {
return xScale(d.Year) + "," + yScale(d.number);
})
.rollup(function(v) {
return v[0];
})
.entries(d3.merge(kind.map(function(d) {
return d.values;
})))
.map(function(d) {
return d.values;
});
console.log(vor);
var voronoi = d3.geom.voronoi()
.x(function(d) {
return xScale(d.Year);
})
.y(function(d) {
return yScale(d.number);
})
.clipExtent([
[margin.left, margin.top],
[width-margin.left, height-margin.bottom]
]);
var line = d3.svg.line()
.x(function(d) {
return xScale(d.Year);
})
.y(function(d) {
return yScale(d.number);
});
graph.append("g")
.attr("class", "countries")
.selectAll("path")
.data(kind)
.enter().append("path")
.attr("class", function(d) {
return d.key;
})
.attr("fill", "none")
.attr("d", function(d) {
d.line = this;
return line(d.values);
});
var focus = graph.append("g")
.attr("transform", "translate(-100,-100)")
.attr("class", "focus");
focus.append("circle")
.attr("r", 3.5);
focus.append("text")
.attr("y", -10);
var voronoiGroup = graph.append("g")
.attr("class", "voronoi");
voronoiGroup.selectAll("path")
.data(voronoi(vor))
.enter().append("path")
.attr("d", function(d) {
return "M" + d.join("L") + "Z";
})
.datum(function(d) {
//console.log(d);
return d.point;
})
.on("mouseover", mouseover)
.on("mouseout", mouseout);
d3.select("#show-voronoi")
.property("disabled", false)
.on("change", function() {
voronoiGroup.classed("voronoi--show", this.checked);
});
function mouseover(d) {
d3.select('.'+d.country).classed("line-hover", true);
focus.attr("transform", "translate(" + xScale(d.Year) + "," + yScale(d.number) + ")");
focus.select("text").text(d.country+":"+dateFormat(d.Year)+","+d.number);
}
function mouseout(d) {
d3.select('.'+d.country).classed("line-hover", false);
focus.attr("transform", "translate(-100,-100)");
}
});
</script>
</body>
</html>
Raw
under 5 mortality rate.csv
Year country number
1970 Afghanistan 309
1970 Algeria 245
1970 Argentina 73
1970 Australia 21
1970 Austria 29
1970 Bahamas 31
1970 Bahrain 76
1970 Bangladesh 224
1970 Barbados 48
1970 Belgium 24
1970 Belize 96
1970 Benin 266
1970 Bhutan 273
1970 Bolivia (Plurinational State of) 231
1970 Botswana 122
1970 Brazil 132
1970 Bulgaria 39
1970 Burkina Faso 321
1970 Burundi 248
1970 Cabo Verde 161
1970 Cameroon 212
1970 Canada 22
1970 Central African Republic 216
1970 Chad 272
1970 Chile 79
1970 China 113
1970 Colombia 97
1970 Comoros 226
1970 Congo 153
1970 Cook Islands 52
1970 Costa Rica 76
1970 C0sta Ricadsc 241
1970 Cuba 43
1970 Democratic Republic of the Congo 267
1970 Denmark 17
1970 Dominica 64
1970 Dominican Republic 121
1970 Ecuador 138
1970 Egypt 240
1970 El Salvador 155
1970 Eritrea 217
1970 Ethiopia 240
1970 Fiji 55
1970 Finland 16
1970 France 18
1970 Gambia 302
1970 Germany 26
1970 Ghana 201
1970 Greece 38
1970 Guatemala 174
1970 Guinea 326
1970 Guinea-Bissau 277
1970 Guyana 74
1970 Haiti 249
1970 Honduras 146
1970 Hungary 43
1970 Iceland 16
1970 India 213
1970 Indonesia 167
1970 Iran (Islamic Republic of) 227
1970 Iraq 116
1970 Ireland 22
1970 Italy 34
1970 Jamaica 57
1970 Japan 18
1970 Jordan 90
1970 Kenya 148
1970 Kiribati 140
1970 Kuwait 71
1970 Kyrgyzstan 120
1970 Lebanon 62
1970 Lesotho 176
1970 Liberia 282
1970 Libya 137
1970 Lithuania 25
1970 Luxembourg 22
1970 Madagascar 166
1970 Malawi 344
1970 Malaysia 56
1970 Maldives 262
1970 Mali 398
1970 Malta 28
1970 Marshall Islands 87
1970 Mauritania 195
1970 Mauritius 83
1970 Mexico 108
1970 Morocco 190
1970 Mozambique 271
1970 Myanmar 178
1970 Namibia 98
1970 Nepal 271
1970 Netherlands 16
1970 New Zealand 21
1970 Nicaragua 174
1970 Niger 325
1970 Nigeria 287
1970 Norway 16
1970 Oman 229
1970 Pakistan 188
1970 Panama 68
1970 Papua New Guinea 144
1970 Paraguay 78
1970 Peru 164
1970 Philippines 84
1970 Poland 36
1970 Portugal 68
1970 Qatar 66
1970 Republic of Korea 52
1970 Romania 66
1970 Russian Federation 45
1970 Rwanda 217
1970 Saint Kitts and Nevis 70
1970 Saint Lucia 75
1970 Saint Vincent and the Grenadines 81
1970 Sao Tome and Principe 88
1970 Senegal 290
1970 Seychelles 72
1970 Sierra Leone 339
1970 Singapore 27
1970 Solomon Islands 107
1970 South Sudan 328
1970 Spain 29
1970 Sri Lanka 71
1970 Sudan 155
1970 Swaziland 170
1970 Sweden 13
1970 Switzerland 18
1970 Syrian Arab Republic 105
1970 Thailand 99
1970 Togo 226
1970 Tonga 51
1970 Trinidad and Tobago 52
1970 Tunisia 179
1970 Turkey 187
1970 Uganda 184
1970 United Arab Emirates 98
1970 United Kingdom 21
1970 United Republic of Tanzania 214
1970 United States 23
1970 Uruguay 54
1970 Vanuatu 109
1970 Venezuela (Bolivarian Republic of) 62
1970 Viet Nam 88
1970 Yemen 323
1970 Zambia 181
1970 Zimbabwe 113
1990 Afghanistan 179
1990 Algeria 47
1990 Argentina 28
1990 Australia 9
1990 Austria 10
1990 Bahamas 24
1990 Bahrain 23
1990 Bangladesh 144
1990 Barbados 18
1990 Belgium 10
1990 Belize 40
1990 Benin 179
1990 Bhutan 134
1990 Bolivia (Plurinational State of) 123
1990 Botswana 50
1990 Brazil 62
1990 Bulgaria 22
1990 Burkina Faso 202
1990 Burundi 171
1990 Cabo Verde 63
1990 Cameroon 136
1990 Canada 8
1990 Central African Republic 177
1990 Chad 215
1990 Chile 19
1990 China 54
1990 Colombia 35
1990 Comoros 125
1990 Congo 92
1990 Cook Islands 24
1990 Costa Rica 17
1990 C0sta Ricadsc 152
1990 Cuba 13
1990 Democratic Republic of the Congo 176
1990 Denmark 9
1990 Dominica 17
1990 Dominican Republic 60
1990 Ecuador 57
1990 Egypt 85
1990 El Salvador 60
1990 Eritrea 151
1990 Ethiopia 205
1990 Fiji 30
1990 Finland 7
1990 France 9
1990 Gambia 170
1990 Germany 9
1990 Ghana 128
1990 Greece 13
1990 Guatemala 81
1990 Guinea 238
1990 Guinea-Bissau 225
1990 Guyana 61
1990 Haiti 145
1990 Honduras 59
1990 Hungary 19
1990 Iceland 6
1990 India 126
1990 Indonesia 84
1990 Iran (Islamic Republic of) 57
1990 Iraq 53
1990 Ireland 9
1990 Italy 10
1990 Jamaica 30
1990 Japan 6
1990 Jordan 37
1990 Kenya 99
1990 Kiribati 95
1990 Kuwait 17
1990 Kyrgyzstan 66
1990 Lebanon 32
1990 Lesotho 86
1990 Liberia 248
1990 Libya 42
1990 Lithuania 17
1990 Luxembourg 9
1990 Madagascar 161
1990 Malawi 245
1990 Malaysia 17
1990 Maldives 94
1990 Mali 254
1990 Malta 11
1990 Marshall Islands 50
1990 Mauritania 118
1990 Mauritius 23
1990 Mexico 46
1990 Morocco 81
1990 Mozambique 237
1990 Myanmar 109
1990 Namibia 74
1990 Nepal 142
1990 Netherlands 8
1990 New Zealand 11
1990 Nicaragua 67
1990 Niger 327
1990 Nigeria 213
1990 Norway 9
1990 Oman 39
1990 Pakistan 139
1990 Panama 31
1990 Papua New Guinea 89
1990 Paraguay 46
1990 Peru 80
1990 Philippines 59
1990 Poland 17
1990 Portugal 15
1990 Qatar 21
1990 Republic of Korea 7
1990 Romania 38
1990 Russian Federation 26
1990 Rwanda 152
1990 Saint Kitts and Nevis 29
1990 Saint Lucia 23
1990 Saint Vincent and the Grenadines 25
1990 Sao Tome and Principe 110
1990 Senegal 141
1990 Seychelles 17
1990 Sierra Leone 268
1990 Singapore 8
1990 Solomon Islands 39
1990 South Sudan 253
1990 Spain 11
1990 Sri Lanka 21
1990 Sudan 128
1990 Swaziland 74
1990 Sweden 7
1990 Switzerland 8
1990 Syrian Arab Republic 37
1990 Thailand 37
1990 Togo 146
1990 Tonga 23
1990 Trinidad and Tobago 31
1990 Tunisia 52
1990 Turkey 74
1990 Uganda 179
1990 United Arab Emirates 17
1990 United Kingdom 9
1990 United Republic of Tanzania 167
1990 United States 11
1990 Uruguay 23
1990 Vanuatu 33
1990 Venezuela (Bolivarian Republic of) 30
1990 Viet Nam 51
1990 Yemen 125
1990 Zambia 193
1990 Zimbabwe 75
2000 Afghanistan 136
2000 Algeria 40
2000 Argentina 20
2000 Australia 6
2000 Austria 6
2000 Bahamas 16
2000 Bahrain 13
2000 Bangladesh 88
2000 Barbados 16
2000 Belgium 6
2000 Belize 25
2000 Benin 146
2000 Bhutan 79
2000 Bolivia (Plurinational State of) 77
2000 Botswana 85
2000 Brazil 33
2000 Bulgaria 21
2000 Burkina Faso 186
2000 Burundi 149
2000 Cabo Verde 35
2000 Cameroon 151
2000 Canada 6
2000 Central African Republic 174
2000 Chad 191
2000 Chile 11
2000 China 37
2000 Colombia 25
2000 Comoros 101
2000 Congo 121
2000 Cook Islands 17
2000 Costa Rica 13
2000 C0sta Ricadsc 146
2000 Cuba 8
2000 Democratic Republic of the Congo 176
2000 Denmark 6
2000 Dominica 16
2000 Dominican Republic 41
2000 Ecuador 34
2000 Egypt 45
2000 El Salvador 32
2000 Eritrea 89
2000 Ethiopia 146
2000 Fiji 24
2000 Finland 4
2000 France 5
2000 Gambia 119
2000 Germany 5
2000 Ghana 101
2000 Greece 8
2000 Guatemala 51
2000 Guinea 170
2000 Guinea-Bissau 181
2000 Guyana 49
2000 Haiti 104
2000 Honduras 38
2000 Hungary 11
2000 Iceland 4
2000 India 91
2000 Indonesia 52
2000 Iran (Islamic Republic of) 35
2000 Iraq 45
2000 Ireland 7
2000 Italy 6
2000 Jamaica 24
2000 Japan 5
2000 Jordan 28
2000 Kenya 111
2000 Kiribati 71
2000 Kuwait 13
2000 Kyrgyzstan 49
2000 Lebanon 20
2000 Lesotho 115
2000 Liberia 175
2000 Libya 28
2000 Lithuania 12
2000 Luxembourg 5
2000 Madagascar 111
2000 Malawi 174
2000 Malaysia 10
2000 Maldives 44
2000 Mali 220
2000 Malta 8
2000 Marshall Islands 42
2000 Mauritania 113
2000 Mauritius 19
2000 Mexico 26
2000 Morocco 51
2000 Mozambique 169
2000 Myanmar 80
2000 Namibia 76
2000 Nepal 82
2000 Netherlands 6
2000 New Zealand 7
2000 Nicaragua 40
2000 Niger 227
2000 Nigeria 188
2000 Norway 5
2000 Oman 17
2000 Pakistan 113
2000 Panama 26
2000 Papua New Guinea 78
2000 Paraguay 34
2000 Peru 40
2000 Philippines 40
2000 Poland 9
2000 Portugal 7
2000 Qatar 12
2000 Republic of Korea 6
2000 Romania 27
2000 Russian Federation 23
2000 Rwanda 182
2000 Saint Kitts and Nevis 18
2000 Saint Lucia 18
2000 Saint Vincent and the Grenadines 22
2000 Sao Tome and Principe 89
2000 Senegal 137
2000 Seychelles 14
2000 Sierra Leone 232
2000 Singapore 4
2000 Solomon Islands 34
2000 South Sudan 183
2000 Spain 7
2000 Sri Lanka 16
2000 Sudan 108
2000 Swaziland 123
2000 Sweden 4
2000 Switzerland 6
2000 Syrian Arab Republic 23
2000 Thailand 23
2000 Togo 122
2000 Tonga 18
2000 Trinidad and Tobago 29
2000 Tunisia 31
2000 Turkey 42
2000 Uganda 147
2000 United Arab Emirates 11
2000 United Kingdom 7
2000 United Republic of Tanzania 132
2000 United States 8
2000 Uruguay 17
2000 Vanuatu 23
2000 Venezuela (Bolivarian Republic of) 21
2000 Viet Nam 35
2000 Yemen 96
2000 Zambia 169
2000 Zimbabwe 103
2013 Afghanistan 97
2013 Algeria 25
2013 Argentina 13
2013 Australia 4
2013 Austria 4
2013 Bahamas 13
2013 Bahrain 6
2013 Bangladesh 41
2013 Barbados 14
2013 Belgium 4
2013 Belize 17
2013 Benin 85
2013 Bhutan 36
2013 Bolivia (Plurinational State of) 39
2013 Botswana 47
2013 Brazil 14
2013 Bulgaria 12
2013 Burkina Faso 98
2013 Burundi 83
2013 Cabo Verde 26
2013 Cameroon 95
2013 Canada 5
2013 Central African Republic 139
2013 Chad 148
2013 Chile 8
2013 China 13
2013 Colombia 17
2013 Comoros 78
2013 Congo 49
2013 Cook Islands 9
2013 Costa Rica 10
2013 C0sta Ricadsc 100
2013 Cuba 6
2013 Democratic Republic of the Congo 119
2013 Denmark 4
2013 Dominica 11
2013 Dominican Republic 28
2013 Ecuador 23
2013 Egypt 22
2013 El Salvador 16
2013 Eritrea 50
2013 Ethiopia 64
2013 Fiji 24
2013 Finland 3
2013 France 4
2013 Gambia 74
2013 Germany 4
2013 Ghana 78
2013 Greece 4
2013 Guatemala 31
2013 Guinea 101
2013 Guinea-Bissau 124
2013 Guyana 37
2013 Haiti 73
2013 Honduras 22
2013 Hungary 6
2013 Iceland 2
2013 India 53
2013 Indonesia 29
2013 Iran (Islamic Republic of) 17
2013 Iraq 34
2013 Ireland 4
2013 Italy 4
2013 Jamaica 17
2013 Japan 3
2013 Jordan 19
2013 Kenya 71
2013 Kiribati 58
2013 Kuwait 10
2013 Kyrgyzstan 24
2013 Lebanon 9
2013 Lesotho 98
2013 Liberia 71
2013 Libya 15
2013 Lithuania 5
2013 Luxembourg 2
2013 Madagascar 56
2013 Malawi 68
2013 Malaysia 9
2013 Maldives 10
2013 Mali 123
2013 Malta 6
2013 Marshall Islands 38
2013 Mauritania 90
2013 Mauritius 14
2013 Mexico 15
2013 Morocco 30
2013 Mozambique 87
2013 Myanmar 51
2013 Namibia 50
2013 Nepal 40
2013 Netherlands 4
2013 New Zealand 6
2013 Nicaragua 24
2013 Niger 104
2013 Nigeria 117
2013 Norway 3
2013 Oman 11
2013 Pakistan 86
2013 Panama 18
2013 Papua New Guinea 61
2013 Paraguay 22
2013 Peru 17
2013 Philippines 30
2013 Poland 5
2013 Portugal 4
2013 Qatar 8
2013 Republic of Korea 4
2013 Romania 12
2013 Russian Federation 10
2013 Rwanda 52
2013 Saint Kitts and Nevis 10
2013 Saint Lucia 15
2013 Saint Vincent and the Grenadines 19
2013 Sao Tome and Principe 51
2013 Senegal 55
2013 Seychelles 14
2013 Sierra Leone 161
2013 Singapore 3
2013 Solomon Islands 30
2013 South Sudan 99
2013 Spain 4
2013 Sri Lanka 10
2013 Sudan 77
2013 Swaziland 80
2013 Sweden 3
2013 Switzerland 4
2013 Syrian Arab Republic 15
2013 Thailand 13
2013 Togo 85
2013 Tonga 12
2013 Trinidad and Tobago 21
2013 Tunisia 15
2013 Turkey 19
2013 Uganda 66
2013 United Arab Emirates 8
2013 United Kingdom 5
2013 United Republic of Tanzania 52
2013 United States 7
2013 Uruguay 11
2013 Vanuatu 17
2013 Venezuela (Bolivarian Republic of) 15
2013 Viet Nam 24
2013 Yemen 51
2013 Zambia 87
2013 Zimbabwe 89
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment