Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Svelte Interaction Test

Public visualization

Viewing a saved revision (read-only)

4ade2e9f47484db1b1d20d2b777f7d0a

Svelte Interaction Test

0 stars0🌍 Public
CCurran Kelleher
Last edited Jul 25, 2024
Created on Jul 24, 2024

This example demonstrates interactive selection within a visualization built using Svelte and SVG, where clicking a circle highlights it with a thick black stroke. The circles, positioned with fixed coordinates and varied sizes and colors, respond to user clicks through a Svelte event handler that updates a `selectedId` in the component's state. It showcases a proof-of-concept for wrapping Svelte components via d3-rosetta, allowing state persistence across hot reloads while leveraging Svelte's reactive data binding for the visual update.

AI-generated description

A proof-of-concept for authoring interactive visualization modules with Svelte and D3, while being able to wrap them as components in any JS framework via d3-rosetta.

Click on a circle to highlight it.