Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Svelte + D3: Random Lines

Public visualization

Viewing a saved revision (read-only)

bf85bc1493554b8bbd890e2f00134b36

Svelte + D3: Random Lines

2 stars3🌍 Public
MMatthias Stahl
Last edited Nov 26, 2025
Created on Jan 29, 2024

This example generates fifty random-walk lines, each drawn as a smooth, semi-transparent colored path that re-randomizes every two seconds. Svelte’s `tweened` motion and `interpolatePath` from d3-interpolate-path animate the transition between the old and new line shapes. The code uses D3’s `scaleLinear`, `line`, and `curveNatural` to map data points to SVG coordinates, while Svelte’s `bind:clientWidth` and `bind:clientHeight` make the visualization responsive to container 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: