|
<!DOCTYPE html> |
|
<meta charset="utf-8"> |
|
<style> |
|
|
|
.counties { |
|
fill: none; |
|
} |
|
|
|
.states { |
|
fill: none; |
|
stroke: #fff; |
|
stroke-linejoin: 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="//d3js.org/d3.v3.min.js"></script> |
|
<script src="//d3js.org/queue.v1.min.js"></script> |
|
<script src="//d3js.org/topojson.v1.min.js"></script> |
|
<script> |
|
|
|
var width = 960, |
|
height = 600; |
|
|
|
var rateById = d3.map(); |
|
|
|
var quantize = d3.scale.quantize() |
|
.domain([0, .15]) |
|
.range(d3.range(9).map(function(i) { return "q" + i + "-9"; })); |
|
|
|
var projection = d3.geo.albersUsa() |
|
.scale(1280) |
|
.translate([width / 2, height / 2]); |
|
|
|
var path = d3.geo.path() |
|
.projection(projection); |
|
|
|
var svg = d3.select("body").append("svg") |
|
.attr("width", width) |
|
.attr("height", height); |
|
|
|
queue() |
|
.defer(d3.json, "https://gist.githubusercontent.com/mbostock/4090846/raw/d534aba169207548a8a3d670c9c2cc719ff05c47/us.json") |
|
.defer(d3.tsv, "unemployment.tsv", function(d) { rateById.set(d.id, +d.rate); }) |
|
.defer(d3.csv, "data.csv", function(d) { return {Group1: +d.Group1, Group2: +d.Group2, Group3: +d.Group3, Group4: +d.Group4, lat: +d.lat, lon: +d.lon}; }) |
|
.await(ready); |
|
|
|
function ready(error, us, _, data) { |
|
if (error) throw 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(rateById.get(d.id)); }) |
|
.attr("d", path); |
|
|
|
svg.append("path") |
|
.datum(topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; })) |
|
.attr("class", "states") |
|
.attr("d", path); |
|
|
|
var arc = d3.svg.arc().innerRadius(0).outerRadius(20), |
|
pie = d3.layout.pie() |
|
.value(function(d){ return d }); |
|
|
|
var pies = svg.selectAll('.pie') |
|
.data(data) |
|
.enter() |
|
.append('g') |
|
.attr('class', 'pie') |
|
.attr("transform", function(d) { |
|
return "translate(" + projection([d.lon, d.lat])[0] + "," + projection([d.lon, d.lat])[1] + ")"; |
|
}); |
|
|
|
var color = d3.scale.category10() |
|
|
|
pies.selectAll('.slice') |
|
.data(function(d){ |
|
return pie([d.Group1, d.Group2, d.Group3, d.Group4]); }) |
|
.enter() |
|
.append('path') |
|
.attr('d', arc) |
|
.style('fill', function(d,i){ |
|
return color(i); |
|
}); |
|
} |
|
|
|
d3.select(self.frameElement).style("height", height + "px"); |
|
|
|
</script> |