Building @cloudflare Workers.
Published
Edited
Sep 14, 2020
1 star
squares4 = {
// Add the animation value, which is updated every 100ms, in order to force
// re-calculation and re-rendering of the entire canvas.
const wonk = () => (Math.random() - 0.5 + animation) * wonkiness;
const square = (x, y, column) => {
const startx = x + wonk() * column;
const starty = y + wonk() * column;
return svg`
<path d="M ${startx} ${starty}
L ${x + wonk() * column} ${y + squareSize + wonk() * column}
L ${x + squareSize + wonk() * column} ${y +
squareSize +
wonk() * column}
L ${x + squareSize + wonk() * column} ${y + wonk() * column}
L ${startx} ${starty} z"
fill="none" stroke="black"/>
`;
};
const squares = squarePositions2
.map(({ x, y, column }) =>
// For this position we overlay N squares, where N is column + 1.
new Array(column + 1).fill(1).map(() => square(x, y, column + 1))
)
.flat(); // Use flat() to transform an array of arrays into a single flat array of svgs
return svg`<svg width=${width} height=${rows *
squareSize *
1.3}>${squares}</svg>`;
}
squares3 = {
const wonk = () => (Math.random() - 0.5) * wonkiness;
const square = (x, y) => {
const startx = x + wonk();
const starty = y + wonk();
return svg`
<path d="M ${startx} ${starty}
L ${x + wonk()} ${y + squareSize + wonk()}
L ${x + squareSize + wonk()} ${y + squareSize + wonk()}
L ${x + squareSize + wonk()} ${y + wonk()}
L ${startx} ${starty} z"
fill="none" stroke="black"/>
`;
};
const squares = squarePositions.map(({ x, y }) => square(x, y));
return svg`<svg width=${width} height=${rows *
squareSize *
1.3}>${squares}</svg>`;
}
squares = {
const svg = DOM.svg(width, rows * squareSize * 1.2);
d3.select(svg)
.selectAll("rect")
.data(squarePositions)
.enter()
.append("rect")
.attr("x", square => square.x)
.attr("y", square => square.y)
.attr("width", squareSize)
.attr("height", squareSize)
.attr("stroke", "black")
.attr("fill", "none");
return svg;
}
svg`<svg width=${width} height=150>
<path d="M 20 20 L 20 120 L 120 120 L 120 20 L 20 20 z" fill="none" stroke="black"/>
</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.
