Skip to content

Instantly share code, notes, and snippets.

@mbostock
Last active December 24, 2019 04:51
Show Gist options
  • Save mbostock/9744818 to your computer and use it in GitHub Desktop.
Save mbostock/9744818 to your computer and use it in GitHub Desktop.
Coastal Graph Distance
license: gpl-3.0
height: 600
border: no
redirect: https://observablehq.com/@mbostock/coastal-graph-distance

This map shows the graph distance of each county from the Pacific or Atlantic coast; it is a recreation of a map posted to /r/dataisbeautiful using TopoJSON. Coastal counties are dark blue, while counties nine or more counties away from the coast are light yellow. (I opted not to reuse the original’s cycling color scale.)

See also the underlying graph.

We can make this file beautiful and searchable if this error is corrected: No tabs found in this TSV file in line 0.
id
01003
01097
02013
02016
02020
02050
02060
02070
02100
02110
02122
02130
02150
02164
02170
02180
02185
02188
02201
02201
02201
02201
02201
02201
02201
02201
02201
02201
02201
02201
02201
02201
02201
02201
02220
02232
02261
02270
02280
02282
06001
06013
06015
06023
06037
06041
06045
06053
06055
06059
06073
06075
06079
06081
06083
06085
06087
06095
06097
06111
09001
09007
09009
09011
10001
10003
10005
11001
12005
12009
12011
12015
12017
12021
12029
12031
12033
12035
12037
12045
12053
12057
12061
12065
12071
12075
12081
12085
12086
12087
12089
12091
12099
12101
12103
12109
12111
12113
12115
12123
12127
12129
12131
13029
13039
13051
13127
13179
13191
15001
15003
15007
15007
15009
15009
15009
15009
22023
22045
22051
22057
22071
22075
22087
22101
22103
22109
22113
23005
23009
23011
23013
23015
23023
23027
23029
23031
24003
24005
24009
24011
24015
24017
24019
24025
24029
24033
24035
24037
24039
24041
24045
24047
24510
25001
25005
25007
25009
25017
25019
25021
25023
25025
28045
28047
28059
33015
33017
34001
34003
34005
34007
34009
34011
34013
34015
34017
34023
34025
34029
34033
34039
36005
36047
36059
36061
36079
36081
36085
36087
36103
36119
37013
37015
37019
37029
37031
37041
37049
37053
37055
37073
37091
37095
37103
37129
37133
37137
37139
37141
37143
37177
37187
41007
41011
41015
41019
41039
41041
41057
42045
42101
44001
44003
44005
44007
44009
45013
45015
45019
45029
45043
45051
45053
48007
48039
48057
48061
48071
48167
48201
48239
48245
48261
48273
48321
48355
48391
48409
48469
48489
51001
51013
51036
51057
51059
51073
51093
51095
51097
51099
51101
51103
51115
51119
51127
51131
51133
51149
51153
51159
51175
51179
51181
51193
51199
51550
51650
51700
51710
51800
51810
53009
53027
53029
53031
53033
53035
53045
53049
53053
53055
53057
53061
53067
53069
53073
72003
72005
72011
72013
72017
72021
72023
72027
72031
72037
72051
72053
72055
72057
72059
72061
72065
72069
72071
72075
72079
72087
72089
72091
72095
72097
72103
72109
72111
72113
72115
72119
72123
72125
72127
72133
72137
72143
72145
72147
72151
72153
78010
78030
<!DOCTYPE html>
<svg width="960" height="600"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/topojson.v2.min.js"></script>
<script>
var svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height");
var path = d3.geoPath();
var color = d3.scaleOrdinal()
.domain(d3.range(9))
.range(["#081d58", "#253494", "#225ea8", "#1d91c0", "#41b6c4", "#7fcdbb", "#c7e9b4", "#edf8b1", "#ffffd9"]);
d3.queue()
.defer(d3.json, "https://d3js.org/us-10m.v1.json")
.defer(d3.tsv, "coastal-counties.tsv")
.await(ready);
function ready(error, us, coastals) {
if (error) throw error;
var counties = topojson.feature(us, us.objects.counties),
neighbors = topojson.neighbors(us.objects.counties.geometries),
coastals = d3.set(coastals.map(function(d) { return d.id; })),
nexts = [],
nexts2 = [],
distance = 0;
counties.features.forEach(function(county, i) {
if (coastals.has(county.id)) nexts.push(county);
county.distance = Infinity;
county.neighbors = neighbors[i].map(function(j) { return counties.features[j]; });
});
while (nexts.length) {
nexts.forEach(function(county) {
if (county.distance > distance) {
county.distance = distance;
county.neighbors.forEach(function(neighbor) { nexts2.push(neighbor); });
}
});
nexts = nexts2, nexts2 = [], ++distance;
}
svg.append("g")
.attr("fill", "#ccc")
.selectAll("path")
.data(counties.features)
.enter().append("path")
.style("fill", function(d) { return color(Math.min(8, d.distance)); })
.attr("d", path);
svg.append("path")
.attr("fill", "none")
.attr("stroke", "#ccc")
.attr("stroke-width", 0.5)
.attr("stroke-linejoin", "round")
.attr("d", path(topojson.mesh(us, us.objects.counties, function(a, b) { return a !== b; })));
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment