Last active
October 29, 2015 14:28
-
-
Save yan2014/904a3b5520d5ac61c547 to your computer and use it in GitHub Desktop.
Week 9: Stacked Bars Transition
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> | |
<!-- code loosely inspired by this block https://gist.github.com/mstanaland/6100713 --> | |
<meta charset="utf-8"> | |
<style> | |
body { | |
font: 12px sans-serif; | |
padding: 50px; | |
} | |
#form { | |
position: relative; | |
right: 10px; | |
top: 10px; | |
padding-bottom: 20px; | |
} | |
.axis path, | |
.axis line { | |
fill: none; | |
stroke: #000; | |
shape-rendering: crispEdges; | |
} | |
.bar { | |
fill: steelblue; | |
} | |
.x.axis path { | |
display: none; | |
} | |
</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 different Countries</h2> | |
<p>Data Source: <a href="http://data.unicef.org/">UNICEF</a></p> | |
<div id="form"> | |
<label><input type="radio" name="mode" value="bycount" checked>Stacked Raw Count</label> | |
<label><input type="radio" name="mode" value="bypercent">Stacked Percent of ECD</label> | |
</div> | |
<div id="chart"></div> | |
<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: 140}, | |
width = 1500 - margin.left - margin.right, | |
height = 600 - margin.top - margin.bottom; | |
var xScale = d3.scale.ordinal() | |
.rangeRoundBands([0, width], .3); | |
var yScale = d3.scale.linear() | |
.rangeRound([height, 0]); | |
var color = d3.scale.category20(); | |
var xAxis = d3.svg.axis() | |
.scale(xScale) | |
.orient("bottom") | |
.innerTickSize([0]); | |
var yAxis = d3.svg.axis() | |
.scale(yScale) | |
.orient("left") | |
.tickFormat(d3.format(".2s")); // for the stacked totals version | |
var stack = d3.layout | |
.stack(); // default view is "zero" for the count display. | |
var svg = d3.select("#chart").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); | |
} | |
console.log("data",data); | |
data.sort(function(b,a) { return +a.total - +b.total;}); | |
var ECD = ["Attendance","Adult","Father","Children","ChildrenLeft","Playthings"]; | |
var stacked = stack(makeData(ECD, data)); // needed for default view | |
console.log("stacked",stacked); | |
xScale.domain(data.map(function(d) { return d.Country; })); | |
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 country = svg.selectAll(".country") | |
.data(stacked) | |
.enter().append("g") | |
.attr("class", "country") | |
.style("fill", function(d, i) { return color(i); }); | |
country.selectAll("rect") | |
.data(function(d) { | |
console.log("array for a rectangle"); | |
return d; }) // this just gets the array for bar segment. | |
.enter().append("rect") | |
.attr("width", xScale.rangeBand()); | |
// this just draws them in the default way, now they're appended. | |
transitionCount(); | |
drawLegend(); | |
d3.selectAll("input").on("change", handleFormClick); | |
// All the functions for stuff above! | |
function handleFormClick() { | |
if (this.value === "bypercent") { | |
transitionPercent();} | |
else{ | |
transitionCount(); | |
} | |
} | |
function makeData(ECD, data) { | |
return ECD.map(function(illness) { | |
return data.map(function(d) { | |
return {x: d["Country"], y: +d[illness]}; | |
}) | |
}); | |
} | |
function transitionPercent() { | |
yAxis.tickFormat(d3.format("%")); | |
stack.offset("expand"); // use this to get it to be relative/normalized! | |
var stacked = stack(makeData(ECD, data)); | |
// call function to do the bars, which is same across both formats. | |
transitionRects(stacked); | |
} | |
function transitionGroup(){} | |
function transitionCount() { | |
yAxis.tickFormat(d3.format(".2s")); // for the stacked totals version | |
stack.offset("zero"); | |
var stacked = stack(makeData(ECD, data)); | |
transitionRects(stacked); | |
} | |
function transitionRects(stacked) { | |
// this domain is using the last of the stacked arrays, which is the last illness, and getting the max height. | |
yScale.domain([0, d3.max(stacked[stacked.length-1], function(d) { return d.y0 + d.y; })]); | |
// attach new fixed data | |
var country = svg.selectAll(".country") | |
.data(stacked); | |
// same on the rects | |
country.selectAll("rect") | |
.data(function(d) { | |
console.log("array for a rectangle"); | |
return d; | |
}) // this just gets the array for bar segment. | |
svg.selectAll("g.country rect") | |
.transition() | |
.duration(250) | |
.attr("x", function(d) { | |
return xScale(d.x); }) | |
.attr("y", function(d) { | |
return yScale(d.y0 + d.y); }) // | |
.attr("height", function(d) { | |
return yScale(d.y0) - yScale(d.y0 + d.y); }); // height is base - tallness | |
svg.selectAll(".y.axis").transition().call(yAxis); | |
} | |
// Building a legend by hand, based on http://bl.ocks.org/mbostock/3886208 | |
function drawLegend() { | |
var legend = svg.selectAll(".legend") | |
.data(color.domain().slice()) // what do you think this does? | |
.enter().append("g") | |
.attr("class", "legend") | |
.attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; }); | |
legend.append("rect") | |
.attr("x", width) | |
.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", "start") | |
.text(function(d, i) { return ECD[i]; }); | |
} | |
}); | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment