Skip to content

Instantly share code, notes, and snippets.

@hmader

hmader/for-chart-data.csv

Created November 2, 2015 21:29
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 hmader/26d6d9cc1f0f5625fc07 to your computer and use it in GitHub Desktop.
Save hmader/26d6d9cc1f0f5625fc07 to your computer and use it in GitHub Desktop.
Download ZIP
Week 10: Small Multiples
Raw
for-chart-data.csv
Country Year Contraception IMR Fertility U5MR
China 1990 42.1 2.506 53.8
China 1991 41.8 2.342 53.3
China 1992 84.59999847 41.2 2.171 52.4
China 1993 40.2 2.009 51
China 1994 90.69999695 39 1.865 49.3
China 1995 90.40000153 37.7 1.746 47.5
China 1996 91.09999847 36.4 1.656 45.6
China 1997 83.8 35 1.591 43.6
China 1998 33.5 1.546 41.5
China 1999 83 31.9 1.52 39.3
China 2000 83.8 30.2 1.51 36.9
China 2001 86.9 28.3 1.514 34.3
China 2002 26.2 1.527 31.6
China 2003 24.2 1.546 28.9
China 2004 22.2 1.566 26.3
China 2005 20.3 1.585 24
China 2006 84.6 18.7 1.602 21.9
China 2007 17.2 1.617 20.1
China 2008 89.3 15.8 1.63 18.5
China 2009 89 14.6 1.642 17
China 2010 89.1 13.5 1.65 15.7
China 2011 88.6 12.5 1.657 14.5
China 2012 87.9 11.5 1.663 13.4
China 2013 10.6 1.668 12.3
United Kingdom 1990 7.9 1.83 9.3
United Kingdom 1991 70 7.4 1.82 8.7
United Kingdom 1992 7 1.79 8.2
United Kingdom 1993 82 6.6 1.76 7.8
United Kingdom 1994 6.3 1.74 7.4
United Kingdom 1995 82 6.1 1.71 7.2
United Kingdom 1996 5.9 1.73 7
United Kingdom 1997 5.8 1.72 6.9
United Kingdom 1998 74 5.8 1.71 6.8
United Kingdom 1999 82 5.7 1.68 6.7
United Kingdom 2000 76 5.6 1.64 6.6
United Kingdom 2001 80 5.4 1.63 6.4
United Kingdom 2002 83 5.3 1.63 6.3
United Kingdom 2003 84 5.3 1.7 6.3
United Kingdom 2004 84 5.2 1.75 6.1
United Kingdom 2005 82 5.1 1.76 6
United Kingdom 2006 82 5 1.82 5.9
United Kingdom 2007 84 4.9 1.86 5.8
United Kingdom 2008 82 4.7 1.91 5.6
United Kingdom 2009 84 4.6 1.89 5.4
United Kingdom 2010 4.4 1.92 5.2
United Kingdom 2011 4.2 1.91 5
United Kingdom 2012 4.1 1.92 4.8
United Kingdom 2013 3.9 1.92 4.6
Indonesia 1990 62.2 3.122 84.7
Indonesia 1991 49.7 59.8 3.023 80.9
Indonesia 1992 57.4 2.931 77.1
Indonesia 1993 53.1 55.1 2.844 73.6
Indonesia 1994 54.7 52.9 2.764 70.1
Indonesia 1995 54.2 50.8 2.691 66.7
Indonesia 1996 54.2 48.7 2.628 63.6
Indonesia 1997 57.4 46.7 2.575 60.5
Indonesia 1998 55.4 44.7 2.534 57.6
Indonesia 1999 55.4 42.9 2.503 54.9
Indonesia 2000 54.8 41.1 2.484 52.3
Indonesia 2001 52.5 39.4 2.475 49.8
Indonesia 2002 37.8 2.474 47.6
Indonesia 2003 60.3 36.3 2.479 45.4
Indonesia 2004 56.7 36 2.486 49.3
Indonesia 2005 57.9 33.4 2.493 41.4
Indonesia 2006 32.1 2.495 39.6
Indonesia 2007 61.4 30.9 2.49 37.9
Indonesia 2008 56.6 29.7 2.479 36.2
Indonesia 2009 60.63 28.5 2.46 34.7
Indonesia 2010 60.9 27.4 2.434 33.1
Indonesia 2011 26.3 2.403 31.7
Indonesia 2012 61.9 25.3 2.37 30.4
Indonesia 2013 24.4 2.338 29.3
Vietnam 1990 36.6 3.558 102.3
Vietnam 1991 35.4 3.416 105.2
Vietnam 1992 34.3 3.255 108.2
Vietnam 1993 33.1 3.074 111.1
Vietnam 1994 65 32 2.878 113.4
Vietnam 1995 30.9 2.676 114.8
Vietnam 1996 29.9 2.482 115.4
Vietnam 1997 75.3 28.9 2.309 114.9
Vietnam 1998 71.9 27.9 2.166 113.4
Vietnam 1999 27 2.057 111
Vietnam 2000 74.2 26.1 1.983 107.9
Vietnam 2001 73.9 25.3 1.94 104.1
Vietnam 2002 78.5 24.6 1.918 99.9
Vietnam 2003 75.3 23.9 1.907 95.4
Vietnam 2004 75.7 23.2 1.902 90.6
Vietnam 2005 76.8 22.6 1.897 85.5
Vietnam 2006 75.7 22 1.889 80.7
Vietnam 2007 79 21.4 1.877 76.1
Vietnam 2008 79.5 20.8 1.862 70.1
Vietnam 2009 20.3 1.843 65.8
Vietnam 2010 19.8 1.82 62.1
Vietnam 2011 77.8 19.3 1.794 58.5
Vietnam 2012 18.8 1.768 55.6
Vietnam 2013 18.3 1.743 53.4
Zimbabwe 1990 51.2 5.176 75.8
Zimbabwe 1991 52.6 5.001 78.8
Zimbabwe 1992 54.5 4.84 82.7
Zimbabwe 1993 56.4 4.69 87
Zimbabwe 1994 48.1 58.1 4.554 91.2
Zimbabwe 1995 60.1 4.432 95.5
Zimbabwe 1996 61.6 4.328 99.2
Zimbabwe 1997 62.7 4.24 102
Zimbabwe 1998 63.3 4.169 103.9
Zimbabwe 1999 53.5 63.5 4.112 105.2
Zimbabwe 2000 63.5 4.069 105.8
Zimbabwe 2001 63.2 4.039 105.6
Zimbabwe 2002 62.7 4.018 105.1
Zimbabwe 2003 61.9 4.002 104
Zimbabwe 2004 61.5 3.987 103
Zimbabwe 2005 61 3.969 101.9
Zimbabwe 2006 60.2 60.3 3.941 100
Zimbabwe 2007 59.9 3.903 98
Zimbabwe 2008 58.9 3.853 95.4
Zimbabwe 2009 64.9 57.7 3.792 92.9
Zimbabwe 2010 55.8 3.721 89.5
Zimbabwe 2011 58.5 54 3.643 85.6
Zimbabwe 2012 49.4 3.564 78.5
Zimbabwe 2013 48.8 3.486 74.5
Kenya 1990 65.8 6.037 102.3
Kenya 1991 67.4 5.847 105.2
Kenya 1992 68.9 5.668 108.2
Kenya 1993 32.7 70.4 5.506 111.1
Kenya 1994 71.4 5.366 113.4
Kenya 1995 71.9 5.251 114.8
Kenya 1996 71.7 5.165 115.4
Kenya 1997 71.1 5.102 114.9
Kenya 1998 39 69.9 5.059 113.4
Kenya 1999 68.4 5.03 111
Kenya 2000 66.5 5.012 107.9
Kenya 2001 64.5 5.001 104.1
Kenya 2002 62.2 4.99 99.9
Kenya 2003 39.3 59.7 4.976 95.4
Kenya 2004 57.2 4.955 90.6
Kenya 2005 54.3 4.923 85.5
Kenya 2006 51.8 4.879 80.7
Kenya 2007 49.5 4.824 76.1
Kenya 2008 46.2 4.761 70.1
Kenya 2009 45.5 44.3 4.691 65.8
Kenya 2010 42.4 4.616 62.1
Kenya 2011 40.3 4.538 58.5
Kenya 2012 39.2 4.459 55.6
Kenya 2013 38 4.382 53.4
Ghana 1990 79.8 5.616 127.4
Ghana 1991 77.5 5.505 123.1
Ghana 1992 17.2 75.6 5.392 119.7
Ghana 1993 20.3 74.1 5.278 117.1
Ghana 1994 73 5.165 115.1
Ghana 1995 72 5.058 113.4
Ghana 1996 71 4.959 111.6
Ghana 1997 69.8 4.87 109.5
Ghana 1998 15 68.4 4.793 106.9
Ghana 1999 22 66.7 4.727 104
Ghana 2000 64.9 4.669 100.7
Ghana 2001 63 4.617 97.3
Ghana 2002 61.2 4.566 94.2
Ghana 2003 25.2 59.6 4.512 91.3
Ghana 2004 58.1 4.455 88.7
Ghana 2005 56.8 4.392 86.5
Ghana 2006 16.6 55.6 4.326 84.4
Ghana 2007 54.4 4.257 82.2
Ghana 2008 23.5 53.1 4.188 79.9
Ghana 2009 51.7 4.119 77.4
Ghana 2010 50.2 4.052 74.7
Ghana 2011 34.3 48.6 3.985 71.9
Ghana 2012 47 3.92 69.2
Ghana 2013 45.5 3.857 66.5
United States 1990 70.7 9.4 2.081 11.2
United States 1991 9.1 2.0625 10.9
United States 1992 8.8 2.046 10.5
United States 1993 8.5 2.0195 10.1
United States 1994 8.2 2.0015 9.8
United States 1995 76.4 8 1.978 9.5
United States 1996 7.7 1.976 9.2
United States 1997 7.5 1.971 8.9
United States 1998 7.3 1.999 8.7
United States 1999 7.2 2.0075 8.6
United States 2000 7.1 2.056 8.4
United States 2001 7 2.0305 8.3
United States 2002 72.8 6.9 2.0205 8.2
United States 2003 6.8 2.0475 8.1
United States 2004 6.9 2.0515 8.1
United States 2005 6.8 2.057 8
United States 2006 6.7 2.108 7.9
United States 2007 6.6 2.12 7.8
United States 2008 78.6 6.5 2.072 7.7
United States 2009 6.4 2.002 7.5
United States 2010 76.4 6.3 1.931 7.4
United States 2011 6.1 1.8945 7.2
United States 2012 6.1 1.8805 7.1
United States 2013 5.9 1.8695 6.9
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="yau.css" />
<body>
<div class="header">
<h2>Contraception, Fertility, and Mortality</h2>
<p id="sources">Source: <a href="http://data.worldbank.org/indicator/SP.DYN.TFRT.IN?page=1">World Bank</a>.</p>
</div>
<div id="explain" class="left">
<h3>Total</h3>
<p>Text about the total illnesses by country here.</p>
</div>
<div id="filters">
<table class="left">
<tr>
<td><a id="U5MR" class="current">U5MR</a></td>
</tr>
<tr>
<td><a id="IMR">IMR</a></td>
</tr>
<tr>
<td><a id="Fertility">Fertility</a></td>
</tr>
<tr>
<td><a id="Contraception">Contraception</a></td>
</tr>
</table>
</div>
<div id="vis"></div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<script type="text/javascript">
var explain = {
"Contraception": "The contraceptive prevalence",
"IMR": "The infant mortality rate.",
"U5MR": "The under-5 mortality rate",
"Fertility": "The fertility rate"
};
var countries = [];
var margin = {
top: 30,
right: 15,
bottom: 20,
left: 45
},
width = 500 - margin.left - margin.right,
height = 100 - margin.top - margin.bottom;
var parseDate = d3.time.format("Year %Y").parse;
var outputDate = d3.time.format("%Y");
var x = d3.time.scale()
.range([0, width]);
var y = d3.scale.linear()
.range([height, 0]);
var yAxis = d3.svg.axis()
.orient("left")
.ticks(1)
.outerTickSize(0)
.tickFormat(d3.format("s"));
var current = "U5MR";
var area = d3.svg.area()
.x(function (d) {
return x(d.date);
})
.y0(height)
.y1(function (d) {
return y(d[current]);
});
var line = d3.svg.line()
.x(function (d) {
return x(d.date);
})
.y(function (d) {
return y(d[current]);
});
var data = [],
circle = null,
caption = null,
curYear = null;
var bisect = d3.bisector(function (d) {
return d.date;
}).left;
var format = d3.time.format("%Y");
var xScale = d3.time.scale().range([0, width]);
var yScale = d3.scale.linear().range([height, 0]);
var xValue = function(d) {
return d.date;
};
var yValue = function(d) {
return d.count;
};
d3.select("#explain h3").text(current);
d3.select("#explain p").html(explain[current]);
d3.csv("for-chart-data.csv", typeFix, function (error, data) {
//typeFix is a function that parses the dates and sets the strings to numeric. See below!
console.log("data after load", data);
// Nest data by symbol.
countries = d3.nest()
.key(function (d) {
return d.Country;
})
.sortValues(function (a, b) {
return a.date - b.date;
})
.entries(data);
console.log("countries", countries);
// Compute the minimum and maximum date across symbols.
// We assume values are sorted by date.
x.domain([
d3.min(countries, function (s) {
return s.values[0].date;
}),
d3.max(countries, function (s) {
return s.values[s.values.length - 1].date;
})
]);
y.domain([0, d3.max(countries, function (c) {
return d3.max(c.values, function (v) {
return +v[current];
});
})
]);
yAxis.scale(y);
// Add an SVG element for each symbol, with the desired dimensions and margin.
var svg = d3.select("#vis").selectAll("svg")
.data(countries)
.enter().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 + ")")
.each(multiple); // uses each to call the multiple code for each country
function multiple(country) {
var svg = d3.select(this);
svg.append("rect")
.attr("class", "background")
.style("pointer-events", "all")
.attr("width", width)
.attr("height", height)
.attr("opacity", '0')
.attr("height", height).on("mouseover", mouseover)
.on("mousemove", mousemove)
.on("mouseout", mouseout);
// Add the area path elements. Note: the y-domain is set per element.
svg.append("path")
.attr("class", "area")
.attr("d", function (d) {
return area(d.values);
});
// Add the line path elements. Note: the y-domain is set per element.
var lines = svg.append("g");
lines.append("path")
.attr("class", "line")
.attr("d", function (d) {
return line(d.values);
});
svg.append("text")
.attr("class", "label")
.attr("x", 0)
.attr("y", height + margin.bottom / 2)
.style("text-anchor", "start")
.text(function (d) {
return /*outputDate*/ (d.values[0].date);
});
// Add a small label for the symbol name.
svg.append("text")
.attr("class", "label")
.attr("x", width / 2)
.attr("y", -8)
.style("text-anchor", "middle")
.text(function (d) {
return d.key;
});
svg.append("text")
.attr("class", "label")
.attr("x", width)
.attr("y", height + margin.bottom / 2)
.style("text-anchor", "end")
.text(function (d) {
return /*outputDate*/ (d.values[d.values.length - 1].date);
});
// put a dot on last point
svg.append("circle")
.attr("class", "endpoint")
.attr("cx", function (d) {
return x(d.values[d.values.length - 1].date);
})
.attr("cy", function (d) {
return y(d.values[d.values.length - 1][current]);
})
.attr("r", 2);
// label the value on the last point
svg.append("text")
.attr("class", "endpoint")
.attr("x", width)
.attr("y", function (d) {
return y(d.values[d.values.length - 1][current]);
})
.attr("dy", -5)
.style("text-anchor", "end")
.text(function (d) {
return d.values[d.values.length - 1][current];
});
circle = lines.append("circle")
.attr("r", 2.2)
.attr("opacity", 0)
.style("pointer-events", "none");
caption = lines.append("text")
.attr("class", "caption")
.attr("text-anchor", "middle")
.style("pointer-events", "none")
.attr("dy", -8)
.attr("fill", 'red');
curYear = lines.append("text")
.attr("class", "year")
.attr("text-anchor", "middle")
.style("pointer-events", "none")
.attr("dy", 13)
.attr("y", height);
svg.append("g").attr("class", "y axis").call(yAxis);
} // end multiple
d3.selectAll("#filters a").on("click", function () {
d3.selectAll("#filters a").classed("current", false);
d3.select(this).classed("current", true);
var label = d3.select(this).attr("text");
var selection = d3.select(this).attr("id");
current = selection;
d3.select("#explain h3").text(selection);
d3.select("#explain p").html(explain[selection]);
transition(selection);
});
function transition(arg) {
current = arg;
y.domain([0, d3.max(countries, function (c) {
return d3.max(c.values, function (v) {
return +v[current];
});
})
]);
yAxis.scale(y);
console.log("in trans", y.domain());
svg.each(function (country) {
var chart = d3.select(this).transition();
chart.select(".y.axis").call(yAxis);
chart.select("path.area")
.attr("d", function (d) {
return area(d.values);
});
chart.select("path.line")
.attr("d", function (d) {
return line(d.values);
});
chart.select("circle.endpoint")
.attr("cy", function (d) {
return y(d.values[d.values.length - 1][current]);
});
// label the value on the last point
chart.select("text.endpoint")
.attr("y", function (d) {
return y(d.values[d.values.length - 1][current]);
})
.text(function (d) {
return d.values[d.values.length - 1][current];
});
}); // end each
}
});
function mouseover() {
circle.attr("opacity", 1.0);
// d3.selectAll(".static_year").classed("hidden", true);
return mousemove.call(this);
};
function mousemove() {
var date, index, year;
year = xScale.invert(d3.mouse(this)[0]).getFullYear();
date = format.parse('' + year);
index = 0;
circle.attr("cx", xScale(date)).attr("cy", function (c) {
index = bisect(c.values, date, 0, c.values.length - 1);
return yScale(yValue(c.values[index]));
});
caption.attr("x", xScale(date)).attr("y", function (c) {
return yScale(yValue(c.values[index]));
}).text(function (c) {
return yValue(c.values[index]);
});
return curYear.attr("x", xScale(date)).text(year);
};
function mouseout() {
// d3.selectAll(".static_year").classed("hidden", false);
circle.attr("opacity", 0);
caption.text("");
return curYear.text("");
};
// this function is applied to all the data values on load!
function typeFix(d) {
d.Contraception = +d.Contraception;
d.IMR = +d.IMR;
d.Fertility = +d.Fertility;
d.U5MR = +d.U5MR;
// d.date = parseDate(d.Year);
d.date = d.Year;
return d;
}
</script>
</body>
Raw
yau.css
body{font:10px Helvectica,Arial,sans-serif;}
a{color:#821122;}
#main-wrapper{width:940px;margin:0 auto;background:#fff;}
#fd-header{text-align:center;padding:10px 0;border-bottom:2px solid #000;}
#fd-header a img{border:none;}
#header{border-bottom:1px solid #ccc;margin:0 26px 20px 16px;}
#header h1{font-size:2.4em;font-family:Georgia,Palatino,serif;font-weight:normal;}
#header p{font-family:Georgia,Palatino,serif;font-size:1.3em;line-height:1.4em;}
#footer-wrapper{border-top:1px solid #ccc;padding:10px 0;}
#footer{width:908px;margin:0 auto;text-align:center;font-size:1.1em;font-family:Georgia;}
#footer a{color:#821122;}
#explain{margin:0 0 0 16px;width:550px;height:75px;}
#explain h3{font-size:1.5em;margin:0 0 0.5em 0;padding:0;}
#explain p{font-size:1.2em;line-height:1.4em;color:#717171;margin-top:0;}
#filters{margin:0 24px 10px 16px;float:right;}
#filters table{width:85px;border-collapse:collapse;border-top:1px solid #ccc;margin-right:2px;}
#filters table td{padding:0;margin:0;}
#filters a{display:block;width:93px;padding:2px 4px;font-size:1.1em;color:#919292;background:#F0F4F5;cursor:pointer;border-left:1px solid #CCCCCC;border-bottom:1px solid #CCCCCC;border-right:1px solid #CCCCCC;overflow:hidden;}
#filters a:hover{text-decoration:underline;}
#filters a.current{background:#fff;color:#000;font-weight:bold;}
#filters a.current:hover{text-decoration:none;}
#vis{background:#fff;min-height:530px;}
.aheader{font-size:1.1em;font-family:Helvetica,Arial,sans-serif;font-weight:bold;}
.ticklabel{font-size:0.85em;fill:#888;}
.chart{float:left;padding:16px;border-left:1px dotted #e2e2e2;border-top:1px dotted #e2e2e2;}
.chart.noborder{border-left:none;padding-left:0;margin-left:16px;}
.chart.endrow{padding-right:0;}.rule line{stroke:#eee;shape-rendering:crispEdges;}.rule line.axis{stroke:#000;}
.sleeping{fill:#DFDDD5;}
.eating{fill:#003950;}
.care{fill:#5E5E66;}
.shopping{fill:#88A3B6;}
.household{fill:#4C4322;}
.procare{fill:#B45B49;}
.education{fill:#917E8A;}
.television{fill:#5F1D00;}
.leisure{fill:#5F1D00;}
.socializing{fill:#EDDAC3;}
.volunteering{fill:#804D00;}
.working{fill:#E59138;}
.reliigous{fill:#00293D;}
.correspondence{fill:#AB9DA7;}
.sports{fill:#706B5A;}
.area{fill:#e2e2e2;}
.line,circle.area{fill:none;stroke:steelblue;stroke-width:1.5px;}
circle.area{fill:#fff;}
.right{float:right;padding-left:20px;border-left:1px solid #f2f2f2;margin-left:20px;margin-top:20px;}
.left{float:left;}
.clr{clear:both;}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment