Skip to main content
100%

Fork of Svelte + D3: Reveal area chart

✓ Published0🌍 Public
NNita
Last edited Jan 30, 2024
Created on Jan 30, 2024

This example presents a colorful line and area chart that visualizes sequential numeric data across 63 points, with the area beneath the curve filled in pink. The visualization reveals itself through a sliding animation: a dark rectangle moves from left to right across the chart, initially allowing viewers to see only the line, then progressively uncovering the filled area beneath. The implementation uses Svelte for reactive bindings and D3 v7 APIs including `scaleLinear`, `extent`, `line`, `area`, and `curveCatmullRom` for smooth path generation. The SVG rect animation is driven by a CSS keyframe that translates its position across the viewport.

AI-generated description
MIT Licensed

Similar vizzes