Skip to content

Instantly share code, notes, and snippets.

@yan2014

yan2014/ECD.csv

Last active October 22, 2015 17:59
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 yan2014/b8783affeaf5077a9226 to your computer and use it in GitHub Desktop.
Save yan2014/b8783affeaf5077a9226 to your computer and use it in GitHub Desktop.
Download ZIP
Week 7: Transition Plot With Button
Raw
ECD.csv
country AMale AFemale ASMale ASFemale CMale CFemale
Afghanistan 1 1 74 73 42 39
Albania 39 42 85 87 14 11
Argentina 61 66 83 85 9 8
Belarus 86 89 94 97 4 4
Belize 30 34 88 83 3 2
Bhutan 10 10 52 57 13 15
Bosnia and Herzegovina 12 14 95 96 2 2
Cameroon 29 31 64 61 30 32
Central African Republic 5 6 74 74 60 62
Chad 5 4 69 70 57 56
Congo 16 15 53 58 38 36
Costa Rica 17 18 69 66 4 4
C6sta Ricaric 5 5 50 51 60 58
Democratic People's Republic of Korea 98 97 88 93 17 16
Democratic Republic of the Congo 5 5 61 62 60 60
Djibouti 12 16 38 35 8 8
Gambia 17 19 49 47 22 19
Georgia 65 67 84 83 9 8
Ghana 65 72 38 42 21 21
Guyana 48 50 88 89 13 10
Honduras 17 21 47 49 5 4
Iran (Islamic Republic of) 19 22 69 70 15 15
Iraq 4 4 58 59 8 7
Jamaica 92 91 86 90 2 2
Jordan 21 23 81 83 9 9
Kazakhstan 36 38 92 91 4 4
Kyrgyzstan 21 17 90 85 12 9
Lao People's Democratic Republic 21 25 58 57 15 13
Lebanon 63 60 58 54 8 10
Mali 10 10 27 30 33 33
Mauritania 14 14 54 55 27 26
Mongolia 56 60 54 60 9 8
Montenegro 28 30 96 98 8 5
Nigeria 42 43 66 64 40 40
Saint Lucia 87 84 89 96 5 5
Senegal 23 21
Serbia 41 47 96 95 1 1
Sierra Leone 13 15 53 55 33 32
State of Palestine 16 15 58 57 13 14
Suriname 33 35 71 75 7 7
Swaziland 32 34 50 50 15 15
Syrian Arab Republic 8 7 70 69 17 17
Thailand 84 85 92 93 5 4
The former Yugoslav Republic of Macedonia 25 19 92 91 5 5
Togo 27 31 61 63 42 41
Trinidad and Tobago 74 76 98 98 1 1
Tunisia 42 47 68 74 13 14
Ukraine 54 50 97 98 6 7
Uzbekistan 20 19 91 90 5 5
Viet Nam 71 73 74 80 10 9
Yemen 3 3 34 32 36 33
West and Central Africa 28 28 58 58 43 43
Raw
index.html
<!DOCTYPE html>
<!-- A modified example from Scott Murray's Knight d3 course. -->
<html lang="en">
<head>
<meta charset="utf-8">
<title>Formatting Ticks</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<style type="text/css">
body {
background-color: white;
font-family: Helvetica, Arial, sans-serif;
}
h1 {
font-size: 24px;
margin: 0;
}
p {
font-size: 14px;
margin: 10px 0 0 0;
}
.clicker {
font-weight: bolder;
color: red;
cursor: pointer;
}
svg {
background-color: white;
}
.dots {
fill: steelblue;
}
.highlighted {
fill: orange;
}
.axis path,
.axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.axis text {
font-family: sans-serif;
font-size: 11px;
}
.xlabel{
font-size: 15px;
fill: gray;
}
.ylabel{
font-size: 15px;
fill: gray;
}
</style>
</head>
<body>
<h1>Early Childhood Development: Male VS Female</h1>
<p>Source: <a href="http://data.unicef.org">UNICEF</a></p>
<p></p>
<select id="change">
<option value="one">Attendance in early childhood education</option>
<option value="two">Adult support for learning</option>
<option value="three">Children left in inadequate care</option>
</select>
<p></p>
<script type="text/javascript">
var width = 700;
var height = 600;
var margin = { top: 20, right: 10, bottom: 50, left: 50 };
// redo this with an object for the margin settings: var margin = {top...}
var dotRadius = 3; // fix this to a nice value.
// fill in the margin values here. Also, we set domain to 0 to 100 since it's percents,
// plus some padding room!
var xScale = d3.scale.linear()
.range([ margin.left, width - margin.right - margin.left])
.domain([-2,100]);
// top to bottom, padding just in case
var yScale = d3.scale.linear()
.range([ height - margin.bottom, margin.top ])
.domain([-2,100]);
// Custom tick count if you want it.
// Create your axes here.
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom")
.ticks(10); // fix this to a good number of ticks for your scale later.
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left");
var svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);
d3.csv("ECD.csv", function(data) {
var circles = svg.selectAll("circle")
.data(data)
.enter()
.append("circle");
// Circles in SVG have cx, cy, and r attributes. x location, y location, radius.
circles.attr("cx", function(d) {
return xScale(+d.AMale);
// return the value to use for your x scale here
})
.attr("cy", function(d) {
return yScale(+d.AFemale);
})
.attr("class", function(d){
// highlighting some interesting outliers
if (d.country === "West and Central Africa") {
return "highlighted";
}
else {
return "dots";
}
})
.append("title")
.text(function(d) {
return d.country + ": " + d.AMale + "% kids are male and " + d.AFemale + "% kids are female.";
});
// adding a silly intro animation to catch the eye -- using transition:
circles.sort(function(a, b) {
return d3.ascending(+a.urban, +b.urban);
})
.transition()
.delay(function(d, i) {
return i * 10;
})
.duration(500) // milliseconds, so this is 1 second.
.attr("r", dotRadius);
// 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);
svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + (margin.left) + ",0)")
.call(yAxis);
svg.append("text")
.attr("class", "xlabel")
.attr("transform", "translate(" + (width / 2) + " ," +
(height-20) + ")")
.style("text-anchor", "middle")
.attr("dy", "12")
.text("Male");
svg.append("text")
.attr("class", "ylabel")
.attr("transform", "translate(" + margin.right + " ," +
(height/2) + ")")
.style("text-anchor", "middle")
.attr("dx", "-300")
.attr("dy", "12")
.attr("transform", "rotate(-90)")
.text("Female");
d3.select('#change')
.on('change', function() {
var newData = d3.select(this).property('value');
circles
.transition()
.duration(2000)
.attr("cx", function(d) {if(newData==="two"){
return xScale(+d.ASMale);}
else if(newData==="three"){
return xScale(+d.CMale);
}
else if(newData==="one"){
return xScale(+d.AMale);
}
})
.attr("cy", function(d) {if(newData==="two"){
return yScale(+d.ASFemale);}
else if(newData==="three"){
return yScale(+d.CFemale);
}
else if(newData==="one"){
return yScale(+d.AFemale);
}
});
// We can't transition the new title text -- must remove and rewrite.
circles.selectAll("title").remove();
circles
.append("title")
.text(function(d) {
if(newData==="two"){
return d.country + ": " + d.ASMale + "% kids are male and " + d.ASFemale + "% kids are female.";}
else if(newData==="three"){
return d.country + ": " + d.CMale + "% kids are male and " + d.CFemale + "% kids are female.";}
else if(newData==="one"){
return d.country + ": " + d.AMale + "% kids are male and " + d.AFemale + "% kids are female.";}
}); });
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment