This is forked from bycoffe!!! Please see there for more instruction.
I am going to modify this to show cool (but made up) data.
id | town | fips | |
---|---|---|---|
1 | ABINGTON | 25023 | |
2 | ACTON | 25017 | |
3 | ACUSHNET | 25005 | |
4 | ADAMS | 25003 | |
13 | ASHFIELD | 25011 | |
5 | AGAWAM | 25013 | |
6 | ALFORD | 25003 | |
7 | AMESBURY | 25009 | |
8 | AMHERST | 25015 | |
14 | ASHLAND | 25017 | |
9 | ANDOVER | 25009 | |
10 | ARLINGTON | 25017 | |
11 | ASHBURNHAM | 25027 | |
12 | ASHBY | 25017 | |
45 | BROOKFIELD | 25027 | |
15 | ATHOL | 25027 | |
16 | ATTLEBORO | 25005 | |
17 | AUBURN | 25027 | |
18 | AVON | 25021 | |
19 | AYER | 25017 | |
20 | BARNSTABLE | 25001 | |
21 | BARRE | 25027 | |
22 | BECKET | 25003 | |
23 | BEDFORD | 25017 | |
24 | BELCHERTOWN | 25015 | |
70 | DALTON | 25003 | |
25 | BELLINGHAM | 25021 | |
26 | BELMONT | 25017 | |
30 | BEVERLY | 25009 | |
34 | BOLTON | 25027 | |
27 | BERKLEY | 25005 | |
28 | BERLIN | 25027 | |
29 | BERNARDSTON | 25011 | |
35 | BOSTON | 25025 | |
36 | BOURNE | 25001 | |
200 | NEW ASHFORD | 25003 | |
31 | BILLERICA | 25017 | |
32 | BLACKSTONE | 25027 | |
33 | BLANDFORD | 25013 | |
37 | BOXBOROUGH | 25017 | |
38 | BOXFORD | 25009 | |
39 | BOYLSTON | 25027 | |
40 | BRAINTREE | 25021 | |
43 | BRIMFIELD | 25013 | |
41 | BREWSTER | 25001 | |
42 | BRIDGEWATER | 25023 | |
44 | BROCKTON | 25023 | |
46 | BROOKLINE | 25021 | |
47 | BUCKLAND | 25011 | |
48 | BURLINGTON | 25017 | |
49 | CAMBRIDGE | 25017 | |
50 | CANTON | 25021 | |
51 | CARLISLE | 25017 | |
52 | CARVER | 25023 | |
53 | CHARLEMONT | 25011 | |
54 | CHARLTON | 25027 | |
55 | CHATHAM | 25001 | |
56 | CHELMSFORD | 25017 | |
57 | CHELSEA | 25025 | |
58 | CHESHIRE | 25003 | |
59 | CHESTER | 25013 | |
60 | CHESTERFIELD | 25015 | |
61 | CHICOPEE | 25013 | |
112 | GRANVILLE | 25013 | |
62 | CHILMARK | 25007 | |
63 | CLARKSBURG | 25003 | |
64 | CLINTON | 25027 | |
65 | COHASSET | 25021 | |
66 | COLRAIN | 25011 | |
67 | CONCORD | 25017 | |
68 | CONWAY | 25011 | |
69 | CUMMINGTON | 25015 | |
71 | DANVERS | 25009 | |
72 | DARTMOUTH | 25005 | |
73 | DEDHAM | 25021 | |
74 | DEERFIELD | 25011 | |
120 | HAMPDEN | 25013 | |
75 | DENNIS | 25001 | |
76 | DIGHTON | 25005 | |
77 | DOUGLAS | 25027 | |
78 | DOVER | 25021 | |
79 | DRACUT | 25017 | |
80 | DUDLEY | 25027 | |
81 | DUNSTABLE | 25017 | |
82 | DUXBURY | 25023 | |
83 | EAST BRIDGEWATER | 25023 | |
84 | EAST BROOKFIELD | 25027 | |
85 | EAST LONGMEADOW | 25013 | |
86 | EASTHAM | 25001 | |
87 | EASTHAMPTON | 25015 | |
88 | EASTON | 25005 | |
89 | EDGARTOWN | 25007 | |
90 | EGREMONT | 25003 | |
91 | ERVING | 25011 | |
92 | ESSEX | 25009 | |
93 | EVERETT | 25017 | |
94 | FAIRHAVEN | 25005 | |
121 | HANCOCK | 25003 | |
95 | FALL RIVER | 25005 | |
96 | FALMOUTH | 25001 | |
97 | FITCHBURG | 25027 | |
98 | FLORIDA | 25003 | |
99 | FOXBOROUGH | 25021 | |
100 | FRAMINGHAM | 25017 | |
101 | FRANKLIN | 25021 | |
102 | FREETOWN | 25005 | |
113 | GREAT BARRINGTON | 25003 | |
103 | GARDNER | 25027 | |
104 | AQUINNAH | 25007 | |
105 | GEORGETOWN | 25009 | |
116 | GROVELAND | 25009 | |
106 | GILL | 25011 | |
107 | GLOUCESTER | 25009 | |
108 | GOSHEN | 25015 | |
109 | GOSNOLD | 25007 | |
110 | GRAFTON | 25027 | |
111 | GRANBY | 25015 | |
114 | GREENFIELD | 25011 | |
115 | GROTON | 25017 | |
117 | HADLEY | 25015 | |
118 | HALIFAX | 25023 | |
119 | HAMILTON | 25009 | |
122 | HANOVER | 25023 | |
123 | HANSON | 25023 | |
128 | HAVERHILL | 25009 | |
129 | HAWLEY | 25011 | |
124 | HARDWICK | 25027 | |
125 | HARVARD | 25027 | |
126 | HARWICH | 25001 | |
127 | HATFIELD | 25015 | |
130 | HEATH | 25011 | |
131 | HINGHAM | 25023 | |
132 | HINSDALE | 25003 | |
133 | HOLBROOK | 25021 | |
134 | HOLDEN | 25027 | |
135 | HOLLAND | 25013 | |
140 | HUBBARDSTON | 25027 | |
136 | HOLLISTON | 25017 | |
137 | HOLYOKE | 25013 | |
138 | HOPEDALE | 25027 | |
139 | HOPKINTON | 25017 | |
141 | HUDSON | 25017 | |
142 | HULL | 25023 | |
143 | HUNTINGTON | 25015 | |
144 | IPSWICH | 25009 | |
145 | KINGSTON | 25023 | |
148 | LANESBOROUGH | 25003 | |
146 | LAKEVILLE | 25023 | |
147 | LANCASTER | 25027 | |
149 | LAWRENCE | 25009 | |
150 | LEE | 25003 | |
151 | LEICESTER | 25027 | |
152 | LENOX | 25003 | |
153 | LEOMINSTER | 25027 | |
154 | LEVERETT | 25011 | |
155 | LEXINGTON | 25017 | |
156 | LEYDEN | 25011 | |
157 | LINCOLN | 25017 | |
158 | LITTLETON | 25017 | |
159 | LONGMEADOW | 25013 | |
160 | LOWELL | 25017 | |
161 | LUDLOW | 25013 | |
162 | LUNENBURG | 25027 | |
163 | LYNN | 25009 | |
164 | LYNNFIELD | 25009 | |
165 | MALDEN | 25017 | |
166 | MANCHESTER | 25009 | |
167 | MANSFIELD | 25005 | |
168 | MARBLEHEAD | 25009 | |
169 | MARION | 25023 | |
170 | MARLBOROUGH | 25017 | |
171 | MARSHFIELD | 25023 | |
178 | MELROSE | 25017 | |
172 | MASHPEE | 25001 | |
173 | MATTAPOISETT | 25023 | |
174 | MAYNARD | 25017 | |
175 | MEDFIELD | 25021 | |
176 | MEDFORD | 25017 | |
177 | MEDWAY | 25021 | |
179 | MENDON | 25027 | |
180 | MERRIMAC | 25009 | |
181 | METHUEN | 25009 | |
183 | MIDDLEFIELD | 25015 | |
182 | MIDDLEBOROUGH | 25023 | |
184 | MIDDLETON | 25009 | |
185 | MILFORD | 25027 | |
186 | MILLBURY | 25027 | |
190 | MONROE | 25011 | |
187 | MILLIS | 25021 | |
188 | MILLVILLE | 25027 | |
189 | MILTON | 25021 | |
198 | NATICK | 25017 | |
191 | MONSON | 25013 | |
192 | MONTAGUE | 25011 | |
193 | MONTEREY | 25003 | |
194 | MONTGOMERY | 25013 | |
195 | MOUNT WASHINGTON | 25003 | |
196 | NAHANT | 25009 | |
197 | NANTUCKET | 25019 | |
199 | NEEDHAM | 25021 | |
201 | NEW BEDFORD | 25005 | |
202 | NEW BRAINTREE | 25027 | |
203 | NEW MARLBOROUGH | 25003 | |
204 | NEW SALEM | 25011 | |
205 | NEWBURY | 25009 | |
206 | NEWBURYPORT | 25009 | |
207 | NEWTON | 25017 | |
208 | NORFOLK | 25021 | |
209 | NORTH ADAMS | 25003 | |
210 | NORTH ANDOVER | 25009 | |
211 | NORTH ATTLEBOROUGH | 25005 | |
212 | NORTH BROOKFIELD | 25027 | |
213 | NORTH READING | 25017 | |
214 | NORTHAMPTON | 25015 | |
215 | NORTHBOROUGH | 25027 | |
216 | NORTHBRIDGE | 25027 | |
217 | NORTHFIELD | 25011 | |
218 | NORTON | 25005 | |
223 | ORANGE | 25011 | |
224 | ORLEANS | 25001 | |
219 | NORWELL | 25023 | |
220 | NORWOOD | 25021 | |
225 | OTIS | 25003 | |
221 | OAK BLUFFS | 25007 | |
222 | OAKHAM | 25027 | |
226 | OXFORD | 25027 | |
227 | PALMER | 25013 | |
228 | PAXTON | 25027 | |
229 | PEABODY | 25009 | |
230 | PELHAM | 25015 | |
231 | PEMBROKE | 25023 | |
232 | PEPPERELL | 25017 | |
233 | PERU | 25003 | |
234 | PETERSHAM | 25027 | |
235 | PHILLIPSTON | 25027 | |
236 | PITTSFIELD | 25003 | |
237 | PLAINFIELD | 25015 | |
238 | PLAINVILLE | 25021 | |
239 | PLYMOUTH | 25023 | |
240 | PLYMPTON | 25023 | |
241 | PRINCETON | 25027 | |
242 | PROVINCETOWN | 25001 | |
257 | RUTLAND | 25027 | |
243 | QUINCY | 25021 | |
244 | RANDOLPH | 25021 | |
260 | SANDISFIELD | 25003 | |
245 | RAYNHAM | 25005 | |
246 | READING | 25017 | |
247 | REHOBOTH | 25005 | |
248 | REVERE | 25025 | |
249 | RICHMOND | 25003 | |
250 | ROCHESTER | 25023 | |
251 | ROCKLAND | 25023 | |
252 | ROCKPORT | 25009 | |
253 | ROWE | 25011 | |
254 | ROWLEY | 25009 | |
255 | ROYALSTON | 25027 | |
256 | RUSSELL | 25013 | |
258 | SALEM | 25009 | |
259 | SALISBURY | 25009 | |
261 | SANDWICH | 25001 | |
262 | SAUGUS | 25009 | |
263 | SAVOY | 25003 | |
264 | SCITUATE | 25023 | |
265 | SEEKONK | 25005 | |
266 | SHARON | 25021 | |
285 | STOUGHTON | 25021 | |
267 | SHEFFIELD | 25003 | |
268 | SHELBURNE | 25011 | |
269 | SHERBORN | 25017 | |
270 | SHIRLEY | 25017 | |
271 | SHREWSBURY | 25027 | |
272 | SHUTESBURY | 25011 | |
286 | STOW | 25017 | |
273 | SOMERSET | 25005 | |
274 | SOMERVILLE | 25017 | |
275 | SOUTH HADLEY | 25015 | |
276 | SOUTHAMPTON | 25015 | |
277 | SOUTHBOROUGH | 25027 | |
278 | SOUTHBRIDGE | 25027 | |
279 | SOUTHWICK | 25013 | |
280 | SPENCER | 25027 | |
281 | SPRINGFIELD | 25013 | |
282 | STERLING | 25027 | |
283 | STOCKBRIDGE | 25003 | |
284 | STONEHAM | 25017 | |
287 | STURBRIDGE | 25027 | |
288 | SUDBURY | 25017 | |
289 | SUNDERLAND | 25011 | |
317 | WELLESLEY | 25021 | |
290 | SUTTON | 25027 | |
291 | SWAMPSCOTT | 25009 | |
292 | SWANSEA | 25005 | |
331 | WESTHAMPTON | 25015 | |
293 | TAUNTON | 25005 | |
346 | WINTHROP | 25025 | |
294 | TEMPLETON | 25027 | |
295 | TEWKSBURY | 25017 | |
301 | TYNGSBOROUGH | 25017 | |
296 | TISBURY | 25007 | |
297 | TOLLAND | 25013 | |
302 | TYRINGHAM | 25003 | |
298 | TOPSFIELD | 25009 | |
299 | TOWNSEND | 25017 | |
300 | TRURO | 25001 | |
303 | UPTON | 25027 | |
304 | UXBRIDGE | 25027 | |
305 | WAKEFIELD | 25017 | |
306 | WALES | 25013 | |
307 | WALPOLE | 25021 | |
308 | WALTHAM | 25017 | |
312 | WARWICK | 25011 | |
313 | WASHINGTON | 25003 | |
309 | WARE | 25015 | |
310 | WAREHAM | 25023 | |
311 | WARREN | 25027 | |
314 | WATERTOWN | 25017 | |
315 | WAYLAND | 25017 | |
316 | WEBSTER | 25027 | |
318 | WELLFLEET | 25001 | |
319 | WENDELL | 25011 | |
320 | WENHAM | 25009 | |
321 | WEST BOYLSTON | 25027 | |
322 | WEST BRIDGEWATER | 25023 | |
323 | WEST BROOKFIELD | 25027 | |
324 | WEST NEWBURY | 25009 | |
325 | WEST SPRINGFIELD | 25013 | |
326 | WEST STOCKBRIDGE | 25003 | |
327 | WEST TISBURY | 25007 | |
328 | WESTBOROUGH | 25027 | |
329 | WESTFIELD | 25013 | |
330 | WESTFORD | 25017 | |
332 | WESTMINSTER | 25027 | |
333 | WESTON | 25017 | |
334 | WESTPORT | 25005 | |
335 | WESTWOOD | 25021 | |
336 | WEYMOUTH | 25021 | |
337 | WHATELY | 25011 | |
338 | WHITMAN | 25023 | |
339 | WILBRAHAM | 25013 | |
340 | WILLIAMSBURG | 25015 | |
341 | WILLIAMSTOWN | 25003 | |
342 | WILMINGTON | 25017 | |
343 | WINCHENDON | 25027 | |
344 | WINCHESTER | 25017 | |
345 | WINDSOR | 25003 | |
347 | WOBURN | 25017 | |
348 | WORCESTER | 25027 | |
349 | WORTHINGTON | 25015 | |
350 | WRENTHAM | 25021 | |
351 | YARMOUTH | 25001 |
<!doctype html> | |
<meta charset="utf-8"> | |
<html> | |
<head> | |
<title>Massachusetts town/county map</title> | |
<style type="text/css"> | |
#map { | |
width: 615px; | |
height: 375px; | |
} | |
</style> | |
</head> | |
<body> | |
<button id="toggle">Toggle</button> | |
<div id="map"></div> | |
<script src="http://d3js.org/d3.v3.min.js"></script> | |
<script src="http://d3js.org/topojson.v1.js"></script> | |
<script src="main.js"></script> | |
</body> | |
</html> |
;(function() { | |
var map; | |
function Map(topology) { | |
// Convert the topojson to geojson | |
var geojson = topojson.feature(topology, topology.objects.towns), | |
// Since we're using projected TopoJSON, we use a null projection here. | |
path = d3.geo.path().projection(null), | |
// Use topojson.mesh to create a path representing county outlines. | |
countyMesh = topojson.mesh(topology, topology.objects.towns, function(a, b) { | |
return a.properties.fips !== b.properties.fips; | |
}), | |
svg = d3.select("#map").append("svg") | |
.attr({ | |
width: 615, | |
height: 375 | |
}), | |
g = svg.append("g").attr({"class": "g-town"}), | |
colorScale = d3.scale.category20b(), | |
// Add town paths | |
town = g.selectAll("path.town").data(geojson.features) | |
.enter().append("path") | |
.attr({ | |
"class": "town", | |
d: path | |
}) | |
.style({ | |
fill: function(d, i) { | |
return colorScale(Math.floor(Math.random()*1000)); | |
}, | |
stroke: "white" | |
}), | |
// Add county path and set its opacity to 0, | |
// since we don't want to show it initially. | |
county = g.append("path").datum(countyMesh) | |
.attr({ | |
"class": "county", | |
d: path | |
}) | |
.style({ | |
opacity: 0, | |
stroke: "white", | |
"stroke-width": 2, | |
fill: "none" | |
}), | |
currentState = "town"; | |
// To show the county outlines, we | |
// transition the town shapes to have | |
// a consistent stroke, and fill, in effect hiding | |
// them. We also transition the county | |
// path to be visible. | |
this.showCounties = function() { | |
var countyColors = {}; | |
// Since we're using a mesh for the county outlines, | |
// it doesn't work well to add the fill to the county | |
// path. Instead, we'll set a consistent fill on all | |
// the towns in each county, to give the effect of | |
// filling in the county. | |
town.transition() | |
.duration(600) | |
.style({ | |
fill: function(d, i) { | |
if (!countyColors[d.properties.fips]) { | |
countyColors[d.properties.fips] = colorScale(Math.floor(Math.random()*1000)); | |
} | |
return countyColors[d.properties.fips]; | |
}, | |
stroke: function(d, i) { | |
return countyColors[d.properties.fips]; | |
} | |
}); | |
county.transition() | |
.duration(600) | |
.style({ | |
opacity: 1 | |
}) | |
}; | |
// To show the town outlines, we transition | |
// back to our original state. | |
this.showTowns = function() { | |
town.transition() | |
.duration(600) | |
.style({ | |
stroke: "white", | |
fill: function(d, i) { | |
return colorScale(Math.floor(Math.random()*1000)); | |
} | |
}); | |
county.transition() | |
.duration(600) | |
.style({ | |
opacity: 0 | |
}) | |
}; | |
this.toggle = function() { | |
if (currentState === "town") { | |
this.showCounties(); | |
currentState = "county"; | |
} else { | |
this.showTowns(); | |
currentState = "town"; | |
} | |
}; | |
} | |
d3.json("ma-towns.topojson", function(err, topology) { | |
map = new Map(topology); | |
}); | |
d3.select("#toggle").on("click", function() { | |
map.toggle(); | |
}); | |
}()); |