|
<!DOCTYPE html> |
|
<head> |
|
<style> |
|
body { |
|
width: 1024px; |
|
margin-top: 0; |
|
margin: auto; |
|
font-family: "Lato", "PT Serif", serif; |
|
color: #222222; |
|
padding: 0; |
|
font-weight: 300; |
|
line-height: 28px; |
|
-webkit-font-smoothing: antialiased; |
|
} |
|
|
|
.caption { |
|
font-weight: bold; |
|
font-size: 14.5px; |
|
} |
|
|
|
.key path { |
|
display: none; |
|
} |
|
|
|
.key line { |
|
stroke: #000; |
|
shape-rendering: crispEdges; |
|
} |
|
|
|
.counties { |
|
fill: none; |
|
stroke: #BFBEBC; |
|
stroke-width: 0.5px; |
|
} |
|
|
|
.states { |
|
fill: none; |
|
stroke: #fff; |
|
stroke-linejoin: round; |
|
} |
|
|
|
.tooltip { |
|
width: 250px; |
|
height: 16px; |
|
border: 1px solid #fff; |
|
color: black; |
|
background-color: #ffffff; |
|
-webkit-border-radius: 2px; |
|
-moz-border-radius: 2px; |
|
border-radius: 2px; |
|
-webkit-transition: all 0.218s; |
|
-moz-transition: all 0.218s; |
|
-o-transition: all 0.218s; |
|
transition: all 0.218s; |
|
-moz-box-shadow: 1px 1px 2px #000; |
|
-webkit-box-shadow: 1px 1px 2px #000; |
|
box-shadow: 1px 1px 2px #000; |
|
text-align: center; |
|
font: 12px arial; |
|
margin-top: 3px; |
|
} |
|
|
|
.q0-9 { fill:rgb(247,251,255); stroke: #e8f5f2 } |
|
.q1-9 { fill:rgb(222,235,247); stroke: none } |
|
.q2-9 { fill:rgb(198,219,239); stroke: none} |
|
.q3-9 { fill:rgb(158,202,225); stroke: none} |
|
.q4-9 { fill:rgb(107,174,214);stroke: none } |
|
.q5-9 { fill:rgb(66,146,198); stroke: none} |
|
.q6-9 { fill:rgb(33,113,181);stroke: none } |
|
.q7-9 { fill:rgb(8,81,156); stroke: none} |
|
.q8-9 { fill:rgb(8,48,107); stroke: none} |
|
.q9-9 { fill:#09111D; stroke: none} |
|
|
|
.q0-9:hover{fill: red;} |
|
.q1-9:hover { fill: red; } |
|
.q2-9:hover { fill: red; } |
|
.q3-9:hover { fill: red; } |
|
.q4-9:hover { fill: red; } |
|
.q5-9:hover { fill: red; } |
|
.q6-9:hover { fill: red; } |
|
.q7-9:hover { fill: red; } |
|
.q8-9:hover { fill: red; } |
|
.q9-9:hover { fill: red; } |
|
|
|
</style> |
|
<body> |
|
<div id="map_iF"> </div> |
|
|
|
</body> |
|
|
|
<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 width = 960, |
|
height = 500; |
|
|
|
var rateById = d3.map(); |
|
|
|
var rangethreston = [0.185332774,0.252415757,0.330529292,0.409492027,0.509042409,0.629308131,0.788872931,1.040426585,1.53217807,33.1439366] |
|
|
|
var quantize = d3.scale.threshold() |
|
.domain(rangethreston) |
|
.range(d3.range(10).map(function(i) { return "q" + i + "-9"; })); |
|
|
|
var projection = d3.geo.albers() |
|
.rotate([96, 0]) |
|
.center([-.6, 38.7]) |
|
.parallels([29.5, 45.5]) |
|
.scale(1070) |
|
.translate([width / 2, height / 2]) |
|
.precision(.1); |
|
|
|
var path = d3.geo.path() |
|
.projection(projection); |
|
|
|
var svg = d3.select("#map_iF").append("svg") |
|
.attr("width", width) |
|
.attr("height", height); |
|
|
|
var tooltip = d3.select("body") |
|
.append("div") |
|
.attr("class","tooltip") |
|
.style("position", "absolute") |
|
.style("z-index", "10") |
|
.style("visibility", "hidden"); |
|
|
|
var formatNumber = d3.format(",d"); |
|
|
|
queue() |
|
.defer(d3.json, "counties.json") |
|
.defer(d3.csv, "intakefrac_pm25.csv", function(d) {rateById.set(d.FIPS,[+d.if_PM25, +d.ifi_PM25]); }) |
|
.await(ready); |
|
|
|
function ready(error, counties) { |
|
|
|
svg.append("g") |
|
.attr("class", "counties") |
|
.selectAll("path") |
|
.data(topojson.feature(counties, counties.objects.counties).features) |
|
.enter().append("path") |
|
.attr("class", function(d) { var intake = rateById.get(d.id); if(intake){return quantize(intake[0]);} }) |
|
.attr("d", path) |
|
.on("mouseover", function(d){ var intake = rateById.get(d.id); if(intake){ tooltip.style("visibility", "visible").text(Math.round(intake[0]*100)/100+" mg inhaled per kg of PM2.5 released");}}) |
|
.on("mousemove", function(){return tooltip.style("top", (event.pageY-50)+"px").style("left",(event.pageX-60)+"px");}) |
|
.on("mouseout", function(){return tooltip.style("visibility", "hidden");}); |
|
|
|
svg.append("path") |
|
.datum(topojson.mesh(counties, counties.objects.states, function(a, b) { return a !== b; })) |
|
.attr("class", "states") |
|
.attr("d", path); |
|
} |
|
|
|
</script> |
|
</html> |
