| license: MIT |
A modular version of this excellent choropleth - will map any CSV statesdata.csv on a linear continuous value, using d3js v4.
Requirements for statesdata.csv:
state column with standard full-length state namesvalue column with any numeric valuesAlso, you can edit the color ramp using the lowColor and highColor variables.
forked from wboykinm's block: Modular US State Choropleth
| state | value | |
|---|---|---|
| Alabama | 0.85106383 | |
| Alaska | 0.964285714 | |
| Arizona | 0.8125 | |
| Arkansas | 0.931818182 | |
| California | 0.658823529 | |
| Colorado | 0.923076923 | |
| Connecticut | 0.744186047 | |
| Delaware | 0.880597015 | |
| District of Columbia | 0.79 | |
| Florida | 0.657534247 | |
| Georgia | 0.8 | |
| Hawaii | 0.793650794 | |
| Idaho | 0.886792453 | |
| Illinois | 0.942028986 | |
| Indiana | 1.018867925 | |
| Iowa | 1.094339623 | |
| Kansas | 0.847457627 | |
| Kentucky | 0.980769231 | |
| Louisiana | 0.728813559 | |
| Maine | 1.133333333 | |
| Maryland | 0.679487179 | |
| Massachusetts | 0.831168831 | |
| Michigan | 1.081967213 | |
| Minnesota | 0.96969697 | |
| Mississippi | 0.795454545 | |
| Missouri | 0.888888889 | |
| Montana | 0.950819672 | |
| Nebraska | 1.068965517 | |
| Nevada | 0.78125 | |
| New Hampshire | 1.063492063 | |
| New Jersey | 0.654320988 | |
| New Mexico | 0.867924528 | |
| New York | 0.618556701 | |
| North Carolina | 0.90625 | |
| North Dakota | 1.285714286 | |
| Ohio | 1.015625 | |
| Oklahoma | 0.882352941 | |
| Oregon | 0.777777778 | |
| Pennsylvania | 0.966666667 | |
| Rhode Island | 0.682926829 | |
| South Carolina | 0.793650794 | |
| South Dakota | 1.08 | |
| Tennessee | 0.836065574 | |
| Texas | 0.881355932 | |
| Utah | 1.025 | |
| Vermont | 1.222222222 | |
| Virginia | 0.72972973 | |
| Washington | 0.7625 | |
| West Virginia | 1.020833333 | |
| Wisconsin | 1.169230769 | |
| Wyoming | 1.019230769 |
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <style type="text/css"> | |
| /* Legend Font Style */ | |
| body { | |
| font: 11px sans-serif; | |
| background-color: #ffffff; | |
| } | |
| /* Legend Position Style */ | |
| .legend { | |
| position:absolute; | |
| left:20px; | |
| top:30px; | |
| } | |
| .axis text { | |
| font: 10px sans-serif; | |
| } | |
| .axis line, .axis path { | |
| fill: none; | |
| stroke: #000; | |
| shape-rendering: crispEdges; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <script type="text/javascript"> | |
| //Width and height of map | |
| var width = 960; | |
| var height = 500; | |
| var lowColor = '#d01972' | |
| var highColor = '#faebd5' | |
| // D3 Projection | |
| var projection = d3.geoAlbersUsa() | |
| .translate([width / 2, height / 2]) // translate to center of screen | |
| .scale([1000]); // scale things down so see entire US | |
| // Define path generator | |
| var path = d3.geoPath() // path generator that will convert GeoJSON to SVG paths | |
| .projection(projection); // tell path generator to use albersUsa projection | |
| //Create SVG element and append map to the SVG | |
| var svg = d3.select("body") | |
| .append("svg") | |
| .attr("width", width) | |
| .attr("height", height); | |
| // Load in my states data! | |
| d3.csv("beerwine.csv", function(data) { | |
| var dataArray = []; | |
| for (var d = 0; d < data.length; d++) { | |
| dataArray.push(parseFloat(data[d].value)) | |
| } | |
| var minVal = d3.min(dataArray) | |
| var maxVal = d3.max(dataArray) | |
| var ramp = d3.scaleLinear().domain([minVal,maxVal]).range([lowColor,highColor]) | |
| // Load GeoJSON data and merge with states data | |
| d3.json("us-states.json", function(json) { | |
| // Loop through each state data value in the .csv file | |
| for (var i = 0; i < data.length; i++) { | |
| // Grab State Name | |
| var dataState = data[i].state; | |
| // Grab data value | |
| var dataValue = 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 the data to the SVG and create one path per GeoJSON feature | |
| svg.selectAll("path") | |
| .data(json.features) | |
| .enter() | |
| .append("path") | |
| .attr("d", path) | |
| .style("stroke", "#fff") | |
| .style("stroke-width", "1") | |
| .style("fill", function(d) { return ramp(d.properties.value) }); | |
| // add a legend | |
| var w = 140, h = 300; | |
| var key = d3.select("body") | |
| .append("svg") | |
| .attr("width", w) | |
| .attr("height", h) | |
| .attr("class", "legend"); | |
| var legend = key.append("defs") | |
| .append("svg:linearGradient") | |
| .attr("id", "gradient") | |
| .attr("x1", "100%") | |
| .attr("y1", "0%") | |
| .attr("x2", "100%") | |
| .attr("y2", "100%") | |
| .attr("spreadMethod", "pad"); | |
| legend.append("stop") | |
| .attr("offset", "0%") | |
| .attr("stop-color", highColor) | |
| .attr("stop-opacity", 1); | |
| legend.append("stop") | |
| .attr("offset", "100%") | |
| .attr("stop-color", lowColor) | |
| .attr("stop-opacity", 1); | |
| key.append("rect") | |
| .attr("width", w - 100) | |
| .attr("height", h) | |
| .style("fill", "url(#gradient)") | |
| .attr("transform", "translate(0,10)"); | |
| var y = d3.scaleLinear() | |
| .range([h, 0]) | |
| .domain([minVal, maxVal]); | |
| var yAxis = d3.axisRight(y); | |
| key.append("g") | |
| .attr("class", "y axis") | |
| .attr("transform", "translate(41,10)") | |
| .call(yAxis) | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |