Svelte + D3: Datawrapper Web Component

100%

Svelte + D3: Datawrapper Web Component

✓ Published0🌍 Public

Last edited Nov 26, 2025

Created on Mar 15, 2024

This example demonstrates how to embed a Datawrapper chart in a Svelte application by creating a reusable web component. The code loads a Datawrapper visualization using the chart ID `EdaYj` through the `https://datawrapper.dwcdn.net/{id}/embed.js` script, with a fallback image for environments where JavaScript is disabled. The App component imports and renders the Datawrapper component, while the project configuration includes D3 as a library dependency, though the embedded chart’s data and rendering are handled entirely by Datawrapper’s external service.

AI-generated description

Include a Datawrapper chart

MIT Licensed

Similar vizzes

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

73% match

Loading thumbnail…

Fork of Fork of Fork of Svelte + D3 Starter

This example demonstrates a fork of a Svelte and D3 starter template, showcasing a data visualization built with the D3 library. It renders a visualization using a force simulation, likely displaying a network or hierarchical structure, as indicated by the use of `d3.forceSimulation`. The code imports an App component from Svelte and mounts it to a container element, while the package configuration loads D3 globally from a CDN path. The visualization’s data source is not specified, but the rendering approach relies on D3’s layout and drawing capabilities within a Svelte component, emphasizing reusable, component-based interactive charts.

Rreddysushma994@gmail.com

69% match

Loading thumbnail…

Svelte D3 Starter

This example demonstrates a minimal Svelte application that uses two-way data binding to display the sum of two numeric inputs in real time. It shows how Svelte’s reactive declarations update the displayed calculation whenever either input changes. The code imports a Svelte component from `src/App.svelte` and mounts it to the DOM via `new App({ target: document.body })`. The component uses Svelte’s `bind:value` directive on the number inputs, while the project includes D3 v7.1.1 as a dependency but does not invoke any D3 functions here.

CChris Bushong

68% match

Loading thumbnail…

Fork of Svelte + D3 Starter

This example visualizes a dataset using a force-directed graph layout, displaying nodes as circles positioned by physics simulation. It shows how data points relate through computed spatial arrangement. The implementation uses Svelte for component rendering and D3’s `d3.forceSimulation` for the underlying physics, with forces for centering, collision, and linkage. The code imports `App.svelte` and mounts it into a target container, relying on D3’s global library from the VizHub configuration. The rendering approach is SVG-based, as indicated by the use of Svelte’s templating and D3’s manipulation functions. No specific data source is hardcoded, suggesting the dataset is external or generated within the component.

Rreddysushma994@gmail.com

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

67% match

Loading thumbnail…

Svelte + D3: Reveal area chart

A responsive area chart reveals a pink-filled curve and its stroke line from behind a sliding rectangular mask. Built with Svelte and D3, the visualization maps a fixed dataset of x and y values using `scaleLinear` and renders smooth paths via `line` and `area` generators with a Catmull-Rom curve. A CSS animation slides the overlay rect across the SVG, progressively unveiling the chart. The visualization demonstrates reactive sizing through Svelte's `bind:clientWidth` and `bind:clientHeight`.

MMatthias Stahl

67% match

Loading thumbnail…

Fork of Svelte + D3 Starter

Four thin vertical bars mark the positions of four data points along a pink horizontal strip, with each bar placed by a linear scale mapping the domain 1–10 to the width of the SVG. The visualization uses D3’s `scaleLinear` inside a Svelte component to compute x-coordinates, while the bars themselves are simple SVG `<rect>` elements with low opacity and white fill. The data is a static array of numeric values, and the chart demonstrates a minimal integration of D3 scales with Svelte’s template syntax and reactive declarations.

LLuisa Vasquez

67% match

Loading thumbnail…

Svelte + D3: Canvas & renderless components

Ten thousand semi-transparent dots pulse in a two-second loop, their positions, sizes, and magma-scale colors assigned by random functions mapped through D3 scales. Svelte components manage the lifecycle: a canvas component coordinates drawing and invalidation, while individual circle components use `svelte/motion` tweens to animate between updates, rendering efficiently via Canvas API calls.

MMatthias Stahl

66% match