|
<!DOCTYPE html> |
|
<meta charset="utf-8"> |
|
<style> |
|
|
|
.counties { |
|
fill: none; |
|
} |
|
|
|
.state-borders { |
|
fill: none; |
|
stroke: #fff; |
|
stroke-linejoin: round; |
|
stroke-linecap: round; |
|
} |
|
|
|
.q0-9 { fill:rgb(247,251,255); } |
|
.q1-9 { fill:rgb(222,235,247); } |
|
.q2-9 { fill:rgb(198,219,239); } |
|
.q3-9 { fill:rgb(158,202,225); } |
|
.q4-9 { fill:rgb(107,174,214); } |
|
.q5-9 { fill:rgb(66,146,198); } |
|
.q6-9 { fill:rgb(33,113,181); } |
|
.q7-9 { fill:rgb(8,81,156); } |
|
.q8-9 { fill:rgb(8,48,107); } |
|
|
|
</style> |
|
<body> |
|
<script src="http://d3js.org/d3.v3.min.js"></script> |
|
<script src="http://d3js.org/topojson.v1.min.js"></script> |
|
<script> |
|
|
|
var width = 960, |
|
height = 500; |
|
|
|
var quantize = d3.scale.quantize() |
|
.domain([0, .15]) |
|
.range(d3.range(9).map(function(i) { return "q" + i + "-9"; })); |
|
|
|
var path = d3.geo.path() |
|
.projection(null); |
|
|
|
var svg = d3.select("body").append("svg") |
|
.attr("width", width) |
|
.attr("height", height); |
|
|
|
d3.json("us.json", function(error, us) { |
|
if (error) return console.error(error); |
|
|
|
svg.append("g") |
|
.attr("class", "counties") |
|
.selectAll("path") |
|
.data(topojson.feature(us, us.objects.counties).features) |
|
.enter().append("path") |
|
.attr("class", function(d) { return quantize(d.properties.rate); }) |
|
.attr("d", path); |
|
|
|
svg.append("path") |
|
.datum(topojson.mesh(us, us.objects.counties, function(a, b) { return a.id / 1000 ^ b.id / 1000; })) |
|
.attr("class", "state-borders") |
|
.attr("d", path); |
|
}); |
|
|
|
</script> |