Cofounder/CTO @ SceneThink; DataViz @ Northeastern; Ph.D. in Computer Science @ UVA 2011
canvas = {
const context = DOM.context2d(width, height);
for (let i = 6, n = points.length; i < n; i *= 1.01) {
const delaunay = new d3.Delaunay(points.subarray(0, Math.floor(i >> 1) << 1));
const voronoi = delaunay.voronoi([0, 0, width, height]);
context.clearRect(0, 0, width, height);
context.beginPath(), delaunay.renderPoints(context, 1), context.fill();
context.beginPath(), voronoi.render(context), context.stroke();
yield context.canvas;
}
}
points = Float32Array.from((function*() {
for (let i = 0.5, r; (r = spacing * Math.sqrt(i)) < radius; ++i) {
const a = i * theta;
const x = width / 2 + r * Math.cos(a);
if (-spacing > x || x > width + spacing) continue;
const y = height / 2 + r * Math.sin(a);
if (-spacing > y || y > height + spacing) continue;
yield x;
yield y;
}
})())
spacing = 5
radius = Math.sqrt(width * width + height * height) / 3 + spacing
theta = Math.PI * (1 - Math.sqrt(2))
height = width
d3 = require("d3-delaunay@4")
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.
