points = {
let res = [];
for (let i = 0; i < 50; i ++) {
res.push(Math.random() * 400); // x
res.push(Math.random() * 400); // y
}
return res;
}
Delaunay = d3.Delaunay
delaunayD3 = new Delaunay(points)
voronoiD3 = delaunayD3.voronoi([0,0,400,400])
p5(s => {
s.setup = function () {
s.createCanvas(400,400);
s.background(255);
s.stroke(0);
s.noFill();
s.strokeWeight(5);
for (let i = 0; i < points.length; i += 2) {
s.point(points[i], points[i+1]);
}
s.strokeWeight(1);
s.stroke("red");
let ps = delaunayD3.points, halfedges = delaunayD3.halfedges, triangles = delaunayD3.triangles;
let hull = delaunayD3.hull;
for (let i = 0, n = halfedges.length; i < n; ++i) {
const j = halfedges[i];
if (j < i) continue;
const ti = triangles[i];
const tj = triangles[j];
s.line(ps[ti * 2], ps[ti * 2 + 1], ps[tj * 2], ps[tj * 2 + 1]);
}
for (let i = 1; i < hull.length; ++i) {
s.line(ps[hull[i-1] * 2], ps[hull[i-1] * 2 + 1], ps[hull[i] * 2], ps[hull[i] * 2 + 1]);
}
s.stroke("blue");
let voi = voronoiD3;
let inedges = delaunayD3.inedges;
let circumcenters = voronoiD3.circumcenters, vectors = voronoiD3.vectors;
for (let i = 0, n = halfedges.length; i < n; ++i) {
const j = halfedges[i];
if (j < i) continue;
const ti = Math.floor(i / 3) * 2;
const tj = Math.floor(j / 3) * 2;
const xi = circumcenters[ti];
const yi = circumcenters[ti + 1];
const xj = circumcenters[tj];
const yj = circumcenters[tj + 1];
s.line(xi, yi, xj, yj);
}
let h0, h1 = hull[hull.length - 1];
for (let i = 0; i < hull.length; ++i) {
h0 = h1, h1 = hull[i];
const t = Math.floor(inedges[h1] / 3) * 2;
const x = circumcenters[t];
const y = circumcenters[t + 1];
const v = h0 * 4;
const p = voronoiD3._project(x, y, vectors[v + 2], vectors[v + 3]);
if (p) s.line(x, y, p[0], p[1]);
}
}
})
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.
