open web tools for creativity and community
Published
Edited
Oct 11, 2019
5 stars
Also listed in…
plotter
{
const size = columnCount * columnWidth;
const translate = rainbowColors.length;
const paths = [];
mutable percentDone = 0;
yield html`<svg width="${size}" height="${size}"></svg>`;
await Promises.tick(1000);
for (const path of pathExpansions(labyrinthPath, rainbowColors)) {
paths.push(path);
mutable percentDone = Math.round(
(paths.length / rainbowColors.length) * 100
);
// The oscillator example & explanation made this click: https://observablehq.com/@mbostock/generator-cells-functions-and-objects#oscillator
yield html`
<svg width="${size}" height="${size}">
<g transform="translate(${translate}, ${translate})">${paths}</g>
</svg>
`;
await Promises.tick(1000);
}
}
function* pathExpansions(path, colors) {
for (let i = 0, len = colors.length; i < len; i++) {
const color = colors[i];
const expandBy = len - i - 1 + 0.0001;
const d = i === len - 1 ? path : expandPath(path, expandBy);
yield svg`<path fill="none" stroke="${color}" stroke-width="1" d="${d}" />`;
}
}
columnWidth = rainbowColors.length * 4 + 4
labyrinthPath = simplifyPath(
boardToPathString(
solveSync(seed, makeInitialBoard(columnCount), columnCount),
columnCount, columnWidth
)
)
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
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.
