Skip to main content
SimilarExport ZIP
100%

Responsive Svelte Starter

✓ Published2🌍 Public
CCurran Kelleher
Last edited Feb 13, 2024
Created on Jan 26, 2024

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.

AI-generated description

A demo of responsive Svelte! Code by Matthias Stahl from

https://github.com/higsch/svelte-d3-training/blob/main/scales/src/App.svelte

To observe the responsiveness, check out the full screen mode here:

https://vizhub.com/curran/26dd15730f5544919995d21d135c6ff2?mode=embed

See also this video:

MIT Licensed

Similar vizzes

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
88% 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
87% match
Loading thumbnail…

Fork of Svelte Starter

A Svelte component renders six colored circles of varying sizes and positions on a 1000×500 SVG canvas, with each circle’s coordinates, radius, and fill color defined in an inline data array. The circles use a fixed opacity of 0.708 applied via CSS, over a light green background. The example demonstrates Svelte’s `{#each}` block for iterating over data to generate SVG elements, with the D3 library loaded as a dependency but unused in the visible rendering logic.

GGnome Fire
86% match
Loading thumbnail…

Fork of Svelte + D3 Starter

Six translucent circles of varying sizes and colors from a blue palette are overlaid on a warm orange-tinted SVG canvas. The circles’ positions, radii, and fills come from hardcoded JavaScript objects, rendered as SVG `<circle>` elements via Svelte’s `{#each}` block. The example demonstrates a minimal Svelte component using declarative markup, with styling applied through a scoped `<style>` tag, while D3 is loaded as a dependency but not used in the visible code.

Rrichard.adamson@hotmail.com
86% 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
85% match
Loading thumbnail…

Svelte app

A real-time animated wave of 50 circles and connecting lines renders in an SVG, with vertical positions computed by a sinusoidal function of time. The Svelte 3 component uses `requestAnimationFrame` to update the array of numbers each frame, while `{#each}` blocks bind the data to circle and line elements. This experiment demonstrates reactive updates in Svelte for smooth, declarative animation without explicit DOM manipulation.

CCurran Kelleher
84% match
Loading thumbnail…

Fork of Circles with D3

This example displays six semi-transparent circles of varying sizes and colors scattered across a pale green background. The circles are drawn using D3’s data join pattern within a Svelte component. The code imports `select` from D3, sets the SVG dimensions to match the container, and binds an array of position, radius, and fill values to each circle. Rendering is handled reactively when the container’s size changes, with opacity fixed at 0.708.

Rrichard.adamson@hotmail.com
82% match
Loading thumbnail…

Fork of Circles with D3

This example displays six semi-transparent circles of varying sizes and colors scattered across a pale green background. The circles are drawn using D3’s data join pattern within a Svelte component. The code imports `select` from D3, sets the SVG dimensions to match the container, and binds an array of position, radius, and fill values to each circle. Rendering is handled reactively when the container’s size changes, with opacity fixed at 0.708.

Rrichard.adamson@hotmail.com
82% match