Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Fork of Svelte + D3: Canvas & renderless components

Public visualization

Viewing a saved revision (read-only)

22fc958f75644954a714ab6e960761b0

Fork of Svelte + D3: Canvas & renderless components

0 stars0🌍 Public
Rrudi.oreillymeehan@gmail.com
Last edited Oct 1, 2024
Created on Oct 1, 2024

This example shows 34,000 circles on a canvas, each updated every five seconds with random positions and radii. A Svelte renderless component system separates canvas management from rendering logic: a canvas component provides a draw context, while circle components register individual draw functions and use Svelte's `tweened` motion with `cubicOut` easing to animate transitions between data updates. The visualization uses D3's `scaleLinear` and `scaleSequential` with `interpolateMagma` to map random values to coordinates and colors.

AI-generated description