Visualization toolmaker. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock.
Published
Edited
Mar 10, 2019
1 fork
27 stars
canvas = {
const context = DOM.context2d(width, height);
const polygons = Array.from(new d3.Delaunay(points).voronoi([0, 0, width, height]).cellPolygons());
for (let i = 0; i < iterations; i++) {
context.beginPath();
for (const P of polygons) {
context.moveTo(...P[0]);
for (let j = 1, m = P.length; j < m; ++j) context.lineTo(...P[j]);
context.closePath();
const p0 = P.shift();
const p1 = P[0];
const t = Math.min(0.5, 4 / Math.hypot(p0[0] - p1[0], p0[1] - p1[1]));
const p2 = [p0[0] * (1 - t) + p1[0] * t, p0[1] * (1 - t) + p1[1] * t];
P.push(p2);
}
context.fillStyle = d3.interpolateCubehelixDefault(i / iterations);
context.fill();
yield context.canvas;
}
}
points = Array.from({length: n << 1}, (_, i) => Math.random() * (i & 1 ? height : width))
iterations = 500
n = 100
height = Math.max(600, width)
d3 = require("d3-delaunay@4", "d3-scale-chromatic@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.
