Visualization toolmaker. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock.
canvas = {
const context = DOM.context2d(width, height);
const coordinates = new Float64Array(points.length * 2);
const voronoi = new d3.Delaunay(coordinates).voronoi([0, 0, width, height]);
while (true) {
const z = performance.now() * 0.0001;
context.clearRect(0, 0, width, height);
for (let i = 0, j = -1; i < points.length; ++i) {
const [x, y] = points[i];
const t = noise(x * config.f, y * config.f, z) * Math.PI;
coordinates[++j] = x + config.l * Math.cos(t);
coordinates[++j] = y + config.l * Math.sin(t);
}
context.beginPath();
voronoi.update().render(context);
context.stroke();
yield context.canvas;
}
}
height = 600
points = d3.hexbin()
.radius(config.s)
.extent([[-config.l, -config.l], [width + config.l, height + config.l]])
.centers()
noise = {
const simplex = new (await require("simplex-noise@2"));
return simplex.noise3D.bind(simplex);
}
d3 = require("d3-hexbin@0.2", "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.
