Skip to content

Instantly share code, notes, and snippets.

@DimsumPanda

DimsumPanda/index.html

Last active September 28, 2015 16:13
Show Gist options
  • Save DimsumPanda/9082525914a69bd29600 to your computer and use it in GitHub Desktop.
Save DimsumPanda/9082525914a69bd29600 to your computer and use it in GitHub Desktop.
Download ZIP
Week 5: Scatterplot with my Data
Raw
index.html
<!DOCTYPE html>
<!-- A modified example from Scott Murray's Knight d3 course. -->
<html lang="en">
<head>
<meta charset="utf-8">
<title>Maternal Mortality Rate in 2013 by Country</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
</head>
<body>
<h1>Maternal Mortality Rate v. GDP</h1>
<p>The Maternal Mortality Rate (per 100,000 live births) in 2013 by Country.</p>
<p>The maternal mortality rate is compared to the country's respective GDP (measured in millions of dollars). The pink dot represents the United States.</p>
<p>Source: WHO (2015) Global Health Observatory Data Repository, Source: World Bank</p>
<script type="text/javascript" src="scatterplot.js"></script>
</body>
</html>
Raw
maternalMortalityGdp.csv
name gdp region year2013 year2010 year2005 year2000 year1995 year1990
Afghanistan 20842 Southern Asia 400 500 730 1100 1200 1200
Albania 13370 Southern Europe 21 21 24 28 29 31
Algeria 214063 Northern Africa 89 92 100 120 140 160
Angola 131401 Middle Africa 460 530 750 1100 1400 1400
Argentina 540197 South America 69 76 70 63 60 71
Armenia 10882 Western Asia 29 31 37 43 51 47
Australia 1453770 Australia and New Zealand 6 5 6 9 8 7
Austria 436344 Western Europe 4 3 5 5 7 10
Azerbaijan 75198 Western Asia 26 27 36 57 83 60
Bahamas 8511 Caribbean 37 38 40 44 44 43
Bahrain 33869 Western Asia 22 24 16 27 22 21
Bangladesh 173819 Southern Asia 170 200 260 340 440 550
Barbados 4348 Caribbean 52 83 33 42 38 120
Belarus 76139 Eastern Europe 1 2 21 32 29 37
Belgium 533383 Western Europe 6 7 7 9 10 10
Belize 1624 Central America 45 60 79 110 35 75
Benin 8747 Western Africa 340 370 420 490 520 600
Bhutan 1821 Southern Asia 120 140 240 390 610 900
Bolivia (Plurinational State of) 34176 South America 200 230 270 330 420 510
Bosnia and Herzegovina 18344 Southern Europe 8 9 10 11 16 19
Botswana 15813 Southern Africa 170 210 340 390 370 360
Brazil 2346118 South America 69 68 73 85 100 120
Brunei Darussalam 17257 South-Eastern Asia 27 27 25 24 25 26
Bulgaria 55735 Eastern Europe 5 8 14 29 22 24
Burkina Faso 12543 Western Africa 400 440 500 580 680 770
Burundi 3094 Eastern Africa 740 820 910 1000 1300 1300
Cote d'Ivoire 34254 Western Africa 720 750 750 670 710 740
Cabo Verde 1871 Western Africa 53 58 63 84 140 230
Cambodia 16709 South-Eastern Asia 170 200 320 540 860 1200
Cameroon 32549 Middle Africa 590 640 690 740 760 720
Canada 1786655 North America 11 13 11 7 7 6
Central African Republic 1783 Middle Africa 880 960 1100 1200 1200 1200
Chad 13922 Middle Africa 980 1100 1200 1500 1600 1700
Chile 258062 South America 22 24 26 29 40 55
China 10360105 Eastern Asia 32 36 50 63 76 97
Colombia 377740 South America 83 85 97 130 81 100
Comoros 648 Eastern Africa 350 380 430 480 560 630
Congo 14135 Middle Africa 410 450 530 610 650 670
Costa Rica 49553 Central America 38 33 46 44 45 38
Croatia 57223 Southern Europe 13 15 14 11 13 8
Cuba 77150 Caribbean 80 80 67 63 60 63
Cyprus 23226 Western Asia 10 10 13 16 18 18
Czech Republic 205523 Eastern Europe 5 5 7 7 9 15
Democratic Republic of the Congo 32962 Middle Africa 730 810 930 1100 1100 1000
Denmark 341952 Northern Europe 5 9 8 9 16 9
Djibouti 1582 Eastern Africa 230 250 310 360 390 400
Dominican Republic 63969 Caribbean 100 130 130 120 180 240
Ecuador 100543 South America 87 90 98 120 130 160
Egypt 286538 Northern Africa 45 50 62 75 96 120
El Salvador 25220 Central America 69 71 72 80 96 110
Equatorial Guinea 14308 Middle Africa 290 330 480 790 1300 1600
Eritrea 3858 Eastern Africa 380 450 530 670 1000 1700
Estonia 25905 Northern Europe 11 6 24 26 46 48
Ethiopia 54798 Eastern Africa 420 500 740 990 1200 1400
Fiji 4030 Melanesia 59 62 69 72 79 89
Finland 270674 Northern Europe 4 6 9 7 5 6
France 2829192 Western Europe 9 12 9 10 11 12
Gabon 17228 Middle Africa 240 260 300 330 340 380
Gambia 807 Western Africa 430 460 510 580 660 710
Georgia 16530 Western Asia 41 42 48 60 67 50
Germany 3852556 Western Europe 7 7 7 7 8 13
Ghana 38648 Western Africa 380 410 470 570 650 760
Greece 237592 Southern Europe 5 5 3 5 2 6
Grenada 882 Caribbean 23 23 25 29 33 34
Guatemala 58728 Central America 140 140 140 160 220 270
Guinea 6624 Western Africa 650 690 800 950 1000 1100
Guinea-Bissau 1022 Western Africa 560 600 760 840 790 930
Guyana 3228 South America 250 230 240 240 230 210
Haiti 8713 Caribbean 380 420 470 510 580 670
Honduras 19385 Central America 120 120 130 150 200 290
Hungary 137104 Eastern Europe 14 21 13 10 23 23
Iceland 17071 Northern Europe 4 5 6 6 7 7
India 2066902 Southern Asia 190 220 280 370 460 560
Indonesia 888538 South-Eastern Asia 190 210 250 310 360 430
Iran (Islamic Republic of) 415339 Southern Asia 23 25 31 44 60 83
Iraq 220506 Western Asia 67 73 77 71 84 110
Ireland 245921 Northern Europe 9 10 2 6 4 6
Israel 304226 Western Asia 2 5 7 9 10 12
Italy 2144338 Southern Europe 4 4 5 4 6 10
Jamaica 14362 Caribbean 80 82 85 88 89 98
Japan 4601461 Eastern Asia 6 6 7 10 10 14
Jordan 35827 Western Asia 50 53 58 65 73 86
Kazakhstan 212248 Central Asia 26 40 50 71 91 91
Kenya 60937 Eastern Africa 400 460 550 570 530 490
Kiribati 167 Micronesia 130 140 170 200 240 250
Kuwait 175827 Western Asia 14 13 6 8 10 12
Kyrgyzstan 7404 Central Asia 75 79 92 100 120 85
Lao People's Democratic Republic 11772 South-Eastern Asia 220 270 410 600 830 1100
Latvia 31921 Northern Europe 13 29 21 42 58 57
Lebanon 45731 Western Asia 16 18 26 37 47 64
Lesotho 2088 Southern Africa 490 540 670 680 630 720
Liberia 2027 Western Africa 640 680 880 1100 1600 1200
Libya 41119 Northern Africa 15 15 17 21 25 31
Lithuania 48172 Northern Europe 11 9 11 20 21 34
Luxembourg 60131 Western Europe 11 13 17 11 11 6
Madagascar 10593 Eastern Africa 440 480 530 550 640 740
Malawi 4258 Eastern Africa 510 540 570 750 870 1100
Malaysia 326933 South-Eastern Asia 29 31 36 40 45 56
Maldives 3032 Southern Asia 31 38 57 110 210 430
Mali 12074 Western Africa 550 600 710 860 1000 1100
Malta 9643 Southern Europe 9 8 9 11 11 12
Mauritania 5061 Western Africa 320 360 400 480 550 630
Mauritius 12616 Eastern Africa 73 72 35 28 68 70
Mexico 1282720 Central America 49 47 50 67 77 88
Micronesia (Federated States of) 316 Micronesia 96 100 120 130 140 170
Mongolia 12016 Eastern Asia 68 74 89 120 120 100
Montenegro 4583 Southern Europe 7 7 8 10 9 8
Morocco 107005 Northern Africa 120 130 160 200 240 310
Mozambique 16386 Eastern Africa 480 540 680 870 1100 1300
Myanmar 64330 South-Eastern Asia 200 220 260 360 470 580
Namibia 13430 Southern Africa 130 160 250 270 280 320
Nepal 19636 Southern Asia 190 220 310 430 580 790
Netherlands 869508 Western Europe 6 7 10 15 11 11
New Zealand 188385 Australia and New Zealand 8 12 12 12 13 18
Nicaragua 11806 Central America 100 110 120 140 160 170
Niger 8169 Western Africa 630 690 760 850 920 1000
Nigeria 568508 Western Africa 560 610 740 950 1100 1200
Norway 500103 Northern Europe 4 5 9 8 4 9
Oman 81797 Western Asia 11 12 16 22 32 48
Pakistan 246876 Southern Asia 170 190 230 280 330 400
Panama 46213 Central America 85 82 83 79 91 98
Papua New Guinea 15413 Melanesia 220 240 280 340 370 470
Paraguay 30985 South America 110 110 130 120 130 130
Peru 202903 South America 89 100 120 160 220 250
Philippines 284582 South-Eastern Asia 120 120 130 120 130 110
Poland 548003 Eastern Europe 3 4 5 8 14 17
Portugal 229584 Southern Europe 8 11 11 11 10 15
Qatar 211817 Western Asia 6 7 8 9 11 11
Republic of Korea 1410383 Eastern Asia 27 21 18 19 18 18
Republic of Moldova 7944 Eastern Europe 21 41 25 39 59 61
Romania 199044 Eastern Europe 33 30 30 53 72 170
Russian Federation 1860598 Eastern Europe 24 31 37 57 72 74
Rwanda 7890 Eastern Africa 320 390 610 1000 1400 1400
Saint Lucia 1365 Caribbean 34 35 39 44 52 60
Saint Vincent and the Grenadines 729 Caribbean 45 47 55 75 72 48
Samoa 801 Polynesia 58 62 73 89 110 150
Sao Tome and Principe 335 Middle Africa 210 230 260 300 360 410
Saudi Arabia 746249 Western Asia 16 16 19 24 31 41
Senegal 15579 Western Africa 320 360 420 480 510 530
Serbia 43866 Southern Europe 16 14 8 7 20 18
Sierra Leone 4892 Western Africa 1100 1200 1600 2200 2400 2300
Singapore 307872 South-Eastern Asia 6 4 10 19 8 8
Slovakia 99790 Eastern Europe 7 7 6 12 10 15
Slovenia 49416 Southern Europe 7 8 15 12 11 11
Solomon Islands 1158 Melanesia 130 140 170 210 250 320
South Africa 349817 Southern Africa 140 140 160 150 140 150
South Sudan 13070 Eastern Africa 730 830 1000 1200 1500 1800
Spain 1404307 Southern Europe 4 6 6 5 4 7
Sri Lanka 74941 Southern Asia 29 32 41 55 71 49
Sudan 73815 Northern Africa 360 390 460 540 640 720
Suriname 5299 South America 130 150 110 120 39 84
Swaziland 3400 Southern Africa 310 350 480 520 480 550
Sweden 570591 Northern Europe 4 5 4 5 5 6
Switzerland 685434 Western Europe 6 8 8 7 8 8
Tajikistan 9242 Central Asia 44 48 59 89 120 68
Thailand 373804 South-Eastern Asia 26 28 34 40 37 42
The former Yugoslav republic of Macedonia 11324 Southern Europe 7 7 14 15 13 15
Timor-Leste 1552 South-Eastern Asia 270 330 500 680 1000 1200
Togo 4518 Western Africa 450 480 510 580 660 660
Tonga 434 Polynesia 120 120 100 91 89 71
Trinidad and Tobago 24434 Caribbean 84 82 58 59 91 89
Tunisia 46995 Northern Africa 46 48 55 65 81 91
Turkey 799535 Western Asia 20 22 27 33 39 48
Turkmenistan 47932 Central Asia 61 65 76 81 79 66
Uganda 26312 Eastern Africa 360 410 510 650 740 780
Ukraine 131805 Eastern Europe 23 29 25 35 45 49
United Arab Emirates 401647 Western Asia 8 8 8 11 13 16
United Kingdom of Great Britain and Northern Ireland 2941886 Northern Europe 8 11 12 11 11 10
United Republic of Tanzania 49184 Eastern Africa 410 460 610 770 890 910
United States of America 17419000 North America 28 27 17 13 11 12
Uruguay 57471 South America 14 23 32 35 34 42
Uzbekistan 62644 Central Asia 36 40 44 48 54 66
Vanuatu 802 Melanesia 86 90 100 120 140 170
Venezuela (Bolivarian Republic of) 509964 South America 110 110 94 91 98 93
Viet Nam 186205 South-Eastern Asia 49 51 60 82 110 140
Yemen 35955 Western Asia 270 290 330 370 420 460
Zambia 27066 Eastern Africa 280 320 430 610 630 580
Zimbabwe 13663 Eastern Africa 470 610 740 680 550 520
Raw
scatterplot.js
var width = 1000;
var height = 1000;
var margin ={top: 40, right: 25, bottom: 60, left: 200};
var dotRadius = 5;
var xScale = d3.scale.linear()
.range([ margin.left, width - margin.right - margin.left ]);
var yScale = d3.scale.linear()
.range([ height - margin.bottom, margin.top ]);
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left");
var svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);
d3.csv("maternalMortalityGdp.csv", function(data) {
xScale.domain(
d3.extent(data, function(d) {
return +d.year2013;
// pick a data value to plot on x axis
}));
yScale.domain(
d3.extent(data, function(d) {
// pick a data value to plot for y axis
return +d.gdp;
}));
var circles = svg.selectAll("circle")
// fill in the rest of the data, enter, append here.
.data(data)
.enter()
.append("circle");
// add a class to the circles - ".dots".
circles.attr("class", "dots");
// Circles in SVG have cx, cy, and r attributes. x location, y location, radius.
circles.attr("cx", function(d) {
// return the value to use for your x scale here
return xScale(+d.year2013);
})
.attr("cy", function(d) {
// return the value to use for your y scale here
return yScale(+d.gdp);
})
.attr("r", dotRadius) // you might want to increase your dotRadius
.attr("fill", function(d) {
if(d.name === "United States of America"){
return "#FF0099";
}else{
return "#0099FF";
}
}) // add a fill rule with a special case for one of the countries
.append("title")
.text(function(d) {
return d.name + " has a mortality rate of " + d.year2013 + " in the year 2013 and a GDP of $" + d.gdp + "million";
// fill in a text string here for your cheap tooltip
});
// fix these translates so they use your margin and height width as needed
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + (height - margin.bottom) + ")")
.call(xAxis); // fill in the name of your xaxis function here ).
svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + (margin.left) + ",0)")
.call(yAxis);
// Adding the axes labels
svg.append("text")
.attr("class", "axislabel")
.attr("transform", "translate(" + width/2 + "," + height + ")")
.style("text-anchor", "middle")
.text("Maternal Mortality Rate (per 100,000 live births");
svg.append("text")
.attr("class", "ylabel")
.attr("transform", "rotate(-90)")
.attr("y", 50)
.attr("x",0 - (height / 2))
// .attr("dy", "1em")
.style("text-anchor", "end")
.text("GDP (measured in millions of dollars)");
});
Raw
style.css
body {
font-family: 'Verdana', sans-serif;
font-size: 14px;
color: rgb(0,153,255);
max-width: 900px;
min-width: 400px;
/*margin: 1em auto;
padding: 1em 3em;*/
background-color: #fff;
}
svg {
background-color: white;
}
.axis path,
.axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.axis text {
font-size: 11px;
}
.ylabel,.xlabel {
font-size: 14px;
color: #0099FF;
}
/*circle:hover
{
fill: #FF9900;
}
*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment