Skip to content

Instantly share code, notes, and snippets.

@DimsumPanda

DimsumPanda/README.md

Last active November 15, 2015 14:46
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save DimsumPanda/3712df7474acef9e2190 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save DimsumPanda/3712df7474acef9e2190 to your computer and use it in GitHub Desktop.
Download ZIP
Week 3: Basic D3 Table
Raw
README.md

Week 3: Basic D3 Table

Binded data by following Scott Murray's chapter on binding data

Used vLookup and an external table with country and regions to match country by regions. Sorted the table by region. Styled the table to match the UNICEF brandtoolkit colors.

Sorted the data by region:

myData.sort(function(a, b){
	return d3.ascending(a.region, b.region);
	});

I calculated the difference in the code:

myData.forEach(function(d, i){
	d.difference = d.year2013 - d.year1990;
	
	//Pushed the data into an empty Array.
	myArray.push([d.name, d.region, d.year1990, d.year1995, d.year2000, d.year2005, d.year2010, d.year2013, d.difference]);
	};

Then, we create a table with header and rows. We add the data and attach it to the rows:


        var tablebody = table.append("tbody");
        rows = tablebody
        	.selectAll("tr")
        	.data(myArray)
        	.enter()
        	.append("tr");
			
// We built the rows using the nested array - now each row has its own array.
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Maternal Mortality Rates</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="page">
<h1>Maternal mortality ratio (per 100 000 live births)</h1>
<p>Millennium Development Goal Indicator for monitoring Goal 5: improving maternal health. The maternal mortality ratio represents the risk associated with each pregnancy, i.e. the obstetric risk.</p>
<p>Source: WHO (2015) Global Health Observatory Data Repository</p>
<div id="table"></div>
</div>
</body>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<!-- load the function file you need before you call it... -->
<script type="text/javascript" src="tabulate.js"></script>
<script type="text/javascript">
//Load in contents of CSV file, and do things to the data.
d3.csv("maternalMortalityRegion.csv", function(error, myData) {
if (error) {
console.log("Had an error loading file.");
}
// myData.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;
// data_item.region = +data_item.region;
// // 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);
// });
myData.sort(function(a, b){
return d3.ascending(a.region, b.region);
});
// We'll be using simpler data as values, not objects.
var myArray = [];
myData.forEach(function(d, i){
d.difference = d.year2013 - d.year1990;
// Add a new array with the values of each:
myArray.push([d.name, d.region, d.year1990, d.year1995, d.year2000, d.year2005, d.year2010, d.year2013, d.difference]);
});
console.log(myData);
console.log(myArray);
console.log("sorted", myData);
// You could also have made the new array with a map function!
var table = d3.select("#table").append("table");
var header = table.append("thead").append("tr");
header
.selectAll("th")
.data(["Country", "Region", "1990", "1995", "2000", "2005", "2010", "2013", "Difference"])
.enter()
.append("th")
.text(function(d) { return d; });
var tablebody = table.append("tbody");
rows = tablebody
.selectAll("tr")
.data(myArray)
.enter()
.append("tr");
// We built the rows using the nested array - now each row has its own array.
cells = rows.selectAll("td")
// each row has data associated; we get it and enter it for the cells.
.data(function(d) {
console.log(d);
return d;
})
.enter()
.append("td")
.text(function(d) {
return d;
});
table.selectAll("tbody tr")
});
</script>
</html>
Raw
maternalMortalityRegion.csv
name region year2013 year2010 year2005 year2000 year1995 year1990
Afghanistan Southern Asia 400 500 730 1100 1200 1200
Albania Southern Europe 21 21 24 28 29 31
Algeria Northern Africa 89 92 100 120 140 160
Angola Middle Africa 460 530 750 1100 1400 1400
Argentina South America 69 76 70 63 60 71
Armenia Western Asia 29 31 37 43 51 47
Australia Australia and New Zealand 6 5 6 9 8 7
Austria Western Europe 4 3 5 5 7 10
Azerbaijan Western Asia 26 27 36 57 83 60
Bahamas Caribbean 37 38 40 44 44 43
Bahrain Western Asia 22 24 16 27 22 21
Bangladesh Southern Asia 170 200 260 340 440 550
Barbados Caribbean 52 83 33 42 38 120
Belarus Eastern Europe 1 2 21 32 29 37
Belgium Western Europe 6 7 7 9 10 10
Belize Central America 45 60 79 110 35 75
Benin Western Africa 340 370 420 490 520 600
Bhutan Southern Asia 120 140 240 390 610 900
Bolivia (Plurinational State of) South America 200 230 270 330 420 510
Bosnia and Herzegovina Southern Europe 8 9 10 11 16 19
Botswana Southern Africa 170 210 340 390 370 360
Brazil South America 69 68 73 85 100 120
Brunei Darussalam South-Eastern Asia 27 27 25 24 25 26
Bulgaria Eastern Europe 5 8 14 29 22 24
Burkina Faso Western Africa 400 440 500 580 680 770
Burundi Eastern Africa 740 820 910 1000 1300 1300
Cote d'Ivoire Western Africa 720 750 750 670 710 740
Cabo Verde Western Africa 53 58 63 84 140 230
Cambodia South-Eastern Asia 170 200 320 540 860 1200
Cameroon Middle Africa 590 640 690 740 760 720
Canada North America 11 13 11 7 7 6
Central African Republic Middle Africa 880 960 1100 1200 1200 1200
Chad Middle Africa 980 1100 1200 1500 1600 1700
Chile South America 22 24 26 29 40 55
China Eastern Asia 32 36 50 63 76 97
Colombia South America 83 85 97 130 81 100
Comoros Eastern Africa 350 380 430 480 560 630
Congo Middle Africa 410 450 530 610 650 670
Costa Rica Central America 38 33 46 44 45 38
Croatia Southern Europe 13 15 14 11 13 8
Cuba Caribbean 80 80 67 63 60 63
Cyprus Western Asia 10 10 13 16 18 18
Czech Republic Eastern Europe 5 5 7 7 9 15
Democratic People's Republic of Korea Eastern Asia 87 98 110 120 83 85
Democratic Republic of the Congo Middle Africa 730 810 930 1100 1100 1000
Denmark Northern Europe 5 9 8 9 16 9
Djibouti Eastern Africa 230 250 310 360 390 400
Dominican Republic Caribbean 100 130 130 120 180 240
Ecuador South America 87 90 98 120 130 160
Egypt Northern Africa 45 50 62 75 96 120
El Salvador Central America 69 71 72 80 96 110
Equatorial Guinea Middle Africa 290 330 480 790 1300 1600
Eritrea Eastern Africa 380 450 530 670 1000 1700
Estonia Northern Europe 11 6 24 26 46 48
Ethiopia Eastern Africa 420 500 740 990 1200 1400
Fiji Melanesia 59 62 69 72 79 89
Finland Northern Europe 4 6 9 7 5 6
France Western Europe 9 12 9 10 11 12
Gabon Middle Africa 240 260 300 330 340 380
Gambia Western Africa 430 460 510 580 660 710
Georgia Western Asia 41 42 48 60 67 50
Germany Western Europe 7 7 7 7 8 13
Ghana Western Africa 380 410 470 570 650 760
Greece Southern Europe 5 5 3 5 2 6
Grenada Caribbean 23 23 25 29 33 34
Guatemala Central America 140 140 140 160 220 270
Guinea Western Africa 650 690 800 950 1000 1100
Guinea-Bissau Western Africa 560 600 760 840 790 930
Guyana South America 250 230 240 240 230 210
Haiti Caribbean 380 420 470 510 580 670
Honduras Central America 120 120 130 150 200 290
Hungary Eastern Europe 14 21 13 10 23 23
Iceland Northern Europe 4 5 6 6 7 7
India Southern Asia 190 220 280 370 460 560
Indonesia South-Eastern Asia 190 210 250 310 360 430
Iran (Islamic Republic of) Southern Asia 23 25 31 44 60 83
Iraq Western Asia 67 73 77 71 84 110
Ireland Northern Europe 9 10 2 6 4 6
Israel Western Asia 2 5 7 9 10 12
Italy Southern Europe 4 4 5 4 6 10
Jamaica Caribbean 80 82 85 88 89 98
Japan Eastern Asia 6 6 7 10 10 14
Jordan Western Asia 50 53 58 65 73 86
Kazakhstan Central Asia 26 40 50 71 91 91
Kenya Eastern Africa 400 460 550 570 530 490
Kiribati Micronesia 130 140 170 200 240 250
Kuwait Western Asia 14 13 6 8 10 12
Kyrgyzstan Central Asia 75 79 92 100 120 85
Lao People's Democratic Republic South-Eastern Asia 220 270 410 600 830 1100
Latvia Northern Europe 13 29 21 42 58 57
Lebanon Western Asia 16 18 26 37 47 64
Lesotho Southern Africa 490 540 670 680 630 720
Liberia Western Africa 640 680 880 1100 1600 1200
Libya Northern Africa 15 15 17 21 25 31
Lithuania Northern Europe 11 9 11 20 21 34
Luxembourg Western Europe 11 13 17 11 11 6
Madagascar Eastern Africa 440 480 530 550 640 740
Malawi Eastern Africa 510 540 570 750 870 1100
Malaysia South-Eastern Asia 29 31 36 40 45 56
Maldives Southern Asia 31 38 57 110 210 430
Mali Western Africa 550 600 710 860 1000 1100
Malta Southern Europe 9 8 9 11 11 12
Mauritania Western Africa 320 360 400 480 550 630
Mauritius Eastern Africa 73 72 35 28 68 70
Mexico Central America 49 47 50 67 77 88
Micronesia (Federated States of) Micronesia 96 100 120 130 140 170
Mongolia Eastern Asia 68 74 89 120 120 100
Montenegro Southern Europe 7 7 8 10 9 8
Morocco Northern Africa 120 130 160 200 240 310
Mozambique Eastern Africa 480 540 680 870 1100 1300
Myanmar South-Eastern Asia 200 220 260 360 470 580
Namibia Southern Africa 130 160 250 270 280 320
Nepal Southern Asia 190 220 310 430 580 790
Netherlands Western Europe 6 7 10 15 11 11
New Zealand Australia and New Zealand 8 12 12 12 13 18
Nicaragua Central America 100 110 120 140 160 170
Niger Western Africa 630 690 760 850 920 1000
Nigeria Western Africa 560 610 740 950 1100 1200
Norway Northern Europe 4 5 9 8 4 9
Oman Western Asia 11 12 16 22 32 48
Pakistan Southern Asia 170 190 230 280 330 400
Panama Central America 85 82 83 79 91 98
Papua New Guinea Melanesia 220 240 280 340 370 470
Paraguay South America 110 110 130 120 130 130
Peru South America 89 100 120 160 220 250
Philippines South-Eastern Asia 120 120 130 120 130 110
Poland Eastern Europe 3 4 5 8 14 17
Portugal Southern Europe 8 11 11 11 10 15
Qatar Western Asia 6 7 8 9 11 11
Republic of Korea Eastern Asia 27 21 18 19 18 18
Republic of Moldova Eastern Europe 21 41 25 39 59 61
Romania Eastern Europe 33 30 30 53 72 170
Russian Federation Eastern Europe 24 31 37 57 72 74
Rwanda Eastern Africa 320 390 610 1000 1400 1400
Saint Lucia Caribbean 34 35 39 44 52 60
Saint Vincent and the Grenadines Caribbean 45 47 55 75 72 48
Samoa Polynesia 58 62 73 89 110 150
Sao Tome and Principe Middle Africa 210 230 260 300 360 410
Saudi Arabia Western Asia 16 16 19 24 31 41
Senegal Western Africa 320 360 420 480 510 530
Serbia Southern Europe 16 14 8 7 20 18
Sierra Leone Western Africa 1100 1200 1600 2200 2400 2300
Singapore South-Eastern Asia 6 4 10 19 8 8
Slovakia Eastern Europe 7 7 6 12 10 15
Slovenia Southern Europe 7 8 15 12 11 11
Solomon Islands Melanesia 130 140 170 210 250 320
Somalia Eastern Africa 850 930 1100 1200 1300 1300
South Africa Southern Africa 140 140 160 150 140 150
South Sudan Eastern Africa 730 830 1000 1200 1500 1800
Spain Southern Europe 4 6 6 5 4 7
Sri Lanka Southern Asia 29 32 41 55 71 49
Sudan Northern Africa 360 390 460 540 640 720
Suriname South America 130 150 110 120 39 84
Swaziland Southern Africa 310 350 480 520 480 550
Sweden Northern Europe 4 5 4 5 5 6
Switzerland Western Europe 6 8 8 7 8 8
Syrian Arab Republic Western Asia 49 50 58 75 94 130
Tajikistan Central Asia 44 48 59 89 120 68
Thailand South-Eastern Asia 26 28 34 40 37 42
The former Yugoslav republic of Macedonia Southern Europe 7 7 14 15 13 15
Timor-Leste South-Eastern Asia 270 330 500 680 1000 1200
Togo Western Africa 450 480 510 580 660 660
Tonga Polynesia 120 120 100 91 89 71
Trinidad and Tobago Caribbean 84 82 58 59 91 89
Tunisia Northern Africa 46 48 55 65 81 91
Turkey Western Asia 20 22 27 33 39 48
Turkmenistan Central Asia 61 65 76 81 79 66
Uganda Eastern Africa 360 410 510 650 740 780
Ukraine Eastern Europe 23 29 25 35 45 49
United Arab Emirates Western Asia 8 8 8 11 13 16
United Kingdom of Great Britain and Northern Ireland Northern Europe 8 11 12 11 11 10
United Republic of Tanzania Eastern Africa 410 460 610 770 890 910
United States of America North America 28 27 17 13 11 12
Uruguay South America 14 23 32 35 34 42
Uzbekistan Central Asia 36 40 44 48 54 66
Vanuatu Melanesia 86 90 100 120 140 170
Venezuela (Bolivarian Republic of) South America 110 110 94 91 98 93
Viet Nam South-Eastern Asia 49 51 60 82 110 140
Yemen Western Asia 270 290 330 370 420 460
Zambia Eastern Africa 280 320 430 610 630 580
Zimbabwe Eastern Africa 470 610 740 680 550 520
Raw
style.css
body{
font-family: 'Verdana', sans-serif;
font-size: 14px;
color: rgb(0,153,255);
}
#page{
max-width: 830px;
min-width: 400px;
margin: 1em auto;
padding: 1em 3em;
background-color: #fff;
}
th{
line-height: 20px;
color: #fff;
background-color: rgb(0,153,255);
border-color: rgb(0,153,255);
font-weight: 400;
margin: 2px 10px;
padding: 5px 10px 5px 0px;
}
table {
border-collapse: collapse;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment