mattparrilla · August 29, 2015 14:03
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <meta charset="utf-8">
 <style>

 body {
 }

 .land {
  fill: white;
  stroke: #bbb;
 }

 .counties {
  fill: none;
  stroke: #fff;
  stroke-width: .5px;
 }

 .state-boundary {
  fill: none;
  stroke: #fff;
 }

 p, h2 {
    text-align: center;
    margin: 5px 0;
 }

 span {
    padding-right: 10px;
    text-decoration: underline;
    cursor: pointer;
 }


 </style>

 <body>
 <h2>Choose A Date Range</h2>
 <p><span id="count_9296">1992-1996</span> <span id="count_9701">1997-2001</span> <span id="count_0206">2002-2006</span> <span id="count_0711">2007-2011</span></p>

 <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 src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

 <script>
 var width = 960,
    height = 500;

 var projection = d3.geo.albersUsa()
    .scale(700)
    .translate([width / 2, height / 2]);

 var path = d3.geo.path()
    .projection(projection);

 var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

 var mapColor = colorbrewer.Reds[9];

 var quantize = d3.scale.quantize()
    .domain([0, 500])
    .range(mapColor.slice(1));

 queue()
    .defer(d3.json, 'us.json')
    .defer(d3.csv, 'lyme-disease-by-county.csv')
    .await(ready);

 function ready(error, us, data) {
    svg.insert("path", ".graticule")
        .datum(topojson.feature(us, us.objects.land))
        .attr("class", "land")
        .attr("d", path);

    svg.append("g")
        .attr("class", "counties")
    .selectAll("path")
        .data(topojson.feature(us, us.objects.counties).features)
    .enter().append("path")
        .attr("d", path)
        .attr("class", "county")
        .style("fill", function(d) {
            for (var i=0; i < data.length; i++) {
                var county = parseInt(data[i].id),
                    cases = data[i].count_9296;

                if (county === d.id) {
                    if (cases) {
                        return quantize(cases);
                    } else {
                        return '#f8f8f8';
                    }
                    break;
                }
            }
            return '#999';
        });

    svg.insert("path", ".graticule")
        .datum(topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; }))
        .attr("class", "state-boundary")
        .attr("d", path);

    chooseRange(data);
 }

 var chooseRange = function(data) {
    $('p span').click(function() {
        var range = $(this).attr("id");

        svg.selectAll('.county')
            .transition()
            .delay(500)
            .duration(1000)
            .style("fill", function(d) {
                for (var i=0; i < data.length; i++) {
                    var county = parseInt(data[i].id),
                        cases = data[i][range];

                    if (county === d.id) {
                        if (cases) {
                            return quantize(cases);
                        } else {
                            return '#f8f8f8';
                        }
                        break;
                    }
                }
                return '#999';
            });
    });
 }

 var colorCounty = function(d, county, cases) {
    if (county === d.id) {
        if (cases) {
            return quantize(cases);
        } else {
            return mapColor[0]
        }
    }
    return false;
 };


 d3.select(self.frameElement).style("height", height + "px");

 </script>
 </body>
 </html>
diff --git a/lyme-disease-by-county.csv b/lyme-disease-by-county.csv
diff --git a/thumbnail.png b/thumbnail.png
diff --git a/us.json b/us.json
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	body {
	}

	.land {
	fill: white;
	stroke: #bbb;
	}

	.counties {
	fill: none;
	stroke: #fff;
	stroke-width: .5px;
	}

	.state-boundary {
	fill: none;
	stroke: #fff;
	}

	p, h2 {
	text-align: center;
	margin: 5px 0;
	}

	span {
	padding-right: 10px;
	text-decoration: underline;
	cursor: pointer;
	}


	</style>

	<body>
	<h2>Choose A Date Range</h2>
	<p><span id="count_9296">1992-1996</span> <span id="count_9701">1997-2001</span> <span id="count_0206">2002-2006</span> <span id="count_0711">2007-2011</span></p>

	<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 src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

	<script>
	var width = 960,
	height = 500;

	var projection = d3.geo.albersUsa()
	.scale(700)
	.translate([width / 2, height / 2]);

	var path = d3.geo.path()
	.projection(projection);

	var svg = d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", height);

	var mapColor = colorbrewer.Reds[9];

	var quantize = d3.scale.quantize()
	.domain([0, 500])
	.range(mapColor.slice(1));

	queue()
	.defer(d3.json, 'us.json')
	.defer(d3.csv, 'lyme-disease-by-county.csv')
	.await(ready);

	function ready(error, us, data) {
	svg.insert("path", ".graticule")
	.datum(topojson.feature(us, us.objects.land))
	.attr("class", "land")
	.attr("d", path);

	svg.append("g")
	.attr("class", "counties")
	.selectAll("path")
	.data(topojson.feature(us, us.objects.counties).features)
	.enter().append("path")
	.attr("d", path)
	.attr("class", "county")
	.style("fill", function(d) {
	for (var i=0; i < data.length; i++) {
	var county = parseInt(data[i].id),
	cases = data[i].count_9296;

	if (county === d.id) {
	if (cases) {
	return quantize(cases);
	} else {
	return '#f8f8f8';
	}
	break;
	}
	}
	return '#999';
	});

	svg.insert("path", ".graticule")
	.datum(topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; }))
	.attr("class", "state-boundary")
	.attr("d", path);

	chooseRange(data);
	}

	var chooseRange = function(data) {
	$('p span').click(function() {
	var range = $(this).attr("id");

	svg.selectAll('.county')
	.transition()
	.delay(500)
	.duration(1000)
	.style("fill", function(d) {
	for (var i=0; i < data.length; i++) {
	var county = parseInt(data[i].id),
	cases = data[i][range];

	if (county === d.id) {
	if (cases) {
	return quantize(cases);
	} else {
	return '#f8f8f8';
	}
	break;
	}
	}
	return '#999';
	});
	});
	}

	var colorCounty = function(d, county, cases) {
	if (county === d.id) {
	if (cases) {
	return quantize(cases);
	} else {
	return mapColor[0]
	}
	}
	return false;
	};


	d3.select(self.frameElement).style("height", height + "px");

	</script>
	</body>
	</html>