D3 Meetup: Svelte + D3

100%

D3 Meetup: Svelte + D3

✓ Published0🌍 Public

Last edited Nov 26, 2025

Created on Apr 26, 2024

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.

AI-generated description

Raw Svelte + D3 project

MIT Licensed

Similar vizzes

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

85% match

Loading thumbnail…

Circles with D3

This example uses D3 to draw a static set of colorful circles on a white background. The `select` function creates an SVG container, and the code binds an array of data objects to `circle` elements, setting each circle’s position, radius, and fill color via attributes. The circles vary in size and color, with an opacity of 0.708, arranged in a scattered pattern across the canvas. The implementation relies on D3’s data join method to render the shapes.

MM Hema

83% 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

82% match

Loading thumbnail…

Fork of Circles with D3

This example uses D3 to draw a set of six colorful circles on a light green SVG canvas, each with a distinct position, radius, and fill color. The rendered circles are semi-transparent, creating subtle overlaps. Built with Svelte, the code imports `select` from d3 and leverages a data array to bind circles to the SVG, setting attributes like `cx`, `cy`, `r`, `fill`, and `opacity`. The visualization demonstrates a basic data-join workflow with D3 in a Svelte component.

RRashmi Ranjan Sahani

81% match

Loading thumbnail…

Fork of Circles with D3

This example shows a playful array of six semi-transparent, brightly colored circles scattered across a pale green background. The visualization uses D3.js (version 7) to bind static data points—each specifying x and y coordinates, a radius, and a fill color—to SVG circle elements. The code leverages the `select` and `join` pattern to create the circles, setting their attributes directly from the bound data. The rendered result is a simple, colorful scatter-plot-like composition, demonstrating basic data binding and SVG manipulation with D3 in a Svelte environment.

Mmuslih_k_diy

81% 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

81% match

Loading thumbnail…

Circles

A static collection of six colored circles sits on a light green background, each with a distinct position, radius, and fill color. The visualization demonstrates basic D3.js shape rendering within a Svelte component using the `select` API to create an SVG canvas. Data is stored as an array of objects containing `x`, `y`, `r`, and `fill` properties, which are bound to `<circle>` elements via `attr` calls. The circles use a uniform opacity value of 0.708, creating a subtle translucency across all shapes.

Rrichard.adamson@hotmail.com

81% 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

81% match