{
// styling with CSS
const container = html`<svg width="300" height="300" style="fill: none; stroke: green;"></svg>`;
const data = [8, 24, 40, 56, 72, 88, 104, 120];
const circles = data.map(radius => svg`<circle r=${radius} cx=${radius} cy=${radius} r=${radius}></circle>`)
circles.forEach(circle => container.appendChild(circle));
return container
// styling with CSS
const container1 = html`<svg width="300" height="300" style="fill: none; stroke: red;"></svg>`;
const data1 = [8, 16, 24, 32, 40, 48, 56, 64, 72, 80, 88, 96, 104, 112, 120];
const circles1 = data1.map(radius => svg`<circle1 cx="50" cy="50" r="50"></circle1>`)
circles1.forEach(circle1 => container.appendChild(circle1));
return container1
}
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.
