Voronoi of the 50 largest urban areas in the US (d3.v4)

Updating Neil Freeman’s Block to d3.v4 that was riffing on the State Capitals Voronoi from Jason Davies, and using his spherical voronoi script.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>US Urban Area Voronoi</title>
    <link rel="stylesheet" href="./style.css">
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="//d3js.org/d3-queue.v3.min.js"></script>
    <script src="https://d3js.org/topojson.v1.min.js"></script>
    <script src="./d3.geo.voronoi.js?1"></script>
  </head>
  <body>
    <div id="map"></div>
    <script>
    var width = 960,
        height = 500;

var projection = d3.geoAlbers()
        .precision(0.1);

var path = d3.geoPath()
        .projection(projection)
        .pointRadius(1.5);

var svg = d3.selectAll("#map").append("svg")
        .attr("width", width)
        .attr("height", height);

var fill = d3.scaleOrdinal(d3.schemeCategory10);

d3.queue()
        .defer(d3.json, "./us-10m.json")
        .defer(d3.csv, "./top-50-metros.csv")
        .await(ready);

function ready(error, us, capitals) {
      if (error) {
        console.log(error);
      }

var defs = svg.append("defs");
      defs.append("path")
          .datum(topojson.feature(us, us.objects.land))
          .attr("id", "land")
          .attr("d", path);

defs.append("clipPath")
          .attr("id", "clip")
        .append("use")
          .attr("xlink:href", "#land");

svg.append("use")
          .attr("xlink:href", "#land")
          .attr("class", "land");

var coordinates = capitals.map(function(d) { return [+d.longitude, +d.latitude]; });

var voronoi = geoVoronoi(coordinates, geoDelaunay(coordinates)).geometries;

g.append("path")
          .datum(topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; }))
          .attr("class", "states")
          .attr("d", path);

g.selectAll(".voronoi-border")
          .data(voronoi.map(function(cell) {
            return {type: "LineString", coordinates: cell.coordinates[0]};
          }))
        .enter().append("path")
          .attr("class", "voronoi-border")
          .attr("d", path);

svg.append("path")
          .datum({type: "MultiPoint", coordinates: coordinates})
          .attr("class", "points")
          .attr("d", path);
    }
    </script>
  </body>
</html>

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

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

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

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

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