jtr13 · April 19, 2018 18:43
diff --git a/.block b/.block
 license: mit
diff --git a/README.md b/README.md
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
 		<title>D3: Setting path fills dynamically to generate a choropleth</title>
 		<style type="text/css">
 			/* No style rules here yet */		
 		</style>
 	</head>
 	<body>
 		<script type="text/javascript">

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

 			//Define map projection
 			var projection = d3.geoAlbersUsa()
 								   .translate([w/2, h/2])
 								   .scale([500]);

 			//Define path generator
 			var path = d3.geoPath()
 							 .projection(projection);
 							 
 			//Define quantize scale to sort data values into buckets of color
 			var color = d3.scaleQuantize()
 								.range(["rgb(237,248,233)","rgb(186,228,179)","rgb(116,196,118)","rgb(49,163,84)","rgb(0,109,44)"]);
 								//Colors derived from ColorBrewer, by Cynthia Brewer, and included in
 								//https://github.com/d3/d3-scale-chromatic

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

 			//Load in agriculture data
 			d3.csv("us-ag-productivity.csv", function(data) {

 				//Set input domain for color scale
 				color.domain([
 					d3.min(data, function(d) { return d.value; }), 
 					d3.max(data, function(d) { return d.value; })
 				]);

 				//Load in GeoJSON data
 				d3.json("us-states.json", function(json) {

 					//Merge the ag. data and GeoJSON
 					//Loop through once for each ag. data value
 					for (var i = 0; i < data.length; i++) {
 				
 						//Grab state name
 						var dataState = data[i].state;
 						
 						//Grab data value, and convert from string to float
 						var dataValue = parseFloat(data[i].value);
 				
 						//Find the corresponding state inside the GeoJSON
 						for (var j = 0; j < json.features.length; j++) {
 						
 							var jsonState = json.features[j].properties.name;
 				
 							if (dataState == jsonState) {
 						
 								//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) {
 					   		//Get data value
 					   		var value = d.properties.value;
 					   		
 					   		if (value) {
 					   			//If value exists…
 						   		return color(value);
 					   		} else {
 					   			//If value is undefined…
 						   		return "#ccc";
 					   		}
 					   });
 			
 				});
 			
 			});
 			
 		</script>
 	</body>
diff --git a/us-ag-productivity.csv b/us-ag-productivity.csv
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<title>D3: Setting path fills dynamically to generate a choropleth</title>
	<style type="text/css">
	/* No style rules here yet */
	</style>
	</head>
	<body>
	<script type="text/javascript">

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

	//Define map projection
	var projection = d3.geoAlbersUsa()
	.translate([w/2, h/2])
	.scale([500]);

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

	//Define quantize scale to sort data values into buckets of color
	var color = d3.scaleQuantize()
	.range(["rgb(237,248,233)","rgb(186,228,179)","rgb(116,196,118)","rgb(49,163,84)","rgb(0,109,44)"]);
	//Colors derived from ColorBrewer, by Cynthia Brewer, and included in
	//https://github.com/d3/d3-scale-chromatic

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

	//Load in agriculture data
	d3.csv("us-ag-productivity.csv", function(data) {

	//Set input domain for color scale
	color.domain([
	d3.min(data, function(d) { return d.value; }),
	d3.max(data, function(d) { return d.value; })
	]);

	//Load in GeoJSON data
	d3.json("us-states.json", function(json) {

	//Merge the ag. data and GeoJSON
	//Loop through once for each ag. data value
	for (var i = 0; i < data.length; i++) {

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

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

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

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

	if (dataState == jsonState) {

	//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) {
	//Get data value
	var value = d.properties.value;

	if (value) {
	//If value exists…
	return color(value);
	} else {
	//If value is undefined…
	return "#ccc";
	}
	});

	});

	});

	</script>
	</body>
	state	value
	Alabama	1.1791
	Arkansas	1.3705
	Arizona	1.3847
	California	1.7979
	Colorado	1.0325
	Connecticut	1.3209
	Delaware	1.4345
	Florida	1.6304
	Georgia	1.3891
	Iowa	1.5297
	Idaho	1.4285
	Illinois	1.5297
	Indiana	1.4220
	Kansas	1.0124
	Kentucky	0.9403
	Louisiana	0.9904
	Maine	1.3877
	Maryland	1.2457
	Massachusetts	1.1458
	Michigan	1.1058
	Minnesota	1.2359
	Missouri	1.0212
	Mississippi	1.1306
	Montana	0.8145
	North Carolina	1.3554
	North Dakota	1.0278
	Nebraska	1.1619
	New Hampshire	1.0204
	New Jersey	1.2831
	New Mexico	0.8925
	Nevada	0.9640
	New York	1.1327
	Ohio	1.2075
	Oklahoma	0.7693
	Oregon	1.3154
	Pennsylvania	1.0601
	Rhode Island	1.4192
	South Carolina	1.1247
	South Dakota	1.0760
	Tennessee	0.7648
	Texas	0.8873
	Utah	0.9638
	Virginia	0.9660
	Vermont	1.0762
	Washington	1.1457
	Wisconsin	1.1130
	West Virginia	0.5777
	Wyoming	0.5712