Fork of Svelte + D3: Reveal area chart
✓ Published0🌍 Public
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 descriptionMIT Licensed