Full-stack data visualizer.
That means I enjoy doing everything, from raw data to revealing & pretty interactive data visualizations.
<svg width="${width + 100}" height="${height + 100}" viewBox="-50 -50 ${width + 100} ${height + 100}">
<rect width="${width}" height="${height}" fill="none" rx="3" />
${getRandomGrid(width, height, step, amount, rndseed).map((dot) => svg`<circle cx="${dot[0]}" cy="${dot[1]}" r="${Math.max(3, (step / 5) * Math.random())}" fill="${dot[2]}"/>`)}
</svg>
colors = ['rgb(255, 140, 0)', 'rgb(255, 140, 0)', 'rgb(255, 215, 0)', 'rgb(255, 215, 0)', 'rgb(144, 238, 144)', 'rgb(144, 238, 144)', 'rgb(0, 206, 209)', 'rgb(0, 206, 209)']
// Hat tip to https://georgefrancis.dev/writing/crafting-organic-patterns-with-voronoi-tessellations/
getRandomGrid = (
width,
height,
step = 10,
amount = Math.round((width * height) / step ** 2),
rndseed = 1984
) => {
amount = amount >= 0 ? amount : Math.round((width * height) / step ** 2);
const rnd = almostRandom(rndseed);
const start = new Array(amount)
.fill(0)
.map(() => [rnd() * width, rnd() * height]);
const delaunay = Delaunay.from(start);
const voronoi = delaunay.voronoi([0, 0, width, height]);
const points = [];
for (let k = 0; k < relax; k++) {
for (let i = 0; i < delaunay.points.length; i += 2) {
const cell = voronoi.cellPolygon(i >> 1);
if (cell === null) continue;
const x0 = delaunay.points[i];
const y0 = delaunay.points[i + 1];
const [x1, y1] = polygonCentroid(cell);
delaunay.points[i] = x1;
delaunay.points[i + 1] = y1;
}
voronoi.update();
}
for (let i = 0; i < delaunay.points.length; i += 2) {
const c = colors[i%colors.length]
points.push([delaunay.points[i], delaunay.points[i + 1], c]);
}
return points;
}
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.
