Metis United States Unemployment Rate

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