Creative Technologist, Data Visualizer and HCI researcher.
render = svg`<svg width="${w}" height="${h}">
<rect x="0" y="0" width="${w}" height="${h}" stroke="none" fill="black"></rect>
<g>
${array(n)
.map((i) => {
const angle = (TAU * i) / n;
const pos = PVector(w / 2, h / 2).add(
PVector()
.setMag(
w / 3 +
80 * simplex.noise3D(Math.cos(angle), Math.sin(angle), seed)
)
.rotateBy(angle)
);
return `<circle
cx="${pos.x}"
cy="${pos.y}"
r="${
simplex.noise3D(pos.x / noiseScale, pos.y / noiseScale, seed) * 100 +
80
}"
stroke="${colorScale(i / n)}"
opacity=0.5
fill="none"
/>`;
})
.join("\n")}
</g>
</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.
