Click a state to zoom and display counties. An extension of this block by Mike Bostock.
The color darker the greater the location quotient for employment in some industry (I forget what industry). The purpose of the example is to test out zoom functionality not to show data. That being said, the data is from the Bureau of Labor Statistics’ QCEW survey.
<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="//d3js.org/d3.v3.js" charset="utf-8"></script>
<script src="//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>
area_fips,emp_lq
1001,0
1033,0
1051,0
1055,0
1069,0
1073,0.37
1081,0.15
1083,0
1089,0.46
1095,0
1097,0
1101,0
1103,0
1117,0
1125,0
1999,1.09
2020,0
2090,0
2999,0
4001,0
4003,0
4005,0
4013,0.41
4015,0
4019,1.37
4021,0
4025,0
4027,0
4999,1.14
5005,0
5007,0.16
5027,0
5031,0
5045,0
5059,0
5115,0
5119,0
5143,0
5999,0.14
6001,1.45
6005,0
6007,0
6013,0.72
6017,0.75
6019,0
6023,0
6029,0
6037,0.66
6041,3.22
6045,0
6047,0
6053,0.04
6055,0
6057,0.11
6059,1.56
6061,1.26
6065,0.06
6067,0.21
6071,0.14
6073,1.33
6075,1.59
6077,0
6079,1.64
6081,14.56
6083,3.87
6085,7.17
6087,0.61
6089,0
6095,0.05
6097,0.18
6099,0.02
6107,0
6111,0.39
6113,0
6115,0
6999,1.97
8001,0.43
8005,3.31
8007,0
8013,9.81
8014,5.38
8015,0
8031,2.01
8035,0.62
8037,0
8041,2.5
8045,0
8051,0
8059,0
8059,1.37
8067,0
8069,0.4
8077,0.15
8085,0
8091,0
8093,0
8097,0
8101,0
8107,0
8113,0
8117,0
8119,0
8123,0.09
8999,0.3
9001,1.74
9003,0.73
9005,0.43
9007,0.1
9009,0.24
9011,0.13
9013,1.61
9015,0
9999,0
10001,0
10003,0.12
10005,0
10999,1.15
11001,0.21
12001,1.18
12005,0
12009,0.21
12011,1.81
12015,0
12017,0
12019,0
12021,0.85
12031,0.45
12033,0.05
12035,0
12037,0
12053,0.05
12055,0
12057,1.01
12061,0
12069,0.18
12071,0.09
12073,0.39
12081,0.12
12083,0.08
12085,0
12086,0.28
12087,0.15
12089,0
12091,0
12095,0.98
12097,0
12099,0.42
12101,0.03
12103,0.46
12105,0.15
12109,0.17
12111,0
12113,0
12115,0.43
12117,1.91
12119,0
12123,0
12127,0.06
12131,0
12999,2.48
13015,0
13021,0.28
13029,0
13031,0
13045,0
13047,0
13051,0
13057,0.46
13059,0.26
13063,0
13067,1.03
13073,0
13077,0
13089,1.84
13095,0
13097,0
13113,0.26
13115,0
13117,1.12
13121,4.11
13127,0
13133,0
13135,2.29
13137,0
13139,0.04
13143,0
13151,0
13153,0
13157,0
13185,0
13215,0
13219,0
13223,0
13241,0
13245,0
13289,0
13311,0
13999,3.01
15001,0
15003,0.04
15007,0
15009,0.11
15999,0
16001,0.26
16003,0
16005,0
16007,0
16009,0
16017,0
16019,0
16025,0
16027,0
16037,0
16041,0
16043,0
16045,0
16049,0
16051,0
16055,0.14
16057,0
16063,0
16065,0
16071,0
16079,0
16081,0
16083,0
16087,0
16999,2.87
17001,0
17019,2.42
17023,0
17031,0.32
17037,0
17043,0.46
17077,0
17089,0.13
17091,0
17097,0.6
17099,0
17111,0.07
17113,0
17119,0
17121,0
17131,0
17133,0
17139,0
17141,0
17143,0
17163,0.04
17167,0
17177,0
17195,0
17197,0.03
17199,0
17201,0.07
17203,0
17999,2.5
18003,0
18005,0
18011,0
18019,0
18021,0
18035,0
18037,0
18039,0.13
18043,0
18055,0
18057,1.96
18059,0
18063,0
18067,0
18073,0
18081,0
18089,0
18095,0.21
18097,0.69
18099,0
18105,0
18123,0
18127,0
18141,0
18151,0
18157,0.04
18163,0
18999,0.82
19013,0
19015,0
19027,0
19031,0
19033,0
19041,0
19049,0
19055,0
19057,0
19061,0.31
19067,0
19073,0
19097,0
19101,0
19103,0.51
19113,0.59
19127,0
19137,0
19139,0
19149,0
19153,0.14
19155,0
19163,0.03
19169,0
19179,0
19183,0
19191,0
19193,0
20037,0
20045,0
20061,0
20085,0
20091,1.6
20103,0
20125,0
20155,0
20173,0.14
20177,0
20191,0
20209,0
20999,0.33
21015,0
21017,0
21023,0
21035,0
21037,0
21059,0
21067,0.16
21089,0
21111,0.03
21113,0
21117,0.21
21145,0
21209,0
21227,0.03
21239,0
21999,1.01
22001,0
22005,0
22015,0
22017,0
22019,0
22033,0.3
22051,0.03
22055,0.05
22061,0
22063,0
22071,0.16
22073,0.03
22079,0.13
22089,0
22103,0.33
22999,0.16
23001,0
23003,0.2
23005,0.07
23009,0.11
23011,0
23013,0
23015,0
23017,0.08
23019,0
23023,0
23031,0.11
23999,0
24003,0.15
24005,0.21
24009,0
24013,0
24017,0
24019,0
24021,0.41
24023,0
24025,0.04
24027,1.29
24031,1.7
24033,0.77
24037,0
24043,0
24045,0
24510,0.1
24999,2.01
25001,0.28
25003,0.11
25005,0
25007,0
25009,0.78
25011,0
25013,0.33
25015,0.49
25017,9.72
25021,3.89
25023,0.33
25025,1.77
25027,0.92
25999,2.1
26005,0
26021,0
26023,0
26045,0
26047,0
26049,0.05
26055,0.86
26063,0
26065,1.69
26067,0
26071,0
26073,0
26077,0.5
26081,0.22
26091,0
26093,0.18
26099,0.54
26103,0
26111,0
26115,0
26121,0
26125,1.35
26129,0
26139,0.03
26145,0
26147,0
26157,0
26159,0
26161,3.42
26163,0.14
26165,0
26999,1.82
27003,0.07
27013,0
27019,0
27037,0.47
27049,0
27053,1.87
27067,0
27083,0
27085,0
27097,0
27103,0
27109,0
27123,1.79
27131,0
27137,0
27139,0
27141,0
27145,0
27157,0
27163,0.11
27169,0
27171,0
27999,2.1
28033,0
28047,0
28075,0
28087,0
28089,0
28149,0
28999,0.14
29009,0
29019,0.16
29021,0
29031,0
29037,0
29043,0
29047,0
29051,0
29071,0
29077,0
29091,0
29095,0.24
29097,0
29099,0
29101,0
29145,0
29159,0
29165,0.19
29167,0
29177,0
29183,0
29189,0.67
29213,0
29223,0
29510,0.1
29999,0.76
30009,0
30013,0
30029,0.04
30031,0.09
30043,0
30049,0.04
30053,0
30063,0.22
30065,0
30067,0
30089,0
30095,0
30111,0.12
30999,0.26
31027,0
31055,0.26
31067,0
31109,1.55
31141,0
31999,0.27
32003,0.32
32005,0
32031,0.25
32510,0
32999,0
33001,0
33003,1.81
33005,0.05
33009,1.92
33011,3.8
33013,0.31
33015,2.92
33017,0
33999,1.67
34001,0
34003,0.67
34005,0.61
34007,0.05
34013,0.13
34015,0.01
34017,0.51
34019,0
34021,1.27
34023,0.51
34025,0
34027,0.78
34029,0
34031,0.25
34033,0
34035,1.33
34037,0
34039,0.51
34041,0
34999,1.76
35001,0.15
35013,0
35015,0
35043,0
35049,0.34
35055,0
35999,0.66
36001,0.57
36005,0
36007,0.27
36011,0
36013,0
36015,0
36019,0
36023,0
36027,0
36029,0.37
36045,0
36047,0.08
36055,0.25
36059,0
36061,0.55
36063,0
36065,0
36067,0.15
36071,0
36073,0
36079,0
36081,0.03
36083,1.51
36085,0
36087,0.15
36089,0
36091,0.69
36093,0.35
36103,0.18
36105,0
36107,0
36109,0.84
36111,0
36113,0
36119,0.3
36999,1.73
37001,0.02
37011,0
37013,0
37019,0
37021,0.13
37025,0.13
37027,0
37031,0
37035,0
37037,0
37049,0
37051,0
37055,0
37059,0
37063,2.67
37067,0.65
37069,0
37071,0
37081,0.07
37087,0
37089,0
37097,0
37101,0
37109,0
37111,0
37115,0
37119,1.31
37121,0
37125,0
37129,0.72
37133,0
37135,0.7
37141,0
37147,0
37151,0
37153,0
37159,0
37167,0
37169,0
37171,0
37179,0.08
37181,0
37183,6.51
37189,0
37191,0
37193,0
37199,0
37999,2.51
38003,0
38015,0
38017,4.52
38035,0
38055,0
38089,0
38101,0
38999,0
39001,0
39005,0
39013,0
39017,0.09
39023,0
39025,0
39027,0
39029,0
39035,0.47
39041,0.87
39045,0
39049,0.39
39055,0.22
39057,0.11
39061,0.61
39063,0.09
39067,0
39081,0
39083,0
39085,0
39089,0.08
39093,0.05
39095,0.14
39097,0
39099,0.11
39103,0.33
39113,2.58
39123,0
39133,0
39139,0
39151,0.04
39153,0.19
39155,0
39157,0
39159,0
39165,0
39173,0
39175,0
39999,2.03
40005,0
40017,0
40021,0
40023,0
40027,0
40031,0
40071,0
40109,0.2
40119,0.09
40135,0
40143,0.23
40147,0
40999,2.61
41003,2.1
41005,1.56
41009,0
41011,0
41015,0
41017,2
41019,0
41027,0
41029,1.16
41033,0
41035,0
41037,0
41039,6
41043,0
41047,0.46
41051,3.03
41053,0.24
41059,0
41065,0
41067,4.99
41071,0.12
41999,4.38
42003,0.69
42011,0
42013,0
42017,0.2
42019,0
42021,0
42027,2.61
42029,1.7
42035,0
42041,0
42043,0
42045,0.24
42047,0
42049,0
42069,0.09
42071,0.3
42077,0.15
42079,0
42085,0
42089,0.05
42091,0.75
42095,0.21
42101,0.06
42107,0
42125,0
42129,0
42133,0
42999,0.51
44001,0
44003,0.29
44005,1.06
44007,0.68
44009,1.76
44999,0
45003,0
45007,0
45009,0
45013,0.1
45019,0.31
45025,0
45029,0
45031,0
45035,0
45041,0
45043,0
45045,1.3
45051,0.06
45055,0
45057,0
45059,0
45063,0.04
45073,0
45077,0
45079,0
45083,0.04
45091,1.61
45999,3.47
46013,0
46029,0
46035,0
46047,0
46083,0
46093,0
46099,0.22
46103,0.04
46127,0
46999,0
47001,0
47007,0
47009,0
47025,0
47035,0
47037,0.33
47043,0
47045,0
47047,0
47053,0
47055,0
47065,0.07
47089,0
47093,0.14
47099,0
47107,0
47113,0
47115,0
47119,0
47125,0.11
47141,0
47145,0
47147,0
47149,0.27
47153,0
47155,0
47157,0.25
47159,0
47163,0.07
47165,0
47179,0
47187,3.92
47189,0.24
47999,1.82
48003,0
48015,0
48021,0
48027,0
48029,0.3
48039,0
48039,0
48041,0
48057,0
48075,0
48085,2.83
48091,0.13
48097,0
48099,0
48113,1.58
48121,0.2
48131,0
48139,0
48141,0.01
48157,0.6
48167,0.22
48171,0
48181,0
48183,0
48201,0.35
48209,0
48215,0.02
48223,0
48227,0
48251,0
48259,0
48265,0
48299,0
48303,0
48309,0
48325,0
48329,0
48331,0
48339,0.41
48347,0
48361,0
48367,0
48375,0
48397,0
48415,0
48423,0
48439,0.3
48453,3.41
48459,0
48471,0
48491,1.03
48493,0
48999,1.05
49005,0.91
49011,1.29
49021,0
49025,0
49027,0
49035,2.46
49043,0.21
49045,0
49047,0
49049,8.37
49051,0
49053,0.31
49057,0
50003,0
50007,2.42
50019,0
50021,0
50023,0
50025,0.35
50027,0
50999,0
51003,0.49
51013,1.38
51015,0
51029,0
51033,0
51036,0
51041,0.22
51047,0
51059,2.03
51061,0.31
51065,0
51067,0
51069,0
51075,0
51085,0
51087,0.11
51095,0
51099,0
51101,0
51107,0.31
51121,0
51125,0
51127,0
51133,0
51145,0
51153,0
51157,0
51161,0
51165,0
51171,0
51177,0.08
51179,0
51191,0
51510,0.19
51520,0
51540,1.01
51550,0
51570,0
51600,0
51610,0
51630,0
51660,0
51680,0
51683,0
51700,0
51710,0
51740,0
51760,0.07
51800,0
51810,0.19
51999,0.55
53003,0
53005,0.1
53007,0
53009,0
53011,0.8
53021,0
53029,0
53031,1.73
53033,19.28
53035,0.25
53037,0
53039,0
53041,0
53045,0
53053,0.1
53057,0
53061,0.39
53063,0.61
53065,0
53067,0.38
53069,0
53071,0
53073,2.74
53075,0
53077,0.06
53999,0
54003,0
54039,0
54053,0
54061,0
54077,0
54999,0.2
55009,0.35
55021,0
55025,11.49
55029,0
55035,0
55047,0
55049,0
55055,0.15
55063,0
55071,0
55073,0.11
55075,0
55079,0.64
55081,0
55087,0
55089,0
55093,0
55097,0
55101,0
55105,0
55109,0
55121,0
55123,0
55127,0.1
55131,0
55133,0.54
55139,0.07
55141,0
55999,1.47
56011,0
56021,0
56037,0
56039,0
56043,0
72061,0
72069,0
72119,0
72127,0
72999,0