|
<!DOCTYPE html> |
|
<meta charset="utf-8"> |
|
<style> |
|
|
|
.counties { |
|
fill: none; |
|
} |
|
|
|
.states { |
|
fill: none; |
|
stroke: #fff; |
|
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)"); |
|
|
|
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.counties).features) |
|
.enter().append("path") |
|
.attr("fill", function(d) { return color(d.rate = unemployment.get(d.id)); }) |
|
.attr("d", path) |
|
.append("title") |
|
.text(function(d) { return d.rate + "%"; }); |
|
|
|
svg.append("path") |
|
.datum(topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; })) |
|
.attr("class", "states") |
|
.attr("d", path); |
|
} |
|
|
|
</script> |
You probably don't have the us.json file (see index.html line 53). This format works on bl.ocks.org but it won't work for you on your local machine unless you have the same file hierarchy.