Skip to content

Instantly share code, notes, and snippets.

@ElaineYu

ElaineYu/.block

Last active June 14, 2017 20:50
Show Gist options
  • Save ElaineYu/71d077403d857bbafbccc4fe113019f9 to your computer and use it in GitHub Desktop.
Save ElaineYu/71d077403d857bbafbccc4fe113019f9 to your computer and use it in GitHub Desktop.
Download ZIP
Metis United States Unemployment Rate
Raw
.block
license: mit
Raw
index.html
<!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>
Display the source blob
Display the rendered blob
Raw
us-states.json
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Raw
us-unemployment.csv
StateName StateCode Region Subregion Rate Rank
Alabama AL South East South Central 5.4 47
Alaska AK West Pacific 6.6 50
Arizona AZ West Mountain 5 41
Arkansas AR South West South Central 3.5 13
California CA West Pacific 4.8 37
Colorado CO West Mountain 2.3 1
Connecticut CT Northeast New England 4.9 39
Delaware DE South South Atlantic 4.6 30
Florida FL South South Atlantic 4.5 29
Georgia GA South South Atlantic 5 41
Hawaii HI West Pacific 2.7 2
Idaho ID West Mountain 3.4 12
Illinois IL Midwest East North Central 4.7 32
Indiana IN Midwest East North Central 3.6 14
Iowa IA Midwest West North Central 3.1 8
Kansas KS Midwest West North Central 3.7 15
Kentucky KY South East South Central 5.1 46
Louisiana LA South West South Central 5.8 48
Maine ME Northeast New England 3 6
Maryland MD South South Atlantic 4.3 23
Massachusetts MA Northeast New England 3.9 20
Michigan MI Midwest East North Central 4.7 32
Minnesota MN Midwest West North Central 3.8 17
Mississippi MS South East South Central 5 41
Missouri MO Midwest West North Central 3.9 20
Montana MT West Mountain 3.8 17
Nebraska NE Midwest West North Central 3 6
Nevada NV West Mountain 4.7 32
New Hampshire NH Northeast New England 2.8 4
New Jersey NJ Northeast Middle Atlantic 4.1 22
New Mexico NM West Mountain 6.7 51
New York NY Northeast Middle Atlantic 4.3 23
North Carolina NC South South Atlantic 4.7 32
North Dakota ND Midwest West North Central 2.7 2
Ohio OH Midwest East North Central 5 41
Oklahoma OK South West South Central 4.3 23
Oregon OR West Pacific 3.7 15
Pennsylvania PA Northeast Middle Atlantic 4.9 39
Rhode Island RI Northeast New England 4.3 23
South Carolina SC South South Atlantic 4.3 23
South Dakota SD Midwest West North Central 2.8 4
Tennessee TN South East South Central 4.7 32
Texas TX South West South Central 5 41
Utah UT West Mountain 3.1 8
Vermont VT Northeast New England 3.1 8
Virginia VA South South Atlantic 3.8 17
Washington WA West Pacific 4.6 30
West Virginia WV South South Atlantic 4.8 37
Wisconsin WI Midwest East North Central 3.2 11
Wyoming WY West Mountain 4.3 23
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment