Animated line graph implementations

This repository showcases three self-contained ways to build the same animated KPI line chart using modern web technologies. Every option reproduces the same visual language:

• Smooth line travelling from left to right with six intermediate points and an emphasized "Today" dot.
• Area wash underneath the line and a masked drop shadow that fades before the final point.
• Sequenced point/label reveals and a pill-shaped "Today" callout that lifts into place once the animation finishes.

Each implementation lives in its own folder inside options/. Open the respective index.html file in a browser (or serve the folder with any static file server) to preview the result.

Note All three examples share the same data set and spacing so that you can switch between approaches without visual drift.

Option 1 – Pure SVG + CSS (options/svg)

The SVG build uses CSS keyframe animations plus a small setup script to generate Catmull–Rom control points, populate the circles, and trim the line-shadow clip just before "Today".

• Highlights: Compact, dependency-free, and every visual element is an SVG primitive, so the chart is infinitely scalable. The shading before "Today" is achieved with an SVG filter clipped by a rectangle that stops short of the last point.
• Benefits: Great for component libraries and design systems where markup is authored ahead of time. Styling is entirely CSS-driven, making it easy to theme with custom properties.
• Challenges: Generating smooth curves and calculating stroke-dasharray lengths requires manual math in JavaScript. Interaction logic can grow verbose as requirements expand.

Option 2 – Canvas API (options/canvas)

The Canvas version renders the chart procedurally with requestAnimationFrame. Sampled spline points drive the drawing of the area, line, shadow, and circles so the animation progresses in perfect sync.

• Highlights: Uses canvas clipping to keep the shadow from appearing past the "Today" x-position and scales crisply on high-DPI screens by accounting for the device pixel ratio. The supporting HTML handles the floating callout.
• Benefits: Ideal for high-volume dashboards where thousands of data points need to animate without heavy DOM updates. Fine-grained frame control makes it easier to coordinate custom easing and particle effects.
• Challenges: Canvas is stateful—responsibility for redraws, hit-testing, and accessibility falls entirely on the developer. The chart must be re-rendered on resize to maintain pixel-perfect positioning.

Option 3 – D3.js (options/d3)

This approach layers the visuals with D3’s declarative API and leverages its built-in easing/transition helpers.

• Highlights: D3’s line and area generators (with curveCatmullRom) produce the smooth spline, while staggered transitions animate the path, shadow, points, and labels. The drop shadow reuses the same clip-mask strategy as the SVG version.
• Benefits: Perfect for data-heavy applications that already depend on D3. Scales, generators, and transitions remove a lot of boilerplate compared to a handwritten implementation.
• Challenges: Requires shipping the D3 runtime (loaded from jsDelivr in this demo). Bundle size and load performance should be weighed if the rest of the stack does not already include D3.

Running locally

Because each option is static HTML/CSS/JS, you can:

1. cd into the desired folder under options/.
2. Start a simple server (npx serve ., python3 -m http.server, etc.) or open index.html directly in a browser.

The D3 build uses an ES module import from a CDN, so an internet connection is required unless you swap in a local copy of the library.