D3 Examples - Fork of mbostock's coastal counties map

Fork of mbostock's coastal counties map

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

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
​
.counties {
  fill: #ccc;
}
​
.county-borders {
  fill: none;
  stroke: #ccc;
  stroke-width: .5px;
  stroke-linejoin: round;
  stroke-linecap: round;
}
​
</style>
<body>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
<script src="https://d3js.org/queue.v1.min.js"></script>
<script>
​
var width = 960,
    height = 500;
​
var projection = d3.geo.albersUsa()
    .translate([width / 2, height / 2]);
​
var path = d3.geo.path()
    .projection(projection);
​
var colors = ['#fff9ee', '#fff6ed', '#ffedde', '#ffe3d0', '#ffdac3', '#ffd0b5', '#ffc5a8', '#ffbb9b', '#ffb18e', '#ffa581', '#ff9b74', '#ff8f67', '#ff825a', '#ff764d', '#ff663f', '#ff5731', '#ff4222', '#ff270f', '#fa0000', '#ed0001', '#e00001', '#d40002', '#c80002', '#ba0002', '#af0002', '#a30002', '#970002', '#8c0001', '#800000', '#000000'];//.reverse();
​
var color = d3.scale.ordinal()
    .domain(d3.range(colors.length).reverse())
    .range(colors);
​
var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);
​
queue()
    .defer(d3.json, "/../../data/us.json")
    .defer(d3.tsv, "coastal-counties.tsv")
    .await(ready);
​
function ready(error, us, coastals) {
  if (error) return console.error(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("class", "counties")
    .selectAll("path")
      .data(counties.features)
    .enter().append("path")
      .style("fill", function(d) { return color(Math.min(colors.length, d.distance)); })
      .attr("d", path);
​
  svg.append("path")
      .attr("class", "county-borders")
      .datum(topojson.mesh(us, us.objects.counties, function(a, b) { return a !== b; }))
      .attr("d", path);
}
​
</script>
    