Engineer & Educator | Observable Ambassador | Karaoke Enthusiast
FP Art III: Checkerboard
<svg id="art" style="/*border: 10px solid black; padding: 30px;*/ background-color: white" width=500 height=500 viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
${getTiles(100, 100, 5, 5, checkerTile, {
colors: ["orange", "hotPink"],
colorIndex: 0
})}
</svg>
function checkerTile(width, height, { colors, colorIndex }) {
return [
`<rect x=0 y=0 width=${width} height=${height} fill="${colors[colorIndex]}" />`,
{ colors, colorIndex: (colorIndex + 1) % colors.length }
];
}
function getTiles(width, height, cols, rows, makeTile, data) {
if (width === 0 || height === 0) {
return svg``;
}
const [colWidth, rowHeight] = [width / cols, height / rows];
const [thisTile, newData] = makeTile(colWidth, rowHeight, data);
return svg`${thisTile}
${
cols > 1
? // rest of this row to the right of this tile
svg`<g transform="translate(${colWidth}, 0)">
${getTiles(
width - colWidth,
rowHeight,
cols - 1,
1,
makeTile,
newData
)}
</g>`
: ``
}
${
rows > 1
? // rows below this one
svg`<g transform="translate(0, ${rowHeight})">
${getTiles(width, height - rowHeight, cols, rows - 1, makeTile, {
...newData,
tileIndex: newData.tileIndex + cols - 1
})}
</g>`
: ``
}
`;
}
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.
