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.)

Ahh, my eyes! A deliberately retina-searing variation of the coastal graph distance map.

Source: Mike Bostock

var projection = d3.geo.albersUsa()
    .translate([width / 2, height / 2]);

var path = d3.geo.path()
    .projection(projection);

var color = d3.scale.ordinal()
    .domain(d3.range(9).reverse())
    .range(["#ffffd9","#edf8b1","#c7e9b4","#7fcdbb","#41b6c4","#1d91c0","#225ea8","#253494","#081d58"]);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

queue()
    .defer(d3.json, "/mbostock/raw/4090846/us.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;
  }

  var county = svg.append("g")
      .attr("class", "counties")
    .selectAll("path")
      .data(d3.nest()
        .key(function(d) { return d.distance; })
        .entries(counties.features)
        .map(function(e) { return {type: "FeatureCollection", features: e.values, distance: +e.key}; }))
    .enter().append("path")
      .attr("d", path);

  d3.timer(function(elapsed) {
    county.style("fill", function(d) { return d3.hsl(d.distance * 10 - elapsed / 10, 1, .5); });
  });
}

---

---