|
<html> |
|
<head> |
|
<title>Zoomable US States</title> |
|
<style> |
|
.background { |
|
fill: none; |
|
pointer-events: all; |
|
} |
|
|
|
.state-land { |
|
fill: #b6a3d5; |
|
stroke-width: 1.5px; |
|
stroke: white; |
|
} |
|
|
|
.county-land { |
|
stroke: white; |
|
stroke-width: .3px; |
|
} |
|
</style> |
|
</head> |
|
<body> |
|
|
|
<script src="http://d3js.org/d3.v3.js" charset="utf-8"></script> |
|
<script src="http://d3js.org/topojson.v1.js"></script> |
|
<script> |
|
var width = 960, |
|
height = 500, |
|
active = d3.select(null); |
|
|
|
var color = d3.scale.sqrt() |
|
.range(['#a290be',' #6f9570']) |
|
.interpolate(d3.interpolateLab); |
|
|
|
var projection = d3.geo.albersUsa() |
|
.scale(1080) |
|
.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); |
|
|
|
svg.append('rect') |
|
.attr('class', 'background') |
|
.attr('width', width) |
|
.attr('height', height) |
|
.on('click', reset); |
|
|
|
var map = svg.append('g') |
|
.style('stroke-width', '1.5px'); |
|
|
|
d3.csv('countyData.csv', function(error, countyData) { |
|
if (error) throw error; |
|
d3.json('us.json', function(error, topology) { |
|
if (error) throw error; |
|
|
|
countyData = countyData.map(function(d) { |
|
return { |
|
id: +d.area_fips, |
|
lq: +d.emp_lq |
|
}; |
|
}); |
|
|
|
color.domain(d3.extent(countyData, function(d) { return d.lq; })); |
|
|
|
map.selectAll('.state-land') |
|
.data(topojson.feature(topology, topology.objects.states).features) |
|
.enter().append('path') |
|
.attr('d', path) |
|
.attr('class', 'state-land') |
|
.on('click', function(state) { |
|
clickState.call(this, state, topology, countyData); |
|
}); |
|
}); |
|
}); |
|
|
|
function clickState(state, topology, countyData) { |
|
if (active.node() == this) return reset(); |
|
active.classed('active', false); |
|
active = d3.select(this).classed('active', true); |
|
|
|
var bounds = path.bounds(state), |
|
dx = bounds[1][0] - bounds[0][0], |
|
dy = bounds[1][1] - bounds[0][1], |
|
x = (bounds[0][0] + bounds[1][0])/2, |
|
y = (bounds[0][1] + bounds[1][1])/2, |
|
scale = .9 / Math.max(dx / width, dy / height), |
|
translate = [width / 2 - scale * x, height / 2 - scale * y]; |
|
|
|
map.transition().duration(750) |
|
.style('stroke-width', 1.5 / scale + 'px') |
|
.attr('transform', 'translate(' + translate +')scale(' + scale + ')'); |
|
|
|
var counties = map.selectAll('.county-land') |
|
.call(drawCounties, topology, state.id, countyData); |
|
} |
|
|
|
function drawCounties(selection, topology, stateFips, countyData) { |
|
|
|
// Copy the GeometryCollection object (don't want to pass reference) |
|
var countiesGeo = Object.create(topology.objects.counties); |
|
|
|
// Filter down to the counties within active state |
|
countiesGeo.geometries = topology.objects.counties.geometries |
|
.filter(function(county) { |
|
return fipsMatch(county.id, stateFips); |
|
}); |
|
|
|
var counties = selection |
|
.data(topojson.feature(topology, countiesGeo).features) |
|
|
|
counties.enter().append('path') |
|
.attr('class', 'county-land') |
|
.on('click', reset); |
|
|
|
counties |
|
.attr('opacity', 0) |
|
.attr('d', path) |
|
.style('fill', function(d) { |
|
var lq = countyData |
|
.filter(function(county) { return county.id === d.id; }) |
|
.map(function(county) { return county.lq; }); |
|
return color(lq); |
|
}) |
|
.transition().duration(750) |
|
.attr('opacity', 1); |
|
|
|
counties.exit() |
|
.transition().duration(750) |
|
.attr('opacity', 0) |
|
.remove(); |
|
} |
|
|
|
function reset() { |
|
active.classed('active', false); |
|
active = d3.select(null); |
|
|
|
map |
|
.transition().duration(750) |
|
.style("stroke-width", "1.5px") |
|
.attr("transform", ""); |
|
|
|
map.selectAll('.county-land') |
|
.transition().duration(750) |
|
.attr('opacity', 0) |
|
.remove(); |
|
} |
|
|
|
function fipsMatch(countyFips, stateFips) { |
|
countyFips = String(countyFips); |
|
stateFips = String(stateFips); |
|
return countyFips.length === 5 ? |
|
countyFips.slice(0,2) === stateFips : |
|
countyFips.slice(0,1) === stateFips; |
|
} |
|
|
|
</script> |
|
</body> |
|
</html> |