Skip to content

Instantly share code, notes, and snippets.

Last active March 7, 2019 16:27
Show Gist options
  • Save mbostock/9744098 to your computer and use it in GitHub Desktop.
Save mbostock/9744098 to your computer and use it in GitHub Desktop.
County Topology
license: gpl-3.0
height: 600
border: no

This graph shows the topology of U.S. counties. Each node in the graph represents a county, positioned at the county centroid, while each link represents two neighboring counties sharing a border. (This graph is only approximate, as it is based on simplified geometry.)

<!DOCTYPE html>
<svg width="960" height="600"></svg>
<script src=""></script>
<script src=""></script>
var svg ="svg"),
width = +svg.attr("width"),
height = +svg.attr("height");
var path = d3.geoPath();
d3.json("", function(error, us) {
if (error) throw error;
var features = topojson.feature(us, us.objects.counties).features,
neighbors = topojson.neighbors(us.objects.counties.geometries);
features.forEach(function(feature, i) {
feature.centroid = path.centroid(feature);
if (feature.centroid.some(isNaN)) feature.centroid = null; // off the map
feature.neighbors = feature.centroid ? neighbors[i]
.filter(function(j) { return j < i && features[j].centroid; })
.map(function(j) { return features[j]; }) : [];
.attr("fill", "#ddd")
.attr("d", path(topojson.feature(us, us.objects.nation)));
.attr("fill", "none")
.attr("stroke", "#fff")
.attr("stroke-linejoin", "round")
.attr("d", path(topojson.mesh(us, us.objects.counties, function(a, b) { return a !== b; })));
.attr("fill", "none")
.attr("stroke", "#000")
.attr("stroke-linejoin", "round")
.attr("d", d3.merge(
.map(function(edge) { return "M" + edge[0] + "L" + edge[1]; })
function edges(feature) {
return {
return [feature.centroid, neighbor.centroid];
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment