Viewing a saved revision (read-only)
4a7769104dc64ceb918cc776051075fa
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`.
AI-generated descriptionA 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: