Public
Edited
Mar 31, 2024
Importers
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)Paths Delaunay hoverVoronoiMap2DPolygon 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
Self-Organizing Maps meet Delaunay
dimensions = ["r", "g", "b"]
randomDatum = () =>
Object.fromEntries(dimensions.map(d => [d, Math.random() * 255]))
data = Array.from({ length: 3000 }, randomDatum)
distance = (a, b) => Math.hypot(...dimensions.map(d => a[d] - b[d]))
neurons = Array.from({ length: 308 }, randomDatum, replay)
positions = neurons.map(randomPoint) // see implementation below
voronoi = d3.Delaunay.from(positions).voronoi([0, 0, width, height])
// Any function or generator that lists the neighbors of a node is good to use
// see https://observablehq.com/@d3/voronoi-neighbors
neighbors = i => voronoi.neighbors(i)
bmu = d => d3.leastIndex(neurons, u => distance(u, d))
learning_rate = .1
function step(i) {
const d = data[i];
// find the BMU and update it
const u = bmu(d);
update_neuron(u, d, learning_rate);
// update its neighbors too, more gently
for (const n of neighbors(u)) update_neuron(n, d, .25 * learning_rate);
return u;
}
function update_neuron(u, d, alpha) {
const a = neurons[u];
for (const i of dimensions) a[i] += alpha * (d[i] - a[i]);
}
function* run() {
const t = 1 / 200, // sampling for change%
target = 0.05; // target change%
let change = 1,
i = 0;
do {
// select a data point to update
const n = i++ % data.length;
const u = step(n);
// log the number of unhappy data points
change = (change + t * (u !== bmus[n])) / (1 + t);
bmus[n] = u;
// draw this step (progressive time)
if (Math.sqrt(i) % 1 === 0) {
draw();
yield `step ${i}, change rate: ${(change * 100).toFixed(1)}%`;
}
// stop when less than 5% of the recently examined data points are unhappy
} while (change > target && i < 100000);
draw();
yield `stopped after ${i} steps, change: ${(change * 100).toFixed(1)}%`;
}
randomPoint = {
const positions = [...pick2d(width + 30, height, neurons.length, topology)];
return (_, i) => [
positions[i % positions.length][0],
positions[i % positions.length][1] + Math.random()
];
}
bmus = (neurons, Int32Array.from(data).fill(-1))
mutable replay = -1 // ensure neurons, positions, bmus are reset
(show, draw()) // redraw the map when the color selector is clicked
height = 600
import { pick2d } from "@fil/2d-point-distributions"
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.
