Ph.D. Student at UC Berkeley EECS. Prev. @FormidableLabs.
Public
Edited
Jun 9, 2021
1 star
foldingFans = ({ gridSideLength, cellSize }) => () => new Array(10).fill().map((_, i) => {
const x1 = i * (cellSize - 2 * padding) / 10 + padding;
const y1 = padding;
const x2 = cellSize - padding;
const y2 = cellSize - padding;
return (
svg`
<line x1=${x1} y1=${y1} x2=${x2} y2=${y2} stroke="steelblue" />
`
);
});
grid({ gridSideLength: 9, cellSize: 40, children: foldingFans });
polygonRandomWalks = ({ gridSideLength, cellSize }) => () => new Array(1).fill().map((_, i) => {
// Get a random integer between 0 and 7.
// Ensure we have at least 3 sides so we have a polygon.
const numSides = Math.floor(Math.random() * 8) + 3;
let path = `M${padding},${padding}`;
for (let i = 0; i < numSides; i++) {
const { Lx, Ly } = {
Lx: Math.floor(Math.random() * (cellSize - 2 * padding)) + padding,
Ly: Math.floor(Math.random() * (cellSize - 2 * padding)) + padding,
};
path += ` L${Lx},${Ly}`;
}
path += ' Z';
return (
svg`
<path d="${path}" stroke="steelblue" fill="none" />
`
);
});
grid({ gridSideLength: 9, cellSize: 40, children: polygonRandomWalks });
grid = ({ gridSideLength, cellSize, children }) => {
const cells = new Array(gridSideLength ** 2).fill().map((_, i) => {
const x = i % gridSideLength * cellSize;
const y = Math.floor(i / gridSideLength) * cellSize;
return (
svg`
<g transform="translate(${x}, ${y})">
<rect
x="${padding}"
y="${padding}"
height="${cellSize - padding * 2}"
width="${cellSize - padding * 2}"
fill="#ffffff"
stroke="steelblue"
/>
${children({ gridSideLength, cellSize })()}
</g>
`
);
});
const width = cellSize * gridSideLength;
const height = cellSize * gridSideLength;
return (
svg`
<svg width="${width}" height="${height}" viewBox="0 0 ${width} ${height}">
${cells}
</svg>
`
)
};
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.
