Visualization toolmaker. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock.
Published
Edited
Sep 1, 2019
2 forks
8 stars
{
const points = [];
const r = radius * Math.sqrt(8 / Math.sqrt(3));
const dx = r;
const dy = r * 3 / (4 * Math.sin(Math.PI / 3));
for (let j = 0, y = 0; y < height + r; y += dy, ++j) {
for (let x = (j & 1) * dx / 2; x < width + r; x += dx) {
points.push([x, y]);
}
}
return voronoi(points);
}
{
const points = [];
const r = radius * 2;
const dx = r;
const dy = r;
for (let y = 0; y < height + r; y += dy) {
for (let x = 0; x < width + r; x += dx) {
points.push([x, y]);
}
}
return voronoi(points);
}
{
const points = [];
const r = radius * Math.sqrt(4 / Math.sqrt(3));
const dx = r;
const dy = r * Math.sqrt(3);
const dr = r / Math.sqrt(12);
for (let j = 0, y = 0; y < height + r; y += dy, ++j) {
for (let i = 0, x = 0; x < width + r; x += dx, ++i) {
points.push([x, y + (j & 1 ^ i & 1 ? -1 : +1) * dr]);
}
}
return voronoi(points);
}
function voronoi(points, name) {
const delaunay = Delaunay.from(points);
const voronoi = delaunay.voronoi([0, 0, width, height]);
const context = DOM.context2d(width, height);
context.beginPath();
voronoi.render(context);
context.strokeStyle = "black";
context.lineWidth = 1.5;
context.stroke();
context.beginPath();
delaunay.renderPoints(context, 1.5);
context.fill();
return context.canvas;
}
radius = 16
height = 640
Delaunay = (await require("d3-delaunay@5")).Delaunay
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.
