Skip to content

Instantly share code, notes, and snippets.

@DimsumPanda

DimsumPanda/README.md

Last active November 15, 2015 14:19
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 DimsumPanda/c7dd80fd6db9857eb02c to your computer and use it in GitHub Desktop.
Save DimsumPanda/c7dd80fd6db9857eb02c to your computer and use it in GitHub Desktop.
Download ZIP
Week 3: My Data the D3 Way
Raw
README.md

Week 3: My Data the D3 Way

Read in the maternal mortality rates data with D3 and sorted by the change in rates from 1990-2013.

Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Maternal Mortality Rate</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
</head>
<body>
<h1>Maternal Mortality Rates (1990-2013)</h1>
<script type="text/javascript">
//Load in contents of CSV file, and do things to the data.
var total1990 = 0;
var total1995 = 0;
var total2000 = 0;
var total2010 = 0;
var total2013 = 0;
d3.csv("maternalMortalityRate.csv", function(error, data) {
if (error) {
console.log("Had an error loading file.");
}
// let's do things to the data here. This is VERY COMMON in d3 code.
console.log(data);
// Your arguments for forEach are the item and it's number in the array:
data.forEach(function(data_item, index){
// NB: it's much more common to see (d, i) as shorthand in D3 code.
console.log(index, data_item);
// here we are making strings into numbers using type coercion:
data_item.year1990 = +data_item.year1990;
data_item.year1995 = +data_item.year1995;
data_item.year2000 = +data_item.year2000;
data_item.year2010 = +data_item.year2010;
data_item.year2013 = +data_item.year2013;
// now we add another data object value, a calculated value.
data_item.difference = data_item.year2013 - data_item.year1990;
data_item.sum = data_item.year1990 + data_item.year1995 + data_item.year2000 + data_item.year2010 + data_item.year2013;
total1990 = total1990 + data_item.year1990;
total1995 = total1995 + data_item.year1995;
total2000 = total2000 + data_item.year2000;
total2010 = total2010 + data_item.year2010;
total2013 = total2013 + data_item.year2013;
console.log(index, data_item);
});
console.log(data);
console.log("total 1990", total1990);
console.log("total 1995", total1995);
console.log("total 2000", total2000);
console.log("total 2010", total2010);
console.log("total 2013", total2013);
// Sorting:
data.sort(function (a, b) {
return d3.descending(b.difference, a.difference);
});
// Suppose you wanted it sorted the other way? How would you do that?
console.log("sorted", data);
//Other code to execute after successful file Load
d3.select("body").append("h1").text("My Data");
d3.select("body").append("h3").text("Country 1990 1995 2000 2010 2013 Change(1990-2013)")
d3.select("body").selectAll("p")
.data(data)
.enter()
.append("p")
.text(function(d){
return d.name + "\t" + d.year1990 + "\t" + d.year1995 + "\t" + d.year2000 + "\t" + d.year2010 + "\t" + d.year2013 + "\t" + d.difference;
});
});
// Notice this below doesn't work. It's outside the scope of the function that loaded the data. You need to keep your operations on data inside the loading callback.
//console.log("my data now", data);
// what do you expect these values to be now? what's going on?
// console.log("totals", total1990, total2015);
</script>
</body>
</html>
Raw
maternalMortalityRate.csv
name year2013 year2010 year2005 year2000 year1995 year1990
Eritrea 380 450 530 670 1000 1700 -1320
Equatorial Guinea 290 330 480 790 1300 1600 -1310
Sierra Leone 1100 1200 1600 2200 2400 2300 -1200
Rwanda 320 390 610 1000 1400 1400 -1080
South Sudan 730 830 1000 1200 1500 1800 -1070
Cambodia 170 200 320 540 860 1200 -1030
Ethiopia 420 500 740 990 1200 1400 -980
Angola 460 530 750 1100 1400 1400 -940
Timor-Leste 270 330 500 680 1000 1200 -930
Lao People's Democratic Republic 220 270 410 600 830 1100 -880
Mozambique 480 540 680 870 1100 1300 -820
Afghanistan 400 500 730 1100 1200 1200 -800
Bhutan 120 140 240 390 610 900 -780
Chad 980 1100 1200 1500 1600 1700 -720
Nigeria 560 610 740 950 1100 1200 -640
Nepal 190 220 310 430 580 790 -600
Malawi 510 540 570 750 870 1100 -590
Burundi 740 820 910 1000 1300 1300 -560
Liberia 640 680 880 1100 1600 1200 -560
Mali 550 600 710 860 1000 1100 -550
United Republic of Tanzania 410 460 610 770 890 910 -500
Guinea 650 690 800 950 1000 1100 -450
Somalia 850 930 1100 1200 1300 1300 -450
Uganda 360 410 510 650 740 780 -420
Maldives 31 38 57 110 210 430 -399
Bangladesh 170 200 260 340 440 550 -380
Ghana 380 410 470 570 650 760 -380
Myanmar 200 220 260 360 470 580 -380
Burkina Faso 400 440 500 580 680 770 -370
Guinea-Bissau 560 600 760 840 790 930 -370
India 190 220 280 370 460 560 -370
Niger 630 690 760 850 920 1000 -370
Sudan 360 390 460 540 640 720 -360
Central African Republic 880 960 1100 1200 1200 1200 -320
Bolivia (Plurinational State of) 200 230 270 330 420 510 -310
Mauritania 320 360 400 480 550 630 -310
Madagascar 440 480 530 550 640 740 -300
Zambia 280 320 430 610 630 580 -300
Haiti 380 420 470 510 580 670 -290
Comoros 350 380 430 480 560 630 -280
Gambia 430 460 510 580 660 710 -280
Democratic Republic of the Congo 730 810 930 1100 1100 1000 -270
Benin 340 370 420 490 520 600 -260
Congo 410 450 530 610 650 670 -260
Papua New Guinea 220 240 280 340 370 470 -250
Indonesia 190 210 250 310 360 430 -240
Swaziland 310 350 480 520 480 550 -240
Lesotho 490 540 670 680 630 720 -230
Pakistan 170 190 230 280 330 400 -230
Senegal 320 360 420 480 510 530 -210
Togo 450 480 510 580 660 660 -210
Sao Tome and Principe 210 230 260 300 360 410 -200
Botswana 170 210 340 390 370 360 -190
Morocco 120 130 160 200 240 310 -190
Namibia 130 160 250 270 280 320 -190
Solomon Islands 130 140 170 210 250 320 -190
Yemen 270 290 330 370 420 460 -190
Cabo Verde 53 58 63 84 140 230 -177
Djibouti 230 250 310 360 390 400 -170
Honduras 120 120 130 150 200 290 -170
Peru 89 100 120 160 220 250 -161
Dominican Republic 100 130 130 120 180 240 -140
Gabon 240 260 300 330 340 380 -140
Romania 33 30 30 53 72 170 -137
Cameroon 590 640 690 740 760 720 -130
Guatemala 140 140 140 160 220 270 -130
Kiribati 130 140 170 200 240 250 -120
Samoa 58 62 73 89 110 150 -92
Viet Nam 49 51 60 82 110 140 -91
Kenya 400 460 550 570 530 490 -90
Vanuatu 86 90 100 120 140 170 -84
Syrian Arab Republic 49 50 58 75 94 130 -81
Egypt 45 50 62 75 96 120 -75
Micronesia (Federated States of) 96 100 120 130 140 170 -74
Ecuador 87 90 98 120 130 160 -73
Algeria 89 92 100 120 140 160 -71
Nicaragua 100 110 120 140 160 170 -70
Barbados 52 83 33 42 38 120 -68
China 32 36 50 63 76 97 -65
Kazakhstan 26 40 50 71 91 91 -65
Iran (Islamic Republic of) 23 25 31 44 60 83 -60
Brazil 69 68 73 85 100 120 -51
Russian Federation 24 31 37 57 72 74 -50
Zimbabwe 470 610 740 680 550 520 -50
Lebanon 16 18 26 37 47 64 -48
Tunisia 46 48 55 65 81 91 -45
Latvia 13 29 21 42 58 57 -44
Iraq 67 73 77 71 84 110 -43
El Salvador 69 71 72 80 96 110 -41
Republic of Moldova 21 41 25 39 59 61 -40
Mexico 49 47 50 67 77 88 -39
Estonia 11 6 24 26 46 48 -37
Oman 11 12 16 22 32 48 -37
Belarus 1 2 21 32 29 37 -36
Jordan 50 53 58 65 73 86 -36
Azerbaijan 26 27 36 57 83 60 -34
Chile 22 24 26 29 40 55 -33
Mongolia 68 74 89 120 120 100 -32
Belize 45 60 79 110 35 75 -30
Fiji 59 62 69 72 79 89 -30
Uzbekistan 36 40 44 48 54 66 -30
Turkey 20 22 27 33 39 48 -28
Uruguay 14 23 32 35 34 42 -28
Malaysia 29 31 36 40 45 56 -27
Saint Lucia 34 35 39 44 52 60 -26
Ukraine 23 29 25 35 45 49 -26
Saudi Arabia 16 16 19 24 31 41 -25
Tajikistan 44 48 59 89 120 68 -24
Lithuania 11 9 11 20 21 34 -23
Côte d'Ivoire 720 750 750 670 710 740 -20
Paraguay 110 110 130 120 130 130 -20
Sri Lanka 29 32 41 55 71 49 -20
Bulgaria 5 8 14 29 22 24 -19
Armenia 29 31 37 43 51 47 -18
Jamaica 80 82 85 88 89 98 -18
Colombia 83 85 97 130 81 100 -17
Libya 15 15 17 21 25 31 -16
Thailand 26 28 34 40 37 42 -16
Poland 3 4 5 8 14 17 -14
Panama 85 82 83 79 91 98 -13
Bosnia and Herzegovina 8 9 10 11 16 19 -11
Grenada 23 23 25 29 33 34 -11
Albania 21 21 24 28 29 31 -10
Czech Republic 5 5 7 7 9 15 -10
Israel 2 5 7 9 10 12 -10
Kyrgyzstan 75 79 92 100 120 85 -10
New Zealand 8 12 12 12 13 18 -10
South Africa 140 140 160 150 140 150 -10
Georgia 41 42 48 60 67 50 -9
Hungary 14 21 13 10 23 23 -9
Cyprus 10 10 13 16 18 18 -8
Japan 6 6 7 10 10 14 -8
Slovakia 7 7 6 12 10 15 -8
The former Yugoslav republic of Macedonia 7 7 14 15 13 15 -8
United Arab Emirates 8 8 8 11 13 16 -8
Portugal 8 11 11 11 10 15 -7
Austria 4 3 5 5 7 10 -6
Bahamas 37 38 40 44 44 43 -6
Germany 7 7 7 7 8 13 -6
Italy 4 4 5 4 6 10 -6
Netherlands 6 7 10 15 11 11 -5
Norway 4 5 9 8 4 9 -5
Qatar 6 7 8 9 11 11 -5
Trinidad and Tobago 84 82 58 59 91 89 -5
Turkmenistan 61 65 76 81 79 66 -5
Belgium 6 7 7 9 10 10 -4
Denmark 5 9 8 9 16 9 -4
Slovenia 7 8 15 12 11 11 -4
France 9 12 9 10 11 12 -3
Iceland 4 5 6 6 7 7 -3
Malta 9 8 9 11 11 12 -3
Saint Vincent and the Grenadines 45 47 55 75 72 48 -3
Spain 4 6 6 5 4 7 -3
Argentina 69 76 70 63 60 71 -2
Finland 4 6 9 7 5 6 -2
Serbia 16 14 8 7 20 18 -2
Singapore 6 4 10 19 8 8 -2
Sweden 4 5 4 5 5 6 -2
Switzerland 6 8 8 7 8 8 -2
United Kingdom of Great Britain and Northern Ireland 8 11 12 11 11 10 -2
Australia 6 5 6 9 8 7 -1
Greece 5 5 3 5 2 6 -1
Montenegro 7 7 8 10 9 8 -1
Costa Rica 38 33 46 44 45 38 0
Bahrain 22 24 16 27 22 21 1
Brunei Darussalam 27 27 25 24 25 26 1
Democratic People's Republic of Korea 87 98 110 120 83 85 2
Kuwait 14 13 6 8 10 12 2
Ireland 9 10 2 6 4 6 3
Mauritius 73 72 35 28 68 70 3
Canada 11 13 11 7 7 6 5
Croatia 13 15 14 11 13 8 5
Luxembourg 11 13 17 11 11 6 5
Republic of Korea 27 21 18 19 18 18 9
Philippines 120 120 130 120 130 110 10
United States of America 28 27 17 13 11 12 16
Cuba 80 80 67 63 60 63 17
Venezuela (Bolivarian Republic of) 110 110 94 91 98 93 17
Guyana 250 230 240 240 230 210 40
Suriname 130 150 110 120 39 84 46
Tonga 120 120 100 91 89 71 49
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment