Last active
October 29, 2015 14:25
-
-
Save yan2014/2d7b391b6f176968aa0a to your computer and use it in GitHub Desktop.
Week 9: Grouped Bars
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
Country | Attendance | Adult | Father | Children | ChildrenLeft | Playthings | total | |
---|---|---|---|---|---|---|---|---|
Belarus | 88 | 96 | 68 | 92 | 4 | 79 | 427 | |
Democratic People's Republic of Korea | 98 | 91 | 75 | 79 | 17 | 47 | 407 | |
Trinidad and Tobago | 75 | 98 | 63 | 81 | 1 | 65 | 383 | |
Ukraine | 52 | 98 | 71 | 91 | 7 | 52 | 370 | |
Saint Lucia | 85 | 93 | 50 | 68 | 5 | 59 | 359 | |
Serbia | 44 | 95 | 78 | 76 | 1 | 63 | 357 | |
Argentina | 63 | 84 | 57 | 61 | 8 | 61 | 334 | |
Thailand | 84 | 93 | 35 | 43 | 5 | 71 | 331 | |
Montenegro | 29 | 97 | 79 | 77 | 6 | 39 | 327 | |
Jamaica | 92 | 88 | 28 | 55 | 2 | 61 | 324 | |
Guyana | 49 | 89 | 52 | 54 | 11 | 65 | 320 | |
The former Yugoslav Republic of Macedonia | 22 | 92 | 71 | 52 | 5 | 71 | 313 | |
Kyrgyzstan | 19 | 88 | 54 | 76 | 11 | 57 | 304 | |
Bosnia and Herzegovina | 13 | 95 | 76 | 56 | 2 | 56 | 298 | |
Viet Nam | 72 | 77 | 61 | 20 | 9 | 49 | 288 | |
Uzbekistan | 20 | 91 | 54 | 43 | 5 | 67 | 279 | |
Georgia | 66 | 84 | 33 | 51 | 8 | 38 | 279 | |
Jordan | 22 | 82 | 72 | 23 | 9 | 70 | 278 | |
Albania | 40 | 86 | 53 | 32 | 13 | 53 | 277 | |
Kazakhstan | 37 | 92 | 49 | 48 | 4 | 45 | 275 | |
Tunisia | 44 | 71 | 71 | 18 | 13 | 53 | 270 | |
Iran (Islamic Republic of) | 20 | 70 | 60 | 36 | 15 | 67 | 268 | |
Belize | 32 | 86 | 50 | 40 | 2 | 57 | 267 | |
Mongolia | 58 | 57 | 39 | 23 | 9 | 68 | 254 | |
Costa Rica | 18 | 68 | 52 | 37 | 4 | 73 | 251 | |
Lebanon | 62 | 56 | 74 | 29 | 9 | 16 | 244 | |
State of Palestine | 15 | 58 | 77 | 12 | 13 | 64 | 239 | |
Syrian Arab Republic | 8 | 70 | 62 | 30 | 17 | 52 | 238 | |
Central African Republic | 5 | 74 | 42 | 1 | 61 | 49 | 231 | |
Afghanistan | 1 | 73 | 62 | 2 | 40 | 53 | 231 | |
Nigeria | 43 | 65 | 37 | 6 | 40 | 38 | 229 | |
Suriname | 34 | 73 | 26 | 25 | 7 | 59 | 224 | |
Honduras | 19 | 48 | 59 | 11 | 4 | 78 | 220 | |
Ghana | 68 | 40 | 30 | 6 | 21 | 41 | 206 | |
Cameroon | 30 | 62 | 35 | 4 | 31 | 41 | 204 | |
Chad | 5 | 70 | 29 | 1 | 56 | 43 | 203 | |
Togo | 29 | 62 | 38 | 2 | 41 | 31 | 202 | |
C02oroontanic | 5 | 50 | 40 | 5 | 59 | 39 | 197 | |
Democratic Republic of the Congo | 5 | 61 | 36 | 1 | 60 | 29 | 192 | |
Lao People's Democratic Republic | 23 | 57 | 52 | 5 | 14 | 41 | 192 | |
Bhutan | 10 | 54 | 51 | 6 | 14 | 52 | 187 | |
Swaziland | 33 | 50 | 10 | 4 | 15 | 69 | 180 | |
Sierra Leone | 14 | 54 | 42 | 2 | 32 | 35 | 179 | |
Tajikistan | 6 | 74 | 23 | 17 | 13 | 46 | 178 | |
Morocco | 39 | 35 | 58 | 21 | 11 | 14 | 176 | |
Congo | 16 | 56 | 26 | 1 | 37 | 39 | 175 | |
Yemen | 3 | 33 | 37 | 10 | 34 | 49 | 166 | |
Iraq | 4 | 58 | 55 | 5 | 8 | 34 | 164 | |
Gambia | 18 | 48 | 21 | 1 | 21 | 42 | 152 | |
Mali | 10 | 29 | 14 | 0 | 33 | 40 | 126 | |
Djibouti | 14 | 37 | 28 | 15 | 8 | 24 | 125 |
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> | |
<!-- Minor change to Mike Bostock's example http://bl.ocks.org/mbostock/3887051 --> | |
<meta charset="utf-8"> | |
<style> | |
body { | |
font: 12px sans-serif; | |
padding: 50px; | |
} | |
.axis path, | |
.axis line { | |
fill: none; | |
stroke: #000; | |
shape-rendering: crispEdges; | |
} | |
.bar { | |
fill: steelblue; | |
} | |
.x.axis path { | |
display: none; | |
} | |
.tooltip{ | |
text-anchor: middle; | |
font-family: sans-serif; | |
font-size: 12px; | |
font-weight: bold; | |
fill:black; | |
} | |
</style> | |
<body> | |
<h2>Early Childhood Development (ECD) in 2005-2013, Attendance in early childhood education, Adult support for learning, Father's support for learning, Children's books at home, Children's Playthings at home, | |
Children left in inadequate care, in top 13 Countries</h2> | |
<p>Data Source: <a href="http://data.unicef.org/">UNICEF</a></p> | |
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script> | |
<script> | |
var margin = {top: 20, right: 150, bottom: 200, left: 120}, | |
width = 1500 - margin.left - margin.right, | |
height = 600 - margin.top - margin.bottom; | |
var x0 = d3.scale.ordinal() | |
.rangeRoundBands([0, width], .1); | |
var x1 = d3.scale.ordinal(); // the actual bars inside each group | |
var y = d3.scale.linear() | |
.range([height, 0]); | |
var color = d3.scale.category10(); | |
var xAxis = d3.svg.axis() | |
.scale(x0) | |
.orient("bottom"); | |
var yAxis = d3.svg.axis() | |
.scale(y) | |
.orient("left") | |
.tickFormat(d3.format(".2s")); | |
var svg = d3.select("body").append("svg") | |
.attr("width", width + margin.left + margin.right) | |
.attr("height", height + margin.top + margin.bottom) | |
.append("g") | |
.attr("transform", "translate(" + margin.left + "," + margin.top + ")"); | |
d3.csv("early.csv", function(error, data) { | |
if (error) {console.log(error);} | |
var ECDNames = d3.keys(data[0]).filter(function(key) { return key !== "Country"&& key !== "total"; }); | |
data.sort(function(b,a) { return +a.total - +b.total;}); | |
data=data.filter(function(d) { return +d.total > 300 }); | |
data.forEach(function(d) { | |
d.ECDes = ECDNames.map(function(name) { return {name: name, value: +d[name]}; }); | |
}); | |
x0.domain(data.map(function(d) { return d.Country; })); | |
x1.domain(ECDNames).rangeRoundBands([0, x0.rangeBand()]); | |
y.domain([0, d3.max(data, function(d) { return d3.max(d.ECDes, function(d) { return d.value; }); })]); | |
svg.append("g") | |
.attr("class", "x axis") | |
.attr("transform", "translate(0," + height + ")") | |
.call(xAxis) | |
.selectAll("text") | |
.attr("dy", ".5em") | |
.attr("transform", "rotate(-30)") | |
.style("text-anchor", "end"); | |
svg.append("g") | |
.attr("class", "y axis") | |
.call(yAxis) | |
.append("text") | |
.attr("transform", "rotate(-90)") | |
.attr("y", 6) | |
.attr("dy", ".71em") | |
.style("text-anchor", "end") | |
.text("ECD"); | |
var state = svg.selectAll(".country") | |
.data(data) | |
.enter().append("g") | |
.attr("class", function(d){return d.Country;}) | |
.attr("transform", function(d) { return "translate(" + x0(d.Country) + ",0)"; }); | |
state.selectAll("rect") | |
.data(function(d) { return d.ECDes; }) | |
.enter().append("rect") | |
.attr("class",function(d){return d.name;}) | |
.attr("opacity","0.2") | |
.attr("width", x1.rangeBand()) | |
.attr("x", function(d) { return x1(d.name);}) | |
.attr("y", function(d) { return y(d.value); }) | |
.attr("height", function(d) { return height - y(d.value); }) | |
.style("fill", function(d) { return color(d.name); }); | |
state.selectAll("rect") | |
.on("mouseover", function(d){ | |
var xPos = parseFloat(d3.select(this).attr("x")); | |
var parent=this.parentNode.getAttribute('class'); | |
switch (parent){ | |
case "Belarus": | |
xPos=xPos | |
break; | |
case "Democratic People's Republic of Korea": | |
xPos=xPos+93 | |
break; | |
case "Trinidad and Tobago": | |
xPos=xPos+93*2 | |
break; | |
case "Ukraine": | |
xPos=xPos+93*3 | |
break; | |
case "Saint Lucia": | |
xPos=xPos+93*4 | |
break; | |
case "Serbia": | |
xPos=xPos+93*5 | |
break; | |
case "Argentina": | |
xPos=xPos+93*6 | |
break; | |
case "Thailand": | |
xPos=xPos+93*7 | |
break; | |
case "Montenegro": | |
xPos=xPos+93*8 | |
break; | |
case "Jamaica": | |
xPos=xPos+93*9 | |
break; | |
case "Guyana": | |
xPos=xPos+93*10 | |
break; | |
case "The former Yugoslav Republic of Macedonia": | |
xPos=xPos+93*11 | |
break; | |
case "Kyrgyzstan": | |
xPos=xPos+93*12 | |
break; | |
} | |
var yPos = parseFloat(d3.select(this).attr("y")); | |
var height = parseFloat(d3.select(this).attr("height")) | |
svg.append("text") | |
.attr("x",xPos+22) | |
.attr("y",yPos +height/2) | |
.attr("class","tooltip") | |
.text(d.value ); | |
d3.selectAll("." + this.getAttribute('class')).attr("opacity","0.8"); | |
}) | |
.on("mouseout",function(){ | |
svg.select(".tooltip").remove(); | |
d3.selectAll("." + this.getAttribute('class')).attr("opacity","0.2"); | |
}) | |
var legend = svg.selectAll(".legend") | |
.data(ECDNames.slice().reverse()) | |
.enter().append("g") | |
.attr("class", "legend") | |
.attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; }); | |
legend.append("rect") | |
.attr("x", width - 18) | |
.attr("width", 18) | |
.attr("height", 18) | |
.style("fill", color); | |
legend.append("text") | |
.attr("x", width - 24) | |
.attr("y", 9) | |
.attr("dy", ".35em") | |
.style("text-anchor", "end") | |
.text(function(d) { return d; }); | |
}); | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment