Web developer and autodidact with an interest in creative coding.
{
const w = width, h = w * .6, mx = w/2 * margin, my = h/2 * margin;
const path = gridPath(count, count, w - mx * 2, h - my * 2, false);
return htl.svg`<svg width=${w} height=${h}>
<path stroke=#555 d="M${mx},${my}${path}" />
`;
}
function gridPath(cols, rows, width = 1, height = 1, initPosition = true) {
// Line distances.
const sx = width / cols, sy = height / rows;
// Horizontal and vertical path segments, joined by relative move commands.
const px = Array(rows+1).fill(`h${width}`).join(`m${-width},${sy}`);
const py = Array(cols+1).fill(`v${height}`).join(`m${sx},${-height}`);
// Paths require an initial move command. It can be set either by this function
// or prepended to the returned path.
return `${initPosition ? 'M0,0' : ''}${px}m${-width}${-height}${py}`;
}
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.
