Public
Edited
Feb 16, 2023
1 star
Also listed in…
Geo
bbox = [-60, -10, 40, 60]
points = ({
type: "FeatureCollection",
features: Array.from({ length: 100 }, () => [
bbox[0] + (bbox[2] - bbox[0]) * Math.random(),
bbox[1] + (bbox[3] - bbox[1]) * Math.random()
]).map((d) => ({
type: "Feature",
geometry: { type: "Point", coordinates: d }
}))
})
cells = clippedVoronoi(points, padding)
function clippedVoronoi(points, padding = 0) {
const coords = points.features.map(d3.geoCentroid);
const X = d3.extent(coords, (d) => d[0]);
const Y = d3.extent(coords, (d) => d[1]);
// the projection sends the shapes to a rectangle which is a bit larger
// than the data’s bounding-box.
const projection = d3
.geoEquirectangular()
.fitExtent(
[
[X[0], Y[0]],
[X[1], Y[1]]
],
points
)
.clipExtent([
[X[0] - padding, Y[0] - padding],
[X[1] + padding, Y[1] + padding]
]);
const path = d3.geoPath(projection);
// Unproject each of the voronoi polygons, reclaiming the spherical coordinates
// of their points. However it's not as simple as it sounds, because… when we clip
// to the (planar) rectangle, we get edges that look straight on the plane, but are
// not segments of great circles. So we need to make sure that the segments are not
// too long. And when they are too long, we have to sample by splitting them into
// small pieces, in order to have enough intermediate points.
return {
type: "FeatureCollection",
features: d3
.geoVoronoi(points)
.polygons()
.features.map((feature) => {
let p = path(feature);
if (p) {
const planarRing = p
.replace(/^M|Z$/g, "")
.split("L")
.map((d) => d.split(",").map((d) => +d));
// needed because we'll use d3.pairs
planarRing.push(planarRing[0]);
const sphericalRing = d3.pairs(planarRing).flatMap(([a, b]) => {
const dist = Math.hypot(a[0] - b[0], a[1] - b[1]); // sample about every 1 degree
const inter = d3.interpolate(a, b);
const steps = Math.ceil(dist);
return d3
.range(steps)
.map((i) => projection.invert(inter(i / steps)));
});
// needed to close the ring, per GeoJSON
sphericalRing.push(sphericalRing[0]);
return {
...feature,
geometry: { type: "Polygon", coordinates: [sphericalRing] }
};
}
})
};
}
import { d3 } from "@visionscarto/geo"
turf = require("@turf/turf@6")
options = ({ bbox })
pts = turf.randomPoint(100, options)
voronoiPolygons = turf.voronoi(pts, options)
Plot.plot({
projection: "equirectangular",
marks: [Plot.geo(voronoiPolygons), Plot.geo(pts, { fill: "black" })]
})
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.