Skip to content

Instantly share code, notes, and snippets.

@mbostock
Last active February 9, 2016 02:04
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mbostock/5707818 to your computer and use it in GitHub Desktop.
Save mbostock/5707818 to your computer and use it in GitHub Desktop.
TopoJSON Layers
license: gpl-3.0
<!DOCTYPE html>
<meta charset="utf-8">
<style>
svg {
position: absolute;
top: 0;
left: 0;
}
path {
stroke-linejoin: round;
}
.land-glow use {
fill-opacity: .2;
filter: url(#blur);
}
.land-fill {
fill: #fff;
}
.state-boundary {
fill: none;
stroke: #777;
stroke-width: .70px;
}
.county-boundary {
fill: none;
}
.land-fill,
.county-boundary {
stroke: #777;
stroke-width: .35px;
}
</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>
<script>
var width = 960,
height = 600;
var projection = d3.geo.albersUsa()
.scale(1285)
.translate([width / 2, height / 2]);
var path = d3.geo.path()
.projection(projection);
d3.json("/mbostock/raw/4090846/us.json", function(error, us) {
if (error) throw error;
var svgGlow = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.attr("class", "land-glow");
svgGlow.append("defs").append("path")
.datum(topojson.feature(us, us.objects.land))
.attr("id", "land")
.attr("d", path);
svgGlow.append("filter")
.attr("id", "blur")
.append("feGaussianBlur")
.attr("stdDeviation", 5);
svgGlow.append("use")
.attr("xlink:href", "#land");
d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.attr("class", "land-fill")
.append("use")
.attr("xlink:href", "#land");
d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.attr("class", "county-boundary")
.append("path")
.datum(topojson.mesh(us, us.objects.counties, function(a, b) {
return a !== b // a border between two counties
&& (a.id === 53000 || b.id === 5300 // where a and b are in puget sound
|| a.id % 1000 && b.id % 1000) // or a and b are not in a lake
&& !(a.id / 1000 ^ b.id / 1000); // and a and b are in the same state
}))
.attr("d", path);
d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.attr("class", "state-boundary")
.append("path")
.datum(topojson.mesh(us, us.objects.states, function(a, b) {
return a !== b; // a border between two states
}))
.attr("d", path);
var svg = d3.selectAll("svg").style("opacity", 0);
animation();
function animation() {
var duration = 750,
delay = 750,
n = svg[0].length;
svg.transition()
.duration(duration)
.delay(function(d, i) { return (duration + delay) * (n - 1 - i); })
.style("opacity", 1)
.transition()
.delay(function(d, i) { return (duration + delay) * (n + i); })
.style("opacity", 0)
.each("end", function(d, i) { if (i === n - 1) animation(); });
}
});
d3.select(self.frameElement).style("height", height + "px");
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment