Last active
October 22, 2015 18:06
-
-
Save yan2014/dbc99ce7e5858d4769db to your computer and use it in GitHub Desktop.
Week 4: Barchart
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<!-- Modified version of Scott Murray's file from Knight D3 course --> | |
<html lang="en"> | |
<head> | |
<meta charset="utf-8"> | |
<title>Horizontal Bar - Dynamic Domain</title> | |
<link rel="stylesheet" type="text/css" href="main.css"> </head> | |
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script> | |
<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script> | |
</head> | |
<body> | |
<h1>Survival rate (percentage) to last grade of primary education in 2011</h1> | |
</body> | |
<script type="text/javascript" src="main.js"></script> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
body { | |
} | |
svg { | |
background-color: white; | |
} | |
.d3-tip { | |
background: #000000; | |
color: #fff; | |
/* Fallback for web browsers that doesn't support RGBa */ | |
background: rgb(0, 0, 0); | |
/* RGBa with 0.6 opacity */ | |
background: rgba(0, 0, 0, 0.6); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
Using the model in d3_dynamic_domain.html, make your own barchart for your data. | |
Pick one of your numeric columns, and resize the SVG container to fit it. You can adjust range etc. as you like. | |
Add text to the page saying what it is showing. | |
*/ | |
var height = 500; | |
var width = 600; | |
var barHeight=20; | |
// Set up the range here - my output sizes | |
var widthScale = d3.scale.linear() | |
.range([ 0, width]); | |
var tip = d3.tip() | |
.attr('class', 'd3-tip') | |
.offset([40, 300]) | |
.html(function(d) { | |
return "Survival rate (percentage) to last grade of primary education in "+d.countries+": <span style='color:red'>"+ d.total + "%</span>"; | |
}) | |
var svg = d3.select("body") | |
.append("svg") | |
.attr("width", width) | |
.attr("height", height); | |
svg.call(tip); | |
d3.csv("primary education.csv", function(error, data) { | |
if (error) { | |
console.log(error); | |
} | |
data = data.filter(function(row) { | |
return row['timePeriod'] == '2011'; | |
}) | |
data.sort(function(a, b) { | |
return d3.descending(+a.total, +b.total); | |
}); | |
// set up the domain here, from the data i read in. | |
widthScale.domain([ 0, d3.max(data, function(d) { | |
return +d.total; | |
}) ]); | |
var bar = d3.select("svg") | |
.selectAll("g") | |
.data(data) | |
.enter() | |
.append("g") | |
bar .append("rect") | |
.attr("x", 0) | |
.attr("y", function(d, i) { | |
return i * 30; // just spacing the bars - notice from the top | |
}) | |
.attr("width", function(d) { | |
return widthScale(d.total); | |
}) | |
.attr("height", barHeight) | |
.attr("fill","orange"); | |
d3.selectAll('svg rect') | |
.data(data) | |
.on('mouseover', tip.show) | |
.on('mouseout', tip.hide); | |
//add text into the web | |
bar.append("text") | |
.attr("x", function(d) { return widthScale(d.total)-25; }) | |
.attr("y", function(d,i){return i*30+10;}) | |
.attr("dy", ".35em") | |
.text(function(d) { return d.total; }); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
ISO_Code | countries | timePeriod | total | male | female | |
---|---|---|---|---|---|---|
ALB | Albania | 2010 | 98 | 98 | 98 | |
DZA | Algeria | 2010 | 95 | 94 | 95 | |
AGO | Angola | 2009 | 32 | 37 | 27 | |
ARG | Argentina | 2009 | 95 | 95 | 96 | |
ARM | Armenia | 2010 | 96 | 96 | 96 | |
AUT | Austria | 2010 | 99 | 99 | 100 | |
AZE | Azerbaijan | 2010 | 97 | 99 | 96 | |
BHS | Bahamas | 2009 | 89 | 91 | 88 | |
BHR | Bahrain | 2010 | 98 | 97 | 98 | |
BGD | Bangladesh | 2009 | 66 | 62 | 71 | |
BLR | Belarus | 2010 | 98 | 97 | 100 | |
BEL | Belgium | 2009 | 97 | 95 | 98 | |
BLZ | Belize | 2010 | 91 | 93 | 89 | |
BEN | Benin | 2010 | 56 | 58 | 53 | |
BTN | Bhutan | 2011 | 95 | 91 | 99 | |
BOL | Bolivia | 2009 | 85 | 85 | 85 | |
BIH | Bosnia and Herzegovina | 2010 | 81 | 81 | 80 | |
BWA | Botswana | 2008 | 93 | 91 | 95 | |
BGR | Bulgaria | 2009 | 97 | 98 | 97 | |
BFA | Burkina Faso | 2011 | 69 | 66 | 73 | |
BDI | Burundi | 2010 | 51 | 47 | 54 | |
CPV | Cabo Verde | 2010 | 89 | 90 | 89 | |
KHM | Cambodia | 2010 | 61 | 61 | 62 | |
CMR | Cameroon | 2010 | 57 | 57 | 57 | |
CAF | Central African Republic | 2010 | 46 | 49 | 44 | |
TCD | Chad | 2010 | 49 | 51 | 47 | |
CHL | Chile | 2010 | 98 | 98 | 98 | |
COL | Colombia | 2010 | 87 | 88 | 87 | |
CRI | Costa Rica | 2010 | 91 | 90 | 93 | |
CIV | Cote d'Ivoire | 2008 | 61 | 62 | 59 | |
HRV | Croatia | 2009 | 99 | 99 | 100 | |
CUB | Cuba | 2010 | 95 | 94 | 96 | |
CZE | Czech Republic | 2010 | 99 | 99 | 99 | |
COD | Democratic Republic of the Congo | 2010 | 54 | 60 | 49 | |
DNK | Denmark | 2009 | 99 | 99 | 99 | |
DJI | Djibouti | 2008 | 64 | 64 | 64 | |
DMA | Dominica | 2010 | 91 | 85 | 96 | |
ECU | Ecuador | 2010 | 92 | 91 | 93 | |
EGY | Egypt | 2010 | 99 | 99 | 99 | |
SLV | El Salvador | 2010 | 84 | 82 | 86 | |
GNQ | Equatorial Guinea | 2010 | 55 | 53 | 58 | |
ERI | Eritrea | 2009 | 69 | 71 | 67 | |
EST | Estonia | 2009 | 98 | 97 | 98 | |
ETH | Ethiopia | 2010 | 41 | 40 | 42 | |
FJI | Fiji | 2008 | 91 | 93 | 88 | |
FIN | Finland | 2010 | 100 | 100 | 99 | |
GMB | Gambia | 2010 | 63 | 60 | 66 | |
GEO | Georgia | 2009 | 96 | 94 | 99 | |
DEU | Germany | 2009 | 96 | 96 | 97 | |
GHA | Ghana | 2008 | 72 | 76 | 69 | |
GTM | Guatemala | 2009 | 68 | 68 | 68 | |
GIN | Guinea | 2011 | 59 | 65 | 52 | |
GUY | Guyana | 2008 | 83 | 85 | 82 | |
HND | Honduras | 2010 | 75 | 72 | 78 | |
HUN | Hungary | 2008 | 98 | 98 | 98 | |
ISL | Iceland | 2009 | 98 | 97 | 99 | |
IRN | Iran (Islamic Republic of) | 2010 | 98 | 98 | 98 | |
ITA | Italy | 2009 | 100 | 99 | 100 | |
JAM | Jamaica | 2009 | 95 | 94 | 96 | |
JPN | Japan | 2009 | 100 | 100 | 100 | |
KAZ | Kazakhstan | 2011 | 100 | 99 | 100 | |
KWT | Kuwait | 2009 | 96 | 96 | 96 | |
KGZ | Kyrgyzstan | 2010 | 95 | 95 | 96 | |
LAO | Lao People's Democratic Republic | 2010 | 68 | 67 | 69 | |
LVA | Latvia | 2010 | 93 | 93 | 93 | |
LBN | Lebanon | 2010 | 90 | 88 | 94 | |
LSO | Lesotho | 2010 | 66 | 58 | 76 | |
LBR | Liberia | 2008 | 68 | 73 | 62 | |
LIE | Liechtenstein | 2009 | 79 | 81 | 78 | |
LTU | Lithuania | 2010 | 96 | 96 | 97 | |
MDG | Madagascar | 2010 | 40 | 39 | 40 | |
MWI | Malawi | 2010 | 51 | 50 | 52 | |
MYS | Malaysia | 2009 | 99 | 99 | 100 | |
MLI | Mali | 2010 | 75 | 77 | 74 | |
MLT | Malta | 2008 | 80 | 83 | 76 | |
MHL | Marshall Islands | 2008 | 83 | 87 | 80 | |
MRT | Mauritania | 2008 | 81 | 80 | 82 | |
MUS | Mauritius | 2010 | 97 | 97 | 98 | |
MEX | Mexico | 2010 | 95 | 94 | 96 | |
MNG | Mongolia | 2010 | 93 | 92 | 94 | |
MNE | Montenegro | 2011 | 80 | 80 | 81 | |
MAR | Morocco | 2011 | 88 | 89 | 88 | |
MOZ | Mozambique | 2011 | 31 | 32 | 29 | |
MMR | Myanmar | 2009 | 75 | 72 | 77 | |
NAM | Namibia | 2009 | 84 | 82 | 87 | |
NER | Niger | 2010 | 69 | 71 | 67 | |
NGA | Nigeria | 2009 | 80 | 77 | 83 | |
NOR | Norway | 2009 | 99 | 99 | 99 | |
PAK | Pakistan | 2010 | 52 | 53 | 51 | |
PAN | Panama | 2010 | 94 | 92 | 96 | |
PRY | Paraguay | 2009 | 83 | 81 | 84 | |
PER | Peru | 2010 | 82 | 82 | 81 | |
PHL | Philippines | 2008 | 76 | 72 | 80 | |
POL | Poland | 2009 | 99 | 99 | 100 | |
KOR | Republic of Korea | 2009 | 99 | 99 | 99 | |
MDA | Republic of Moldova | 2010 | 95 | 96 | 95 | |
ROU | Romania | 2009 | 97 | 97 | 97 | |
RWA | Rwanda | 2009 | 37 | 35 | 39 | |
KNA | Saint Kitts and Nevis | 2009 | 74 | 78 | 70 | |
LCA | Saint Lucia | 2010 | 92 | 90 | 94 | |
WSM | Samoa | 2010 | 77 | 74 | 79 | |
SEN | Senegal | 2010 | 59 | 59 | 60 | |
SRB | Serbia | 2010 | 98 | 98 | 98 | |
SYC | Seychelles | 2010 | 94 | 95 | 93 | |
SGP | Singapore | 2008 | 99 | 99 | 99 | |
SVK | Slovakia | 2010 | 98 | 98 | 98 | |
SVN | Slovenia | 2010 | 99 | 99 | 98 | |
ESP | Spain | 2010 | 98 | 98 | 97 | |
LKA | Sri Lanka | 2010 | 97 | 100 | 95 | |
SUR | Suriname | 2008 | 90 | 82 | 100 | |
SWE | Sweden | 2010 | 96 | 96 | 96 | |
SYR | Syrian Arab Republic | 2010 | 96 | 95 | 96 | |
TJK | Tajikistan | 2010 | 99 | 99 | 99 | |
TLS | Timor-Leste | 2010 | 84 | 82 | 85 | |
TGO | Togo | 2010 | 52 | 55 | 48 | |
TTO | Trinidad and Tobago | 2009 | 89 | 87 | 92 | |
TUN | Tunisia | 2008 | 95 | 94 | 95 | |
TUR | Turkey | 2009 | 99 | 98 | 100 | |
UGA | Uganda | 2010 | 25 | 25 | 25 | |
UKR | Ukraine | 2010 | 98 | 98 | 99 | |
ARE | United Arab Emirates | 2010 | 84 | 85 | 84 | |
TZA | United Republic of Tanzania | 2009 | 81 | 76 | 87 | |
URY | Uruguay | 2009 | 95 | 94 | 96 | |
UZB | Uzbekistan | 2010 | 98 | 98 | 98 | |
VUT | Vanuatu | 2008 | 71 | 74 | 69 | |
VEN | Venezuela | 2010 | 95 | 92 | 98 | |
YEM | Yemen | 2010 | 76 | 82 | 68 | |
ZMB | Zambia | 2008 | 53 | 55 | 52 | |
MACRO | Sub-Saharan Africa | 2010 | 57 | 58 | 57 | |
MACRO | Eastern and Southern Africa | 2010 | 49 | 48 | 49 | |
MACRO | West and Central Africa | 2010 | 66 | 67 | 65 | |
MACRO | Middle East and North Africa | 2010 | 88 | 89 | 88 | |
MACRO | South Asia | 2010 | 63 | 61 | 65 | |
MACRO | East Asia and Pacific | 2010 | 89 | 89 | 89 | |
MACRO | Latin America and Caribbean | 2010 | 84 | 82 | 86 | |
MACRO | CEE/CIS | 2010 | 98 | 97 | 98 | |
MACRO | Least developed countries | 2010 | 57 | 57 | 58 | |
MACRO | World | 2010 | 75 | 74 | 76 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment