Published
Edited
Oct 28, 2020
26 stars
Plot: Voronoi labelsDelaunay edge coloringDelaunay sub-graphsd3-delaunay@6 robustly releasedClip LloydSemi-square voronoiTP3: Power Diagram and Semi-Discrete Optimal TransportSpatial interpolation: Voronoi & Blur (code)Self-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
Paths Delaunay hover
Also listed in…
Tools
function chart() {
const context = DOM.context2d(width, height);
const hoverDistance = 25; // pixels
function draw(highlight, pointer, found) {
context.clearRect(0, 0, width, height);
const { delaunay } = context.canvas;
if (debug && delaunay) {
context.beginPath();
delaunay.voronoi([0, 0, width, height]).render(context);
context.strokeStyle = "lightblue";
context.lineWidth = 0.5;
context.stroke();
/*context.beginPath();
delaunay.renderPoints(context, 1);
context.fillStyle = "#888";
context.fill();
*/
}
let i = 0;
for (const p of paths) {
context.beginPath();
context.lineWidth = i === highlight ? 4 : 0.7;
context.strokeStyle = color(i++);
context.stroke(new Path2D(p));
}
if (pointer) {
context.beginPath();
context.arc(...pointer, hoverDistance, 0, 6.4);
if (found) context.moveTo(...found), context.arc(...found, 3, 0, 6.4);
context.lineWidth = 2.5;
context.strokeStyle = "#aaa";
context.stroke();
}
}
draw();
d3.select(context.canvas).on("pointermove", event => {
const parent = context.canvas;
const timer = performance.now();
if (!parent.delaunay) {
const points = paths.map(path => {
const p = useSvgPathProperties
? new svgPathProperties(path)
: document.createElementNS("http://www.w3.org/2000/svg", "path");
p.setAttribute && p.setAttribute("d", path);
const l = p.getTotalLength();
const sample = Math.ceil(l / sample_pixels);
return !sample
? []
: d3.range(sample + 1).map(i => p.getPointAtLength((i / sample) * l));
});
parent.delaunay = d3.Delaunay.from(points.flat(), d => d.x, d => d.y);
parent.delaunay.sizes = d3.cumsum(points.map(p => p.length));
mutable init_time = performance.now() - timer;
}
const pointer = d3.pointer(event);
const p_i = parent.delaunay.find(...pointer);
const found = [
parent.delaunay.points[2 * p_i],
parent.delaunay.points[2 * p_i + 1]
];
const delta = Math.hypot(pointer[0] - found[0], pointer[1] - found[1]);
if (delta > hoverDistance) {
draw(null, pointer);
} else {
const i = d3.bisect(parent.delaunay.sizes, p_i);
draw(i, pointer, found);
}
});
return context.canvas;
}
function randompath() {
let x = width / 2 + random() * 5,
y = height / 2 + random() * 5;
let dx = 0,
dy = 0;
return d3.line().curve(d3.curveCardinal)(
Array.from({ length: 30 * Math.random() }, () => [
(x += random() + ((dx += random() / 4), (dx *= 0.8))),
(y += random() + ((dy += random() / 4), (dy *= 0.8)))
])
);
}
random = d3.randomNormal(0, 13)
paths = Array.from({ length: 50 }, randompath)
// Using this library is faster than creating the paths as svg elements
svgPathProperties = (await require("svg-path-properties@^1.0.9"))
.svgPathProperties
mutable init_time = undefined
height = 600
d3 = require("d3@6")
color = d3.scaleOrdinal(d3.schemeCategory10)
import { checkbox, select } from "@jashkenas/inputs"
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.