Skip to content

Instantly share code, notes, and snippets.

@mbostock
Last active May 15, 2019 17:47
  • Star 1 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save mbostock/9788959 to your computer and use it in GitHub Desktop.
Border Distance
license: gpl-3.0

A quick-and-dirty approximate visualization of distance from the U.S. border or coastline, whichever is closer. Unlike the coastal distance map, this is based on geographic distance rather than graph (topologic) distance.

This map is an approximation because distances shown are measured in projected coordinates (10px) rather than on the surface of the Earth, and no geographic projection preserves distances equally between all pairs of points. A more accurate approach would compute the border buffer shapes in spherical coordinates.

(Also, I’d rather have this map just show distance from the coast rather than the border, but that requires a bit more work, too!)

<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
background: #fcfcfa;
}
.land {
fill: #fff;
}
.coast-buffers {
fill: none;
stroke-linejoin: round;
stroke-linecap: round;
}
.state-borders {
fill: none;
stroke: #ccc;
stroke-linejoin: round;
stroke-linecap: round;
}
</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 color = d3.scale.ordinal()
.domain(d3.range(90, 0, -10))
.range(["#ffffd9","#edf8b1","#c7e9b4","#7fcdbb","#41b6c4","#1d91c0","#225ea8","#253494","#081d58"]);
var projection = d3.geo.albersUsa()
.translate([width / 2, height / 2])
.scale(1280);
var path = d3.geo.path()
.projection(projection);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
d3.json("/mbostock/raw/4090846/us.json", function(error, us) {
if (error) throw error;
var defs = svg.append("defs");
defs.append("path")
.datum(topojson.feature(us, us.objects.land))
.attr("id", "land")
.attr("d", path);
defs.append("clipPath")
.attr("id", "clip-land")
.append("use")
.attr("xlink:href", "#land");
svg.append("use")
.attr("class", "land")
.attr("xlink:href", "#land");
svg.append("g")
.attr("class", "coast-buffers")
.attr("clip-path", "url(#clip-land)")
.selectAll("use")
.data(color.domain())
.enter().append("use")
.style("stroke", color)
.style("stroke-width", function(d) { return d + "px"; })
.attr("xlink:href", "#land");
svg.append("path")
.datum(topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; }))
.attr("class", "state-borders")
.attr("d", path);
});
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