Skip to content

Instantly share code, notes, and snippets.

@DimsumPanda
Last active November 15, 2015 13:45
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/1b8f5adcbf4d752cff0c to your computer and use it in GitHub Desktop.
Save DimsumPanda/1b8f5adcbf4d752cff0c to your computer and use it in GitHub Desktop.
Week 2: Paragraph Data load

Week 2: Paragraph Data load

Read in data for the Maternal Mortality Rates in the World with d3.js. Logs the data in the console. This gist was not done in the real D3 'way.' This uses a JS loop that will add p elements for each item in the data set manually instead of using enter().

Logging Data with D3

d3.csv("maternalMortalityRate.csv", function (mydata) {

	//Everything involving the dataset should go here.
	
	// d in function(d) is an arbitrary variable that will read in each item(row) in the dataset. mydata is the csv data.
	mydata.forEach(function (d) {
		body.append("p").text(d.Country + " " + d.year1990 + " " + d.year2015);
		// d.key returns the value at the key, e.g. data in the "Country" column (d.Country) and data in the year2015 (d.year) column.
		// the key matches the column name in the csv file.
	}); //end of d3.csv load
	

For the Gist, dragging and dropping the file from the file explorer works best.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Creating HTML Elements from Data</title>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
</head>
<style>
</style>
<body>
<script type="text/javascript">
d3.select("body").append("h1").text("My Data");
var body = d3.select("body");
// Open the console to see this. You may need to reload if you
// didn't have it open when you first loaded the page.
console.log("D3 Selection of body:", body);
// The selection via jquery returns something different:
console.log("Jquery selection:", $("body"));
d3.csv("maternalMortalityRate.csv", function(mydata) {
console.log("My first object:", mydata[0]);
// This is not the real D3 'way.' This is a javascript
// loop that will add p elements for each item in the data set
// manually. In D3, you will use enter() eventually for this.
mydata.forEach(function (d) {
body.append("p").text(d.Country + " " + d.year1990 + " " + d.year2013);
});
body.append("h2").text("JQuery is below:");
mydata.forEach(function (d) {
$("body").append("<p>" + d.Country + "</p>");
});
});
</script>
</body>
</html>
Country year2013 year2010 year2005 year2000 year1995 year1990 Change in Mortality Rate (1990-2013)
Afghanistan 400 500 730 1100 1200 1200 -0.666666667
Albania 21 21 24 28 29 31 -0.322580645
Algeria 89 92 100 120 140 160 -0.44375
Angola 460 530 750 1100 1400 1400 -0.671428571
Argentina 69 76 70 63 60 71 -0.028169014
Armenia 29 31 37 43 51 47 -0.382978723
Australia 6 5 6 9 8 7 -0.142857143
Austria 4 3 5 5 7 10 -0.6
Azerbaijan 26 27 36 57 83 60 -0.566666667
Bahamas 37 38 40 44 44 43 -0.139534884
Bahrain 22 24 16 27 22 21 0.047619048
Bangladesh 170 200 260 340 440 550 -0.690909091
Barbados 52 83 33 42 38 120 -0.566666667
Belarus 1 2 21 32 29 37 -0.972972973
Belgium 6 7 7 9 10 10 -0.4
Belize 45 60 79 110 35 75 -0.4
Benin 340 370 420 490 520 600 -0.433333333
Bhutan 120 140 240 390 610 900 -0.866666667
Bolivia (Plurinational State of) 200 230 270 330 420 510 -0.607843137
Bosnia and Herzegovina 8 9 10 11 16 19 -0.578947368
Botswana 170 210 340 390 370 360 -0.527777778
Brazil 69 68 73 85 100 120 -0.425
Brunei Darussalam 27 27 25 24 25 26 0.038461538
Bulgaria 5 8 14 29 22 24 -0.791666667
Burkina Faso 400 440 500 580 680 770 -0.480519481
Burundi 740 820 910 1000 1300 1300 -0.430769231
Côte d'Ivoire 720 750 750 670 710 740 -0.027027027
Cabo Verde 53 58 63 84 140 230 -0.769565217
Cambodia 170 200 320 540 860 1200 -0.858333333
Cameroon 590 640 690 740 760 720 -0.180555556
Canada 11 13 11 7 7 6 0.833333333
Central African Republic 880 960 1100 1200 1200 1200 -0.266666667
Chad 980 1100 1200 1500 1600 1700 -0.423529412
Chile 22 24 26 29 40 55 -0.6
China 32 36 50 63 76 97 -0.670103093
Colombia 83 85 97 130 81 100 -0.17
Comoros 350 380 430 480 560 630 -0.444444444
Congo 410 450 530 610 650 670 -0.388059701
Costa Rica 38 33 46 44 45 38 0
Croatia 13 15 14 11 13 8 0.625
Cuba 80 80 67 63 60 63 0.26984127
Cyprus 10 10 13 16 18 18 -0.444444444
Czech Republic 5 5 7 7 9 15 -0.666666667
Democratic People's Republic of Korea 87 98 110 120 83 85 0.023529412
Democratic Republic of the Congo 730 810 930 1100 1100 1000 -0.27
Denmark 5 9 8 9 16 9 -0.444444444
Djibouti 230 250 310 360 390 400 -0.425
Dominican Republic 100 130 130 120 180 240 -0.583333333
Ecuador 87 90 98 120 130 160 -0.45625
Egypt 45 50 62 75 96 120 -0.625
El Salvador 69 71 72 80 96 110 -0.372727273
Equatorial Guinea 290 330 480 790 1300 1600 -0.81875
Eritrea 380 450 530 670 1000 1700 -0.776470588
Estonia 11 6 24 26 46 48 -0.770833333
Ethiopia 420 500 740 990 1200 1400 -0.7
Fiji 59 62 69 72 79 89 -0.337078652
Finland 4 6 9 7 5 6 -0.333333333
France 9 12 9 10 11 12 -0.25
Gabon 240 260 300 330 340 380 -0.368421053
Gambia 430 460 510 580 660 710 -0.394366197
Georgia 41 42 48 60 67 50 -0.18
Germany 7 7 7 7 8 13 -0.461538462
Ghana 380 410 470 570 650 760 -0.5
Greece 5 5 3 5 2 6 -0.166666667
Grenada 23 23 25 29 33 34 -0.323529412
Guatemala 140 140 140 160 220 270 -0.481481481
Guinea 650 690 800 950 1000 1100 -0.409090909
Guinea-Bissau 560 600 760 840 790 930 -0.397849462
Guyana 250 230 240 240 230 210 0.19047619
Haiti 380 420 470 510 580 670 -0.432835821
Honduras 120 120 130 150 200 290 -0.586206897
Hungary 14 21 13 10 23 23 -0.391304348
Iceland 4 5 6 6 7 7 -0.428571429
India 190 220 280 370 460 560 -0.660714286
Indonesia 190 210 250 310 360 430 -0.558139535
Iran (Islamic Republic of) 23 25 31 44 60 83 -0.722891566
Iraq 67 73 77 71 84 110 -0.390909091
Ireland 9 10 2 6 4 6 0.5
Israel 2 5 7 9 10 12 -0.833333333
Italy 4 4 5 4 6 10 -0.6
Jamaica 80 82 85 88 89 98 -0.183673469
Japan 6 6 7 10 10 14 -0.571428571
Jordan 50 53 58 65 73 86 -0.418604651
Kazakhstan 26 40 50 71 91 91 -0.714285714
Kenya 400 460 550 570 530 490 -0.183673469
Kiribati 130 140 170 200 240 250 -0.48
Kuwait 14 13 6 8 10 12 0.166666667
Kyrgyzstan 75 79 92 100 120 85 -0.117647059
Lao People's Democratic Republic 220 270 410 600 830 1100 -0.8
Latvia 13 29 21 42 58 57 -0.771929825
Lebanon 16 18 26 37 47 64 -0.75
Lesotho 490 540 670 680 630 720 -0.319444444
Liberia 640 680 880 1100 1600 1200 -0.466666667
Libya 15 15 17 21 25 31 -0.516129032
Lithuania 11 9 11 20 21 34 -0.676470588
Luxembourg 11 13 17 11 11 6 0.833333333
Madagascar 440 480 530 550 640 740 -0.405405405
Malawi 510 540 570 750 870 1100 -0.536363636
Malaysia 29 31 36 40 45 56 -0.482142857
Maldives 31 38 57 110 210 430 -0.927906977
Mali 550 600 710 860 1000 1100 -0.5
Malta 9 8 9 11 11 12 -0.25
Mauritania 320 360 400 480 550 630 -0.492063492
Mauritius 73 72 35 28 68 70 0.042857143
Mexico 49 47 50 67 77 88 -0.443181818
Micronesia (Federated States of) 96 100 120 130 140 170 -0.435294118
Mongolia 68 74 89 120 120 100 -0.32
Montenegro 7 7 8 10 9 8 -0.125
Morocco 120 130 160 200 240 310 -0.612903226
Mozambique 480 540 680 870 1100 1300 -0.630769231
Myanmar 200 220 260 360 470 580 -0.655172414
Namibia 130 160 250 270 280 320 -0.59375
Nepal 190 220 310 430 580 790 -0.759493671
Netherlands 6 7 10 15 11 11 -0.454545455
New Zealand 8 12 12 12 13 18 -0.555555556
Nicaragua 100 110 120 140 160 170 -0.411764706
Niger 630 690 760 850 920 1000 -0.37
Nigeria 560 610 740 950 1100 1200 -0.533333333
Norway 4 5 9 8 4 9 -0.555555556
Oman 11 12 16 22 32 48 -0.770833333
Pakistan 170 190 230 280 330 400 -0.575
Panama 85 82 83 79 91 98 -0.132653061
Papua New Guinea 220 240 280 340 370 470 -0.531914894
Paraguay 110 110 130 120 130 130 -0.153846154
Peru 89 100 120 160 220 250 -0.644
Philippines 120 120 130 120 130 110 0.090909091
Poland 3 4 5 8 14 17 -0.823529412
Portugal 8 11 11 11 10 15 -0.466666667
Qatar 6 7 8 9 11 11 -0.454545455
Republic of Korea 27 21 18 19 18 18 0.5
Republic of Moldova 21 41 25 39 59 61 -0.655737705
Romania 33 30 30 53 72 170 -0.805882353
Russian Federation 24 31 37 57 72 74 -0.675675676
Rwanda 320 390 610 1000 1400 1400 -0.771428571
Saint Lucia 34 35 39 44 52 60 -0.433333333
Saint Vincent and the Grenadines 45 47 55 75 72 48 -0.0625
Samoa 58 62 73 89 110 150 -0.613333333
Sao Tome and Principe 210 230 260 300 360 410 -0.487804878
Saudi Arabia 16 16 19 24 31 41 -0.609756098
Senegal 320 360 420 480 510 530 -0.396226415
Serbia 16 14 8 7 20 18 -0.111111111
Sierra Leone 1100 1200 1600 2200 2400 2300 -0.52173913
Singapore 6 4 10 19 8 8 -0.25
Slovakia 7 7 6 12 10 15 -0.533333333
Slovenia 7 8 15 12 11 11 -0.363636364
Solomon Islands 130 140 170 210 250 320 -0.59375
Somalia 850 930 1100 1200 1300 1300 -0.346153846
South Africa 140 140 160 150 140 150 -0.066666667
South Sudan 730 830 1000 1200 1500 1800 -0.594444444
Spain 4 6 6 5 4 7 -0.428571429
Sri Lanka 29 32 41 55 71 49 -0.408163265
Sudan 360 390 460 540 640 720 -0.5
Suriname 130 150 110 120 39 84 0.547619048
Swaziland 310 350 480 520 480 550 -0.436363636
Sweden 4 5 4 5 5 6 -0.333333333
Switzerland 6 8 8 7 8 8 -0.25
Syrian Arab Republic 49 50 58 75 94 130 -0.623076923
Tajikistan 44 48 59 89 120 68 -0.352941176
Thailand 26 28 34 40 37 42 -0.380952381
The former Yugoslav republic of Macedonia 7 7 14 15 13 15 -0.533333333
Timor-Leste 270 330 500 680 1000 1200 -0.775
Togo 450 480 510 580 660 660 -0.318181818
Tonga 120 120 100 91 89 71 0.690140845
Trinidad and Tobago 84 82 58 59 91 89 -0.056179775
Tunisia 46 48 55 65 81 91 -0.494505495
Turkey 20 22 27 33 39 48 -0.583333333
Turkmenistan 61 65 76 81 79 66 -0.075757576
Uganda 360 410 510 650 740 780 -0.538461538
Ukraine 23 29 25 35 45 49 -0.530612245
United Arab Emirates 8 8 8 11 13 16 -0.5
United Kingdom of Great Britain and Northern Ireland 8 11 12 11 11 10 -0.2
United Republic of Tanzania 410 460 610 770 890 910 -0.549450549
United States of America 28 27 17 13 11 12 1.333333333
Uruguay 14 23 32 35 34 42 -0.666666667
Uzbekistan 36 40 44 48 54 66 -0.454545455
Vanuatu 86 90 100 120 140 170 -0.494117647
Venezuela (Bolivarian Republic of) 110 110 94 91 98 93 0.182795699
Viet Nam 49 51 60 82 110 140 -0.65
Yemen 270 290 330 370 420 460 -0.413043478
Zambia 280 320 430 610 630 580 -0.517241379
Zimbabwe 470 610 740 680 550 520 -0.096153846
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment