Plot: Voronoi labelsDelaunay edge coloringDelaunay sub-graphsd3-delaunay@6 robustly releasedClip LloydTP3: Power Diagram and Semi-Discrete Optimal TransportSpatial interpolation: Voronoi & Blur (code)Paths Delaunay hoverSelf-Organizing Maps meet DelaunayVoronoiMap2DPolygon TriangulationHello, constrainautorThe Gray-Fuller spatial gridUnconnected Delaunay NeighborsLinde–Buzo–Gray stipplingLloyd’s relaxation on a graphManhattan Voronoi IIManhattan VoronoiGraph VoronoiWorld Cities UrquhartUK TricontoursGeo Voronoi interpolationSpherical contoursPetri dish bubblingd3-geo-voronoi and gridded dataDelaunay.findTriangleIris Voronoi 3The Voronoi projectionSouth Africa’s medial axisDirection to shoreDistance to shoret-SNE VoronoiMurphey Butterfly ProjectionAlpha shapes 3Alpha shapes 2So many countries’ VoronoisKruskal MazeOffscreen VoronoiGeo Mesh & fake pointsDrawing Voronoi with two.jsAlpha shapesSpherical VoronoiPerturbed Geodesic RainbowWorld Airports UrquhartSpherical Lloyds RelaxationAntarctica’s VoronoiWorld Airports VoronoiThe Urquhart graphGeo Delaunay
Semi-square voronoi
{
const w = 250;
const context = DOM.context2d(2 * w, 2 * w);
yield context.canvas;
context.translate(w, w);
let alpha = 0;
const points = new Float32Array(60 * 60 * 2);
const v = new d3.Delaunay(points).voronoi([-w + 10, -w + 10, w - 10, w - 10]);
while (true) {
context.clearRect(-w, -w, 2 * w, 2 * w);
const ca = Math.cos(alpha),
sa = Math.sin(alpha);
const c = Array.from(
d3
.range(-30, 30)
.map(i =>
d3
.range(-30, 30)
.map(j => [15 * (i * ca + j * sa), 15 * (i * sa - j * ca)])
)
)
.flat()
.map(([x, y]) => [
x + ((x + w / 2) * y * y) / w / w,
y + (x + w / 2) * 0.25
])
.flat();
for (let i = 0; i < c.length; i++) points[i] = c[i];
v.update();
context.beginPath();
for (let i = 0; i < points.length; i++) {
if ((Math.floor(i / 60) + (i % 60)) % 2) v.renderCell(i, context);
}
context.fillStyle = "pink";
context.fill();
context.beginPath();
for (let i = 0; i < points.length; i++) {
if ((Math.floor(i / 60) + (i % 60)) % 2 === 0) v.renderCell(i, context);
}
context.fillStyle = "lightblue";
context.fill();
context.beginPath();
v.render(context);
context.stroke();
alpha += 0.003;
yield context.canvas;
}
}
d3 = require("d3-array@2", "d3-delaunay@6")
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.