| 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.
| <!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 = '#f9f9f9' | |
| var highColor = '#bc2a66' | |
| // 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("statesdata.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> |
| state | value | |
|---|---|---|
| Alabama | 7.9 | |
| Alaska | 1.4 | |
| Arkansas | 14.7 | |
| Arizona | 13.4 | |
| California | 14.1 | |
| Colorado | 12.9 | |
| Connecticut | 9.5 | |
| Delaware | 13.7 | |
| District of Columbia | 6.6 | |
| Florida | 4.4 | |
| Georgia | 11.6 | |
| Hawaii | 17.4 | |
| Iowa | 5.9 | |
| Idaho | 16.4 | |
| Illinois | 18.6 | |
| Indiana | 3.9 | |
| Kansas | 14.2 | |
| Kentucky | 10.5 | |
| Louisiana | 17.2 | |
| Maine | 15.7 | |
| Maryland | 4.9 | |
| Massachusetts | 13.7 | |
| Michigan | 19.7 | |
| Minnesota | 12.8 | |
| Missouri | 2.2 | |
| Mississippi | 6.8 | |
| Montana | 13.8 | |
| North Carolina | 14.7 | |
| North Dakota | 11.1 | |
| Nebraska | 13.7 | |
| New Hampshire | 9.7 | |
| New Jersey | 2.2 | |
| New Mexico | 3.1 | |
| Nevada | 18.2 | |
| New York | 12.8 | |
| Ohio | 5 | |
| Oklahoma | 12.4 | |
| Oregon | 13.3 | |
| Pennsylvania | 0.2 | |
| Rhode Island | 13 | |
| South Carolina | 1.8 | |
| South Dakota | 5.1 | |
| Tennessee | 6.6 | |
| Texas | 8.1 | |
| Utah | 11.3 | |
| Virginia | 4.8 | |
| Vermont | 18.4 | |
| Washington | 13.4 | |
| Wisconsin | 8.9 | |
| West Virginia | 18.1 | |
| Wyoming | 0 |
