Svelte Interaction Test

100%

Svelte Interaction Test

✓ Published0🌍 Public

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. Observe that the selected circle state persists across hot reloads (e.g. if you change a color). HT Matthias Stahl for the original example: Svelte + D3 Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Responsive Svelte Starter

This example demonstrates responsive SVG rendering with Svelte, showing six colored circles at varied positions and sizes that scale dynamically with the viewport. The visualization uses d3.scaleLinear to map data coordinates to pixel positions, while Svelte's bind:clientWidth and bind:clientHeight are used to track container dimensions. The circles are rendered with Svelte's each block, with opacity controlled via inline CSS calc. The dense dot pattern creates a colorful abstract composition that adapts to any screen size.

CCurran Kelleher

81% match

Loading thumbnail…

Svelte Circles with D3

This example combines Svelte’s reactive components with D3.js to render two distinct visualizations. The primary view displays an array of circles with varied radii and colors, scaled from raw coordinate data using d3.scaleLinear functions. The secondary component loads CSV data from a GitHub gist via d3.csv and renders it as a simple HTML list. The visualization demonstrates data binding through Svelte’s templating syntax alongside D3’s selection and scaling APIs, using SVG elements for the circle rendering.

AAbdulhaq Adetunji Salako

79% match

Loading thumbnail…

D3 Meetup: Svelte + D3

A collection of circles drawn with Svelte and D3 displays a static scatterplot on a gray SVG canvas. Each circle’s x and y positions are mapped from fixed data coordinates using `d3.scaleLinear`, while its fill color and radius come directly from the dataset. Clicking a circle highlights it with a red stroke by comparing the clicked datum against the current selection. The example demonstrates how to mix Svelte’s reactive bindings for container dimensions with D3’s scale functions for coordinate mapping.

MMatthias Stahl

79% match

Loading thumbnail…

Fork of Svelte + D3 Starter

This example shows a collection of six semi-transparent circles scattered across a warm orange-tinted background, each positioned by explicit x and y coordinates with varying radii and shades of blue. The circles are rendered as SVG elements within a 1000x500 viewport, using Svelte’s `{#each}` block to iterate over the static dataset defined in the component’s script. The visualization relies on Svelte’s reactive template syntax for declarative SVG attribute binding, while D3 is imported as a dependency but not actively used in this code. The circles are given a uniform opacity of 0.7, creating subtle overlaps that hint at layered relationships between the points.

SSafrin La Batu

79% match

Loading thumbnail…

Fork of Svelte + D3 Starter

This gallery example presents a set of colored circles scattered across a 1000x500 SVG canvas. A Svelte component iterates over an array of JavaScript objects, each containing x, y, radius, and fill color values, to render `<circle>` elements with a semi-transparent orange background. The visualization uses the Svelte `{#each}` block to map data to SVG shapes, with styling applied via CSS to achieve a 0.7 opacity level, demonstrating a minimal integration of D3 data structures within the Svelte framework.

CCurran Kelleher

78% match

Loading thumbnail…

Test

This example displays a set of colorful, semi-transparent circles scattered across a light green background. The circles vary in size, position, and color, creating a simple abstract composition. The code uses D3.js selection methods to bind static data to SVG circle elements, setting their coordinates, radius, and fill attributes. Rendered in a Svelte component, the visualization adjusts to the container’s dimensions for a flexible layout.

NNita

78% match

Loading thumbnail…

Svelte + D3 Starter

Six semi-transparent circles are drawn on a warm orange-tinted background, showing a simple static data visualization example of formatted points. The project demonstrates a minimal Svelte setup that integrates the D3 library, using Svelte’s `{#each}` block to render SVG `<circle>` elements directly from hardcoded data arrays. The `App.svelte` component defines the data and styling, while `index.js` mounts it via Svelte’s `mount` function, and the `package.json` configures D3 as a global dependency for the VizHub environment.

MMatthias Stahl

78% match

Loading thumbnail…

Fork of Svelte + D3 Starter

This example visualizes a small dataset of six circles, each positioned with explicit x and y coordinates and varying radii, to create a non-interactive scatterplot-like composition. The data is hardcoded in the Svelte component, and the circles are rendered as SVG elements via an `{#each}` block. The visualization uses a warm translucent orange background with semi-transparent circles, layering them to show overlaps and depth. It relies on Svelte’s built-in templating and styling, with no D3 API calls present, though the project is set up to import D3 as a dependency. The rendering approach is direct SVG manipulation through Svelte’s reactivity.

SSafrin La Batu

78% match