|
<!DOCTYPE html> |
|
<meta charset="utf-8"> |
|
<style> |
|
#box { |
|
width: 100%; |
|
text-align: center; |
|
} |
|
#key { |
|
width: 100%; |
|
text-align: center; |
|
} |
|
svg { |
|
font: 11px sans-serif; |
|
} |
|
|
|
.caption { |
|
font-weight: bold; |
|
} |
|
|
|
.key path { |
|
display: none; |
|
} |
|
|
|
.key line { |
|
stroke: #000; |
|
shape-rendering: crispEdges; |
|
} |
|
|
|
.counties { |
|
fill: none; |
|
stroke: white; |
|
stroke-width: 1px; |
|
} |
|
|
|
.states { |
|
fill: none; |
|
stroke: black; |
|
stroke-width: 1.5px; |
|
stroke-linejoin: round; |
|
} |
|
|
|
.q0-5 { fill:rgb(247,251,255); } |
|
.q1-5 { fill:rgb(198,219,239); } |
|
.q2-5 { fill:rgb(107,174,214); } |
|
.q3-5 { fill:rgb(33,113,181); } |
|
.q4-9 { fill:rgb(8,48,107); } |
|
|
|
</style> |
|
<body> |
|
<div id="box"></div> |
|
<div id="key"></div> |
|
<script src="http://d3js.org/d3.v3.min.js"></script> |
|
<script src="http://d3js.org/queue.v1.min.js"></script> |
|
<script src="http://d3js.org/topojson.v1.min.js"></script> |
|
<script> |
|
|
|
var max_val = 1400; |
|
var min_val = 500; |
|
|
|
var width = 400, |
|
height = 420; |
|
|
|
var rateById = d3.map(); |
|
|
|
var color = d3.scale.threshold() |
|
//.domain([0, 43, 86, 173, 217]) |
|
.domain([0, 300, 600, 900, 1200, 1500, 1900]) |
|
.range(["#FFF", "#EFF3FF","#C6DBEF","#9ECAE1","#6BAED6","#3182BD","#08519C"]); |
|
//.range(["#FFF","#C6DBEF","#9ECAE1","#6BAED6","#3182BD","#08519C"]); |
|
|
|
/*var quantize = d3.scale.quantize() |
|
.domain([min_val, max_val]) |
|
.range(d3.range(5).map(function(i) { |
|
return "q" + i + "-5"; |
|
})); |
|
*/ |
|
var projection = d3.geo.conicConformal() |
|
.rotate([85, 0]) |
|
.center([6, 32]) |
|
.parallels([29.5, 45.5]) |
|
.scale(4800) |
|
.precision(.1); |
|
|
|
var path = d3.geo.path() |
|
.projection(projection); |
|
|
|
var svg = d3.select("#box").append("svg") |
|
.attr("width", width) |
|
.attr("height", height); |
|
|
|
queue() |
|
.defer(d3.json, "us.json") |
|
.defer(d3.tsv, "ga_mortality.tsv", function(d) { rateById.set(d.id, +d.mort); }) |
|
.await(ready); |
|
|
|
function ready(error, us) { |
|
svg.append("g") |
|
.attr("class", "counties") |
|
.selectAll("path") |
|
.data(topojson.feature(us, us.objects.counties).features) |
|
.enter().append("path") |
|
.style("fill", function(d) { |
|
county_id = "" + d.id; |
|
if(county_id.substring(0,2) == "13") { |
|
return color(rateById.get(d.id)) |
|
} |
|
return "#FFF"; |
|
}) |
|
//.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); |
|
} |
|
|
|
|
|
// A position encoding for the key only. |
|
var x = d3.scale.linear() |
|
.domain([0, 2000]) |
|
.range([0, 300]); |
|
//.range([500, 2000]); |
|
|
|
|
|
var svg2 = d3.select("#key").append("svg") |
|
.attr("width", width) |
|
.attr("height", height); |
|
|
|
|
|
var xAxis = d3.svg.axis() |
|
.scale(x) |
|
.orient("bottom") |
|
.tickSize(13) |
|
.tickValues(color.domain()); |
|
|
|
var g = svg2.append("g") |
|
.attr("class", "key") |
|
.attr("transform", "translate(40,18)"); |
|
|
|
g.selectAll("rect") |
|
.data(color.range().map(function(d, i) { |
|
return { |
|
x0: i ? x(color.domain()[i - 1]) : x.range()[0], |
|
x1: i < color.domain().length ? x(color.domain()[i]) : x.range()[1], |
|
z: d |
|
}; |
|
})) |
|
.enter().append("rect") |
|
.attr("height", 8) |
|
.attr("x", function(d) { return d.x0; }) |
|
.attr("width", function(d) { return d.x1 - d.x0; }) |
|
.style("fill", function(d) { return d.z; }); |
|
|
|
g.call(xAxis).append("text") |
|
.attr("class", "caption") |
|
.attr("y", -6) |
|
.text("All Cause Mortality (deaths per 100,000, per year, 2010)"); |
|
|
|
</script> |