Plot: Voronoi labelsDelaunay sub-graphsd3-delaunay@6 robustly releasedClip LloydSemi-square voronoiTP3: 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
Delaunay edge coloring
{
const context = DOM.context2d(width, height);
const path = d3.geoPath().context(context);
const dist = d3.map(edges, euclidian);
const w = d3.scaleLinear([0, edges.length - 1], [2.5, 0.12]);
const c = d3.scaleSequential([0, edges.length - 1], d3.interpolateWarm);
for (const [q, i] of d3
.sort(d3.range(dist.length), (i) => dist[i])
.entries()) {
const [a, b] = edges[i];
context.beginPath();
path({ type: "LineString", coordinates: [points[a], points[b]] });
context.lineWidth = w(q);
context.strokeStyle = c(q);
context.stroke();
}
return context.canvas;
}
delaunay = d3.Delaunay.from(points)
edges = {
const { triangles, points, halfedges } = delaunay;
const edges = [];
for (let i = 0; i < triangles.length; i += 3) {
for (let j = 0; j < 3; ++j) {
const ti = triangles[i + j];
const tj = triangles[i + ((j + 1) % 3)];
if (ti < tj || halfedges[i + j] === -1) edges.push([ti, tj]);
}
}
return edges;
}
euclidian = ([a, b]) =>
Math.hypot(points[a][0] - points[b][0], points[a][1] - points[b][1])
height = 680
import {pick2d} from "@fil/2d-point-distributions"
points0 = [...pick2d(width, height, 7000)]
import { allCities } from "@visionscarto/world-cities-gabriel"
projection = d3.geoBertin1953().fitExtent(
[
[-140, 10],
[width + 80, height - 10]
],
{ type: "Sphere" }
)
points1 = d3
.sort(allCities, (d) => d.lat)
.map((d) => projection([d.lng, d.lat]))
d3 = require("d3@7", "d3-geo-projection@4")
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
