Built with blockbuilder.org
xxxxxxxxxx<head> <meta charset="utf-8"> <script src="https://d3js.org/d3.v4.min.js"></script> <style> body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } div.tooltip { position: absolute; text-align: center; width: 40px; height: 20px; padding: 2px; font: 12px sans-serif; background: lemonchiffon; border: 0px; border-radius: 8px; pointer-events: none; } </style></head><body> <script> // Source: https://bl.ocks.org/wboykinm/dbbe50d1023f90d4e241712395c27fb3 // Feel free to change or delete any of the code you see in this editor! // Width and height of map var width = 960; var height = 1000; var lowColor = '#f9f9f9'; var highColor = 'purple'; // 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("us-unemployment.csv", function(data) { var dataArray = []; for (var d = 0; d < data.length; d++) { dataArray.push(parseFloat(data[d].Rate)) } 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].StateName; // Grab data value var dataValue = data[i].Rate; // 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.Rate = dataValue; // Stop looking through the JSON break; } } } var div = d3.select("body").append("div") .attr("class", "tooltip") .style("opacity", 0); // 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.Rate) }) .on("mouseover", function(d) { div.transition() .duration(200) .style("opacity", .9); div.html(d.properties.Rate) .style("left", (d3.event.pageX) + "px") .style("top", (d3.event.pageY - 28) + "px"); }) .on("mouseout", function(d) { div.transition() .duration(500) .style("opacity", 0); }); svg.append("text") .attr("x", 0) .attr("y", 100) .style("font-size", "50px") .style("text-decoration", "underline") .text("United States Unemployment Rate (%), 2017"); var averageUnemploymentByRegion = d3.nest().key(function(d) {return d.Region}).rollup(function(v) { return d3.mean(v, function(d) { return parseInt(d.Rate);}); }).entries(data); svg.append("text") .attr("x", 0) .attr("y", 800) .style("font-size", "50px") .text(averageUnemploymentByRegion[0].key + " " + Number((averageUnemploymentByRegion[0].value).toFixed(2)) ) svg.append("text") .attr("x", 0) .attr("y", 850) .style("font-size", "50px") .text(averageUnemploymentByRegion[1].key + " " + Number((averageUnemploymentByRegion[1].value).toFixed(2)) ) svg.append("text") .attr("x", 0) .attr("y", 900) .style("font-size", "50px") .text(averageUnemploymentByRegion[2].key + " " + Number((averageUnemploymentByRegion[2].value).toFixed(2)) ) svg.append("text") .attr("x", 0) .attr("y", 950) .style("font-size", "50px") .text(averageUnemploymentByRegion[3].key + " " + Number((averageUnemploymentByRegion[3].value).toFixed(2)) ) // 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> https://d3js.org/d3.v4.min.js