|
<!DOCTYPE html> |
|
<meta charset="utf-8"> |
|
<style> |
|
|
|
.counties { |
|
fill: gray; |
|
} |
|
|
|
.states { |
|
fill: none; |
|
stroke: #fff; |
|
stroke-linejoin: round; |
|
} |
|
|
|
.region { |
|
stroke: #fff; |
|
stroke-width: 2; |
|
stroke-linejoin: round; |
|
} |
|
|
|
</style> |
|
<svg width="960" height="600"></svg> |
|
<script src="https://d3js.org/d3.v4.min.js"></script> |
|
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script> |
|
<script src="https://d3js.org/topojson.v2.min.js"></script> |
|
<script> |
|
|
|
var svg = d3.select("svg"), |
|
width = +svg.attr("width"), |
|
height = +svg.attr("height"); |
|
|
|
var unemployment = d3.map(); |
|
|
|
var path = d3.geoPath(); |
|
|
|
var x = d3.scaleLinear() |
|
.domain([1, 10]) |
|
.rangeRound([600, 860]); |
|
|
|
var color = d3.scaleThreshold() |
|
.domain(d3.range(2, 10)) |
|
.range(d3.schemeBlues[9]); |
|
|
|
var g = svg.append("g") |
|
.attr("class", "key") |
|
.attr("transform", "translate(0,40)"); |
|
|
|
var eastern = d3.set(["09",10, 23, 24, |
|
25, 33, 34, 36, 37, 42, 50, 51, 54, 14,12,11,44 |
|
]); |
|
|
|
var midwestern = d3.set([ |
|
17,18, 19,20, 21,26, 29, 31,39,55, 27, 29, 38, 46 |
|
]) |
|
var southern = d3.set([ |
|
"01","05",22,28,40,47, 12, 48,13, 45 |
|
]) |
|
|
|
var western = d3.set([ |
|
"02","49","08","04","06", 30,32, 35, 41, 53, 56, 35, 32, 30,16,15 |
|
]) |
|
|
|
g.selectAll("rect") |
|
.data(color.range().map(function(d) { |
|
d = color.invertExtent(d); |
|
if (d[0] == null) d[0] = x.domain()[0]; |
|
if (d[1] == null) d[1] = x.domain()[1]; |
|
return d; |
|
})) |
|
.enter().append("rect") |
|
.attr("height", 8) |
|
.attr("x", function(d) { return x(d[0]); }) |
|
.attr("width", function(d) { return x(d[1]) - x(d[0]); }) |
|
.attr("fill", function(d) { return color(d[0]); }); |
|
|
|
g.append("text") |
|
.attr("class", "caption") |
|
.attr("x", x.range()[0]) |
|
.attr("y", -6) |
|
.attr("fill", "#000") |
|
.attr("text-anchor", "start") |
|
.attr("font-weight", "bold") |
|
.text("Unemployment rate"); |
|
|
|
g.call(d3.axisBottom(x) |
|
.tickSize(13) |
|
.tickFormat(function(x, i) { return i ? x : x + "%"; }) |
|
.tickValues(color.domain())) |
|
.select(".domain") |
|
.remove(); |
|
|
|
d3.queue() |
|
.defer(d3.json, "https://d3js.org/us-10m.v1.json") |
|
.defer(d3.tsv, "unemployment.tsv", function(d) { unemployment.set(d.id, +d.rate); }) |
|
.await(ready); |
|
|
|
function ready(error, us) { |
|
if (error) throw error; |
|
|
|
svg.append("g") |
|
.attr("class", "counties") |
|
.selectAll("path") |
|
.data(topojson.feature(us, us.objects.states).features) |
|
.enter().append("path") |
|
.attr("fill", function(d) { return color(d.rate = unemployment.get(d.id)); }) |
|
.attr("d", path) |
|
.attr('class', function(d) {return "state-code-" + d.id}) |
|
.append("title") |
|
.text(function(d) { return d.rate + "%"; }); |
|
|
|
svg.append("path") |
|
.datum(topojson.merge(us, us.objects.states.geometries.filter(function(d) { return eastern.has(d.id); }))) |
|
.attr("class", "county") |
|
.attr("d", path) |
|
.attr('fill', color(8)) |
|
|
|
svg.append("path") |
|
.datum(topojson.merge(us, us.objects.states.geometries.filter(function(d) { return midwestern.has(d.id); }))) |
|
.attr("class", "region") |
|
.attr("d", path) |
|
.attr('fill', color(7)) |
|
|
|
svg.append("path") |
|
.datum(topojson.merge(us, us.objects.states.geometries.filter(function(d) { return southern.has(d.id); }))) |
|
.attr("class", "region") |
|
.attr("d", path) |
|
.attr('fill', color(3)) |
|
|
|
svg.append("path") |
|
.datum(topojson.merge(us, us.objects.states.geometries.filter(function(d) { return western.has(d.id); }))) |
|
.attr("class", "region") |
|
.attr("d", path) |
|
.attr('fill', color(5)) |
|
|
|
// svg.append("path") |
|
// .datum(topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; })) |
|
// .attr("class", "states") |
|
// .attr("d", path); |
|
|
|
} |
|
</script> |