Old school D3 from simpler times

All examples By author By category About

yaph

Full window Github gist

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

See also the underlying graph.

<!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>

Modified http://d3js.org/d3.v3.min.js to a secure url

Modified http://d3js.org/topojson.v1.min.js to a secure url

Modified http://d3js.org/queue.v1.min.js to a secure url

Changed /mbostock/raw/4090846/us.json to a local referenece

https://d3js.org/d3.v3.min.js

https://d3js.org/topojson.v1.min.js

https://d3js.org/queue.v1.min.js