tjaensch · December 11, 2018 21:23
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">
 	<head>
 		<meta charset="utf-8">
 		<title>D3 Choropleth Demo</title>
 		<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
 		<style type="text/css">
 				.legend {
 				  font-size: 12px;
 				}
 		</style>
 	</head>
 	<body>
 		<!-- SVG container -->
 		<div class="map"></div>

 		<!-- SVG script -->
 		<script type="text/javascript">
 			
 			//Width and height
 			var w = 960;
 			var h = 500;

 			//Projection
 			var projection = d3.geo.albersUsa()
                       .translate([-1900, 450])
                       .scale([9000]);

 			//Define default path generator
 			var path = d3.geo.path()
 					.projection(projection);

 			//Define legend labels
 			var legend_labels = ["< 50", "50+", "100+", "150+", "200+"]

 			//Define scale to sort data values into buckets of color
 			var color_domain = [0, 50, 100, 150, 200, 250];
 			var color = d3.scale.threshold()
 								.domain(color_domain)
 								.range(['rgb(241,238,246)','rgb(215,181,216)','rgb(223,101,176)','rgb(221,28,119)','rgb(152,0,67)']);
 								//Colors taken from http://colorbrewer2.org/
 					
 			//Create SVG element
 			var svg = d3.select(".map")
 						.append("svg")
 						.attr("width", w)
 						.attr("height", h);

 					//Load in Maryland County data
 					d3.csv("Number_of_Drug_and_Alcohol-Related_Intoxication_Deaths_by_County_of_Incident__2013.csv", function(data) {
 						
 					//Load in GeoJSON data
 					d3.json("maryland-counties.json", function(json) {
 						//Merge the Maryland County data and GeoJSON
 						//Loop through once for each county data value
 						for (var i = 0; i < data.length; i++) {
 					
 							//Grab state name
 							var dataCounty = data[i].county;
 							
 							//Grab data value, and convert from string to float
 							var dataValue = parseInt(data[i].value);
 					
 							//Find the corresponding state inside the GeoJSON
 							for (var j = 0; j < json.features.length; j++) {
 							
 								var jsonCounty = json.features[j].properties.name;
 					
 								if (dataCounty == jsonCounty) {
 							
 									//Copy the data value into the JSON
 									json.features[j].properties.value = dataValue;
 									
 									//Stop looking through the JSON
 									break;
 									
 								}
 							}		
 						}
 						//Bind data and create one path per GeoJSON feature
 						svg.selectAll("path")
 						   .data(json.features)
 						   .enter()
 						   .append("path")
 						   .attr("d", path)
 						   .style("fill", function(d) {
 							   		return color(d.properties.value);
 						   })
 						   .append("title")
 						   .text(function(d) {
 						         return d.properties.name + ": " + d.properties.value;
 						   });
 			
 						});
 		
 				}); //end csv load

 			  //Adding legend
 			  var legend = svg.selectAll("g.legend")
 			  .data([0, 50, 100, 150, 200])
 			  .enter().append("g")
 			  .attr("class", "legend");

 			  var ls_w = 20, ls_h = 20;

 			  legend.append("rect")
 			  .attr("x", 20)
 			  .attr("y", function(d, i){ return h - (i*ls_h) - 2*ls_h;})
 			  .attr("width", ls_w)
 			  .attr("height", ls_h)
 			  .style("fill", function(d, i) { return color(d); })
 			  .style("opacity", 0.8);

 			  legend.append("text")
 			  .attr("x", 50)
 			  .attr("y", function(d, i){ return h - (i*ls_h) - ls_h - 4;})
 			  .text(function(d, i){ return legend_labels[i]; });
 			
 		</script>

 		<p><small>Data: https://catalog.data.gov/dataset/number-of-drug-and-alcohol-related-intoxication-deaths-by-county-of-incident-2007-2013-2ab0c<br> GeoJSON: https://github.com/frankrowe/maryland-geojson</small></p>
 	</body>
 </html>
diff --git a/maryland-counties.json b/maryland-counties.json
diff --git a/Number_of_Drug_and_Alcohol-Related_Intoxication_Deaths_by_County_of_Incident__2013.csv b/Number_of_Drug_and_Alcohol-Related_Intoxication_Deaths_by_County_of_Incident__2013.csv
diff --git a/thumbnail.png b/thumbnail.png
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>D3 Choropleth Demo</title>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
	<style type="text/css">
	.legend {
	font-size: 12px;
	}
	</style>
	</head>
	<body>
	<!-- SVG container -->
	<div class="map"></div>

	<!-- SVG script -->
	<script type="text/javascript">

	//Width and height
	var w = 960;
	var h = 500;

	//Projection
	var projection = d3.geo.albersUsa()
	.translate([-1900, 450])
	.scale([9000]);

	//Define default path generator
	var path = d3.geo.path()
	.projection(projection);

	//Define legend labels
	var legend_labels = ["< 50", "50+", "100+", "150+", "200+"]

	//Define scale to sort data values into buckets of color
	var color_domain = [0, 50, 100, 150, 200, 250];
	var color = d3.scale.threshold()
	.domain(color_domain)
	.range(['rgb(241,238,246)','rgb(215,181,216)','rgb(223,101,176)','rgb(221,28,119)','rgb(152,0,67)']);
	//Colors taken from http://colorbrewer2.org/

	//Create SVG element
	var svg = d3.select(".map")
	.append("svg")
	.attr("width", w)
	.attr("height", h);

	//Load in Maryland County data
	d3.csv("Number_of_Drug_and_Alcohol-Related_Intoxication_Deaths_by_County_of_Incident__2013.csv", function(data) {

	//Load in GeoJSON data
	d3.json("maryland-counties.json", function(json) {
	//Merge the Maryland County data and GeoJSON
	//Loop through once for each county data value
	for (var i = 0; i < data.length; i++) {

	//Grab state name
	var dataCounty = data[i].county;

	//Grab data value, and convert from string to float
	var dataValue = parseInt(data[i].value);

	//Find the corresponding state inside the GeoJSON
	for (var j = 0; j < json.features.length; j++) {

	var jsonCounty = json.features[j].properties.name;

	if (dataCounty == jsonCounty) {

	//Copy the data value into the JSON
	json.features[j].properties.value = dataValue;

	//Stop looking through the JSON
	break;

	}
	}
	}
	//Bind data and create one path per GeoJSON feature
	svg.selectAll("path")
	.data(json.features)
	.enter()
	.append("path")
	.attr("d", path)
	.style("fill", function(d) {
	return color(d.properties.value);
	})
	.append("title")
	.text(function(d) {
	return d.properties.name + ": " + d.properties.value;
	});

	});

	}); //end csv load

	//Adding legend
	var legend = svg.selectAll("g.legend")
	.data([0, 50, 100, 150, 200])
	.enter().append("g")
	.attr("class", "legend");

	var ls_w = 20, ls_h = 20;

	legend.append("rect")
	.attr("x", 20)
	.attr("y", function(d, i){ return h - (ils_h) - 2ls_h;})
	.attr("width", ls_w)
	.attr("height", ls_h)
	.style("fill", function(d, i) { return color(d); })
	.style("opacity", 0.8);

	legend.append("text")
	.attr("x", 50)
	.attr("y", function(d, i){ return h - (i*ls_h) - ls_h - 4;})
	.text(function(d, i){ return legend_labels[i]; });

	</script>

	<p><small>Data: https://catalog.data.gov/dataset/number-of-drug-and-alcohol-related-intoxication-deaths-by-county-of-incident-2007-2013-2ab0c<br> GeoJSON: https://github.com/frankrowe/maryland-geojson</small></p>
	</body>
	</html>
	county	value
	Allegany	15
	Anne Arundel	78
	Baltimore City	246
	Baltimore County	144
	Calvert	6
	Caroline	2
	Carroll	24
	Cecil	26
	Charles	9
	Dorchester	5
	Frederick	37
	Garrett	6
	Harford	36
	Howard	29
	Kent	4
	Montgomery	52
	Prince George's	59
	Queen Anne's	8
	Somerset	4
	St. Mary's	10
	Talbot	7
	Washington	28
	Wicomico	17
	Worcester	6