tjaensch/Number_of_Drug_and_Alcohol-Related_Intoxication_Deaths_by_County_of_Incident__2013.csv

## 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>

## maryland-counties.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              maryland-counties.json
            
          
      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
      
    
## Number_of_Drug_and_Alcohol-Related_Intoxication_Deaths_by_County_of_Incident__2013.csv

          
            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

## thumbnail.png

      
    Raw
  

              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