Consultant Designer & Developer
sketch = svg`<svg viewBox=${[0, 0, dimensions.width, dimensions.height]}
width=${dimensions.width}
height=${dimensions.height}>
<rect
width=${dimensions.width}
height=${dimensions.height}
fill=${palette.bg}></rect>
<circle
cx=${math.lerp(0, dimensions.width, uv[0])}
cy=${math.lerp(0, dimensions.height, uv[1])}
r=10></circle>
</svg>`
md`[Link to this variation](${getNotebookUrlWithParams({
seed: randomize
})})<br> You can get back to this particular generated graphic using this link.`
uv = [rnd.value(), rnd.value()]
aspectRatio = 4 / 3
dimensions = {
const w = Math.max(480, width);
const h = Math.floor(width / aspectRatio);
return {
aspectRatio,
width: w,
height: h
};
}
palette = ({
bg: "hsl(0,0%,95%)",
fg: "hsl(0,0%,5%)"
})
rnd = CSRandom.createRandom(randomize)
svg = htl.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.
