xxxxxxxxxx
<meta charset="utf-8">
<style>
#sphere {
fill: #ccc;
stroke: #444;
stroke-width: 2;
}
.polygons {
stroke: #444;
}
.sites {
stroke: black;
fill: white;
}
</style>
<svg width="960" height="600"></svg>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="https://unpkg.com/d3-delaunay@5"></script>
<script src="https://unpkg.com/d3-geo-voronoi@1.5"></script>
<script>
d3.csv('capitals.csv').then(function(points) {
// Extract the `lon` and `lat` columns from each row; add an epsilon
// to allow for capitals set in the exact same coordinates
var v = d3.geoVoronoi()
.x(function(row) {
return +row.lon + 1e-9 * Math.random();
})
.y(function(row) {
return +row.lat;
})
(points);
var projection = d3.geoOrthographic(),
path = d3.geoPath().projection(projection);
var svg = d3.select("svg");
svg.append('path')
.attr('id', 'sphere')
.datum({ type: "Sphere" })
.attr('d', path);
svg.append('g')
.attr('class', 'polygons')
.selectAll('path')
.data(v.polygons().features)
.enter()
.append('path')
.attr('d', path)
.attr('fill', function(_,i) { return d3.schemeCategory10[i%10]; });
var c = {
type: "MultiPoint",
coordinates: points
.map(function(d) {
return[ +d.lon, +d.lat ];
})
};
console.log(c);
svg.append('path')
.attr('class', 'sites')
.datum(c)
.attr('d', path);
// gentle animation
d3.interval(function(elapsed) {
projection.rotate([ elapsed / 150, 0 ]);
svg.selectAll('path')
.attr('d', path);
}, 50);
}); // d3.csv
</script>
https://d3js.org/d3.v5.min.js
https://unpkg.com/d3-delaunay@5
https://unpkg.com/d3-geo-voronoi@1.5