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.
xxxxxxxxxx
<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;
var g = svg.append("g").attr("clip-path", "url(#clip)");
g.selectAll(".voronoi")
.data(voronoi)
.enter().append("path")
.attr("class", "voronoi")
.style("fill", function(d, i) { return fill(d.color = d3.max(d.neighbors, function(n) { return voronoi[n].color; }) + 1 | 0); })
.attr("d", path)
.append("title")
.text(function(_, i) {
var d = capitals[i];
return d.name + ", " + d.description;
});
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