Built with blockbuilder.org
Created
November 5, 2018 23:44
-
-
Save sierra073/a94a2fd69e47ee05e984216d3a2cee99 to your computer and use it in GitHub Desktop.
choropleth map
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
license: mit |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="utf-8"> | |
<title>D3: Setting path fills dynamically to generate a choropleth</title> | |
<script type="text/javascript" src="http://d3js.org/d3.v4.min.js"></script> | |
<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> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment