Engineer & Educator | Observable Ambassador | Karaoke Enthusiast
Published
Edited
Jun 17, 2022
3 stars
<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, basicTile, {
color: "orange",
tileIndex: 0,
label: false // set to true to check that each tile gets a different tileIndex
})}
</svg>
function basicTile(width, height, { color, tileIndex, label = false }) {
return [
`<rect width=${width} height=${height} stroke="black" fill="${color}" />
${
label &&
`<text x=2 y=15 style="font: bold 12px monospace">${tileIndex}</text>`
}`,
{ color, tileIndex: tileIndex + 1, label }
];
}
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.
