D3 Examples - Coastal Graph Distance II

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
​
body {
  background: #222;
}
​
</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>
<script src="//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 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, "/../../data/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); });
  });
}
​
</script>
​
    