geoVoronoi x() and y() accessors

by Philippe Rivière.

<!DOCTYPE html>
<meta charset="utf-8">
<style>
    #sphere {
        fill: #ccc;
        stroke: #444;
        stroke-width: 2;
    }
    .polygons {
        stroke: #444;
    }

.sites {
        stroke: black;
        fill: white;
    }
    
</style>

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