canvas = {
const context = DOM.context2d(width, height);
const particles = Array.from({length: n}, () => [Math.random() * width, Math.random() * height]);
function update() {
const delaunay = d3.Delaunay.from(particles);
const voronoi = delaunay.voronoi([0.5, 0.5, width - 0.5, height - 0.5]);
context.clearRect(0, 0, width, height);
// context.beginPath();
// delaunay.render(context);
// context.strokeStyle = "#ccc";
// context.stroke();
context.beginPath();
voronoi.render(context);
voronoi.renderBounds(context);
context.strokeStyle = "#000";
context.stroke();
// context.beginPath();
// delaunay.renderPoints(context);
// context.fill();
}
context.canvas.ontouchmove =
context.canvas.onmousemove = event => {
event.preventDefault();
particles[0] = [event.layerX, event.layerY];
update();
};
update();
return context.canvas;
}
height = 200
n = 200
d3 = require("d3-delaunay@5")
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.
