Engineer & Educator | Observable Ambassador | Karaoke Enthusiast
Published
Edited
Jun 17, 2022
2 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">
${
rotate(
getTiles(150, 150, 5, 5, tiledTile, {
colors: ["orange", "hotpink"],
colorIndex: 0,
n: 5
}),
100
)
}
</svg>
function rotate(contents, width) {
return svg`<g transform="translate(${width / 2}, ${-width / 2}) rotate(45) ">
${contents}
</g>`;
}
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 tiledTile(width, height, data) {
const split = 0.7;
const [sWidth, sHeight] = [width, height].map((l) => l * split);
const newColorIndex =
data.n % 2 === 0
? data.colorIndex
: (data.colorIndex + 1) % data.colors.length;
const big = getTiles(sWidth, sHeight, data.n, data.n, checkerTile, data);
const narrow = getTiles(
width - sWidth,
sHeight,
data.n,
data.n,
checkerTile,
{ ...data, colorIndex: newColorIndex }
);
const wide = getTiles(sWidth, height - sHeight, data.n, data.n, checkerTile, {
...data,
colorIndex: newColorIndex
});
const small = getTiles(
width - sWidth,
height - sHeight,
data.n,
data.n,
checkerTile,
data
);
return [
svg`${big}
<g transform="translate(${sWidth}, 0)">${narrow}</g>
<g transform="translate(0, ${sHeight})">${wide}</g>
<g transform="translate(${sWidth}, ${sHeight})">${small}</g>
`,
data
];
}
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.
