Published
Edited
Feb 11, 2021
{
// styling with CSS
const container = html`<svg width="128" height="128" style="fill: none; stroke: blue;"><path fill="none" stroke="black" d="M1,20" /></svg>`;
const data = [8, 16, 24, 32, 40, 48, 56, 64, 72, 80, 88, 96, 104, 112, 120];
const circles = data.map(radius => svg`<circle cx="65" cy="75" r="${radius}"><animateMotion dur="10s" repeatCount="indefinite"></circle>`)
circles.forEach(circle => container.appendChild(circle));
return container
}
circl = html`<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
<path fill="none" stroke="lightgrey"
d="M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z" />
<circle r="5" fill="none" stroke="black">
<animateMotion dur="10s" repeatCount="indefinite"
path="M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z" />
</circle>
</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.
