Published
Edited
Jan 19, 2020
2 forks
11 stars
Word Tour: 40k words and their friendsHello, orbHello, cosmograph3D graph on a sphereFour-color world map with ClingoColorized Manhattan Spanning TreeShortest pathDijkstra’s algorithm in gpu.jsLloyd’s relaxation on a graphManhattan Voronoi IIManhattan DiameterManhattan VoronoiGraph VoronoiMobility landscapes — an introductionDijkstra’s shortest-path treeWorld Cities UrquhartProtein MatrixConvex Spectral WeightsDelaunay.findTriangleForce Simulation Web WorkerSave a Force-Directed Graph to localStorageHello BiofabricTravelling with a self-organizing mapLevenshtein transitionngraph: pagerank, louvain…
Unconnected Delaunay Neighbors
Also listed in…
Voronoi
function true_neighbors(voronoi, i) {
const n = [];
const ai = new Set((voronoi.cellPolygon(i) || []).map(String));
for (const j of voronoi.delaunay.neighbors(i))
for (const c of voronoi.cellPolygon(j) || [])
if (ai.has(String(c))) n.push(j);
return n;
}
{
const context = DOM.context2d(width, height),
path = d3
.geoPath()
.context(context)
.pointRadius(3);
function render(i) {
context.clearRect(0, 0, width, height);
if (i === +i) {
context.fillStyle = "lime";
context.beginPath();
voronoi.renderCell(i, context);
context.fill();
const Y = true_neighbors(voronoi, i),
U = [...delaunay.neighbors(i)].filter(j => !Y.includes(j));
context.fillStyle = "yellow";
context.beginPath();
for (const j of U) voronoi.renderCell(j, context);
context.fill();
context.fillStyle = "#ccffcc";
context.beginPath();
for (const j of Y) voronoi.renderCell(j, context);
context.fill();
context.beginPath();
for (const j of delaunay.neighbors(i)) {
context.moveTo(...points[i]);
context.lineTo(...points[j]);
}
context.strokeStyle = "green";
context.stroke();
}
context.strokeStyle = "#000";
context.beginPath();
voronoi.render(context);
voronoi.renderBounds(context);
context.stroke();
context.fillStyle = "black";
context.beginPath();
path({ type: "MultiPoint", coordinates: points });
context.fill();
}
render(4);
return d3
.select(context.canvas)
.on("mousemove", function() {
const m = d3.mouse(this),
i = delaunay.find(...m);
render(i);
})
.node();
}
m = 1
voronoi.cellPolygon(0)
delaunay = d3.Delaunay.from(points)
voronoi = delaunay.voronoi([m, m, width - m, height - m])
width = 500
height = width
d3 = require("d3@5", "d3-delaunay@5")
rng = {
const frac = x => x - Math.floor(x);
let i = 0.1,
a = 0;
return () => (a = frac((1 + Math.sin(++i) + a) * 100000));
}
points = Array.from({ length: 200 }, () => [rng() * width, rng() * height])
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.
