Published
Edited
Nov 10, 2020
4 stars
Plot: Voronoi labelsDelaunay edge coloringDelaunay sub-graphsd3-delaunay@6 robustly releasedClip LloydSemi-square voronoiSpatial 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
TP3: Power Diagram and Semi-Discrete Optimal Transport
fill = d3
.scaleDiverging()
.domain([.5, 0, -.5])
.interpolator(d3.interpolatePiYG)
mutable debug = null
cells = {
const uniform =
Math.abs(
d3.polygonArea([
[3 + width / 2, 3],
[width - 3, 3],
[width - 3, height - 3],
[3, height - 3]
])
) / points.length;
for (let t = 0; t < 2000; t++) {
const cells = powerDiagram(points);
for (let i = 0; i < cells.length; i++) {
const c = cells[i];
c.area = Math.abs(d3.polygonArea(c));
}
const minA = cells.length === points.length;
const A = d3.median(points, d => d[2]);
for (let i = 0; i < points.length; i++) points[i][2] += 1000;
for (let i = 0; i < cells.length; i++) {
const c = cells[i],
p = c.site.originalObject;
p.cell = c;
p[2] = (p[2] - 1000 - A) * 0.5;
p.stress = Math.log(c.area / uniform);
p[2] -= 400 * p.stress;
// advection?
const [x, y] = d3.polygonCentroid([...c]);
if (isFinite(x) && isFinite(y)) {
p.centroid = [x, y];
const dx = x - p[0],
dy = y - p[1];
p[0] += dx * 0.6;
p[1] += dy * 0.6;
//if (minA === 0) p[2] = 0;
mutable debug = { t, points, centroid: [x, y] };
} else {
mutable debug = p;
}
//p[0] += (Math.random() - Math.random()) * 1;
//p[1] += (Math.random() - Math.random()) * 1;
}
chart.plot();
yield;
if (!running) return yield d3.polygonArea(cells[9]);
}
}
height = 500
random = Math.random
points = (reset,
[].concat(
Array.from({ length: 100 }, () => [
30 + (width - 60) * random(),
30 + (height - 60) * random(),
1 //random()
])
))
powerDiagram(points)
voro = d3
.weightedVoronoi()
.x(d => d[0])
.y(d => d[1])
.weight(d => d[2])
.clip([
[3 + width / 2, 3],
[width - 3, 3],
[width - 3, height - 3],
[3, height - 3]
])
powerDiagram = points => voro(points)
d3 = require("d3@6", "d3-weighted-voronoi@1")
import { checkbox } from "@jashkenas/inputs"
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.
