view = {
const context = DOM.context2d(width, height);
context.clearRect(0, 0, width, height);
context.fillStyle = "black";
context.beginPath();
voronoi.delaunay.renderPoints(context, 1);
context.fill();
context.lineWidth = 1.5;
const segments = voronoi.render().split(/M/).slice(1);
let i = 0;
for (const e of segments) {
context.beginPath();
context.strokeStyle = d3.hsl(360 * Math.random(), 0.7, 0.5);
context.stroke(new Path2D("M" + e));
if (i++ % 5 === 0) yield context.canvas;
}
}
voronoi = new d3.Delaunay(positions).voronoi([1, 1, width - 1, height - 1])
n = 1500
height = Math.min(600, width)
positions = {
replay;
const randomX = d3.randomNormal(width / 2, height / 3);
const randomY = d3.randomNormal(height / 2, height / 3);
return Float64Array.from({length: n * 2}, (_, i) => i & 1 ? randomY() : randomX())
}
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.
