Skip to content

Instantly share code, notes, and snippets.

@mattparrilla
Last active August 29, 2015 14:03
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 mattparrilla/bcfeb1dbf17565c9d4e5 to your computer and use it in GitHub Desktop.
Save mattparrilla/bcfeb1dbf17565c9d4e5 to your computer and use it in GitHub Desktop.
Small Multiples Choropleth: Lyme Disease By County in Vermont
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
margin-top: 70px;
margin-left: 25px;
}
svg {
font: 10px sans-serif;
display: inline;
}
.county {
stroke-width: 1px;
stroke: #aaa;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/queue.v1.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script src="http://d3js.org/colorbrewer.v1.min.js"></script>
<script>
var width = 133,
height = 175;
var projection = d3.geo.transverseMercator()
.rotate([72.57, -44.20])
.translate([50,60])
.scale([4000]);
var path = d3.geo.path()
.projection(projection);
var mapColor = colorbrewer.Blues[9];
var quantize = d3.scale.quantize()
.domain([0, 150])
.range(mapColor);
var years = ['2000', '2001', '2002', '2003', '2004', '2005', '2006',
'2007', '2008', '2009', '2010', '2011', '2012', '2013'];
queue()
.defer(d3.json, "vermont-counties.json")
.defer(d3.csv, "lyme-vt-counties.csv")
.await(ready);
// Load CSV
function ready(error, vt, data) {
var vermont = topojson.feature(vt, vt.objects.counties);
for (var j=0; j<years.length; j++) {
var svg = d3.select("body").append("svg")
.attr("x", 350*j)
.attr("width", width)
.attr("height", height);
svg.append("path")
.datum(vermont)
.attr("d", path)
.attr("x", j*400)
.style("stroke", "#777")
.style("stroke-width", "1");
svg.selectAll(".subunit")
.data(topojson.feature(vt, vt.objects.counties).features)
.enter().append("path")
.attr("d", path)
.attr("class", "county")
.style("fill", function(d) {
for (var i=0; i<data.length; i++) {
if (data[i].county.toUpperCase() === d.properties.county) {
var cases = data[i][years[j]];
if (cases > 0) {
return quantize(cases);
} else {
return "#ccc";
}
}
}
return "#aaa";
});
}
};
</script>
county 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008-confirmed 2008-probable 2008 2009-confirmed 2009-probable 2009 2010-confirmed 2010-probable 2010 2011-confirmed 2011-probable 2011 2012-confirmed 2012-probable 2012 2013-confirmed 2013-probable 2013
Addison 1 0 0 1 0 4 4 3 5 15 6 21 28 5 33 14 2 16 28 8 36 17 8 25 30 13 43
Bennington 0 7 0 3 6 9 16 33 36 84 27 111 66 21 87 56 14 70 107 48 155 67 34 101 101 32 133
Caledonia 1 0 0 0 0 0 1 0 0 1 1 2 0 1 1 0 0 0 2 1 3 3 0 3 4 1 5
Chittenden 0 0 0 1 0 1 0 6 5 17 1 18 18 3 21 13 3 16 34 6 40 34 9 43 66 12 78
Essex 0 1 0 0 0 0 0 0 0 1 0 1 0 0 0 0 0 0 0 0 0 0 0 0 1 0 1
Franklin 2 0 0 0 0 1 0 0 2 3 0 3 1 0 1 4 1 5 6 0 6 5 1 6 9 1 10
Grand Isle 0 0 0 0 0 0 0 1 0 3 0 3 3 0 3 1 0 1 2 0 2 2 0 2 4 3 7
Lamoille 0 0 0 0 0 0 0 0 2 2 0 2 1 0 1 2 0 2 2 1 3 1 0 1 2 2 4
Orange 0 1 1 0 0 1 0 1 0 5 0 5 5 0 5 5 1 6 9 1 10 11 0 11 15 2 17
Orleans 0 0 0 0 1 0 0 0 1 1 0 1 0 0 0 1 0 1 2 0 2 0 1 1 1 0 1
Rutland 1 0 2 2 1 1 2 4 10 36 8 44 48 12 60 35 19 54 82 22 104 56 12 68 109 31 140
Washington 0 0 0 1 2 0 0 1 3 5 0 5 3 1 4 3 0 3 4 1 5 4 1 5 5 1 6
Windham 1 2 0 2 7 3 5 10 16 37 12 49 39 14 53 34 11 45 60 16 76 32 21 53 70 29 99
Windsor 1 1 0 1 0 2 1 3 3 21 4 25 35 4 39 25 7 32 55 15 70 35 13 48 106 38 144
Total 7 12 3 11 17 22 29 62 83 231 59 290 247 61 308 193 58 251 393 119 512 267 100 367 523 165 688
Display the source blob
Display the rendered blob
Raw
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment