jtr13/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org

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

## us-ag-productivity.csv

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