In response to a Stack Overflow question regarding TopoJSON for congressional districts.
forked from mbostock's block: 113th U.S. Congressional Districts
license: gpl-3.0 |
In response to a Stack Overflow question regarding TopoJSON for congressional districts.
forked from mbostock's block: 113th U.S. Congressional Districts
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<style> | |
path { | |
stroke-linejoin: round; | |
stroke-linecap: round; | |
} | |
.districts { | |
fill: #bbb; | |
} | |
.districts :hover { | |
fill: orange; | |
} | |
.district-boundaries { | |
pointer-events: none; | |
fill: none; | |
stroke: #fff; | |
stroke-width: .5px; | |
} | |
.state-boundaries { | |
pointer-events: none; | |
fill: none; | |
stroke: #fff; | |
stroke-width: 1.5px; | |
} | |
</style> | |
<body> | |
<script src="//d3js.org/d3.v3.min.js"></script> | |
<script src="//d3js.org/queue.v1.min.js"></script> | |
<script src="//d3js.org/topojson.v1.min.js"></script> | |
<script> | |
var width = 960, | |
height = 600; | |
var projection = d3.geo.albersUsa() | |
.scale(1280) | |
.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); | |
queue() | |
.defer(d3.json, "https://gist.githubusercontent.com/mbostock/4090846/raw/d534aba169207548a8a3d670c9c2cc719ff05c47/us.json") | |
.defer(d3.json, "https://gist.githubusercontent.com/mbostock/4090846/raw/d534aba169207548a8a3d670c9c2cc719ff05c47/us-congress-113.json") | |
.await(ready); | |
function ready(error, us, congress) { | |
if (error) throw error; | |
svg.append("defs").append("path") | |
.attr("id", "land") | |
.datum(topojson.feature(us, us.objects.land)) | |
.attr("d", path); | |
svg.append("clipPath") | |
.attr("id", "clip-land") | |
.append("use") | |
.attr("xlink:href", "#land"); | |
svg.append("g") | |
.attr("class", "districts") | |
.attr("clip-path", "url(#clip-land)") | |
.selectAll("path") | |
.data(topojson.feature(congress, congress.objects.districts).features) | |
.enter().append("path") | |
.attr("d", path) | |
.append("title") | |
.text(function(d) { return d.id; }); | |
svg.append("path") | |
.attr("class", "district-boundaries") | |
.datum(topojson.mesh(congress, congress.objects.districts, function(a, b) { return a !== b && (a.id / 1000 | 0) === (b.id / 1000 | 0); })) | |
.attr("d", path); | |
svg.append("path") | |
.attr("class", "state-boundaries") | |
.datum(topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; })) | |
.attr("d", path); | |
} | |
d3.select(self.frameElement).style("height", height + "px"); | |
</script> |