Chart change,
animated.

Write two states of a chart. VisDelta works out what changed and draws every frame in between — forward, backward, or wherever you scroll.

Get startedOpen the playground →npm i visdelta
state.jsediting itself
const chart = bar(rows)
  .x("year")
  .y("sites")
  .breakdown("country");
Loading VisDelta

Progress is just a number

Scroll is a timeline.

Keep scrolling. Your scroll position is the progress, so reading back up plays the same frames in reverse.

  1. 01

    Revenue by product.

    One state: data, mappings, nothing else.

    const a = bar(rows).x("product").y("revenue");
  2. 02

    Show profit instead.

    One line changes. The bars, the axis and its title move as one.

    const b = a.y("profit");
  3. 03

    Rank it.

    The same bars, in a new order. No data changes.

    const c = b.sort("profit", "descending");
  4. 04

    Point at two of them.

    Nothing leaves the chart. Only attention moves.

    const d = c.highlight({ product: ["Software", "Cloud"] });

The idea

Two states
Describe the chart before and after. States are plain, immutable values.
One transition
VisDelta matches the marks and plans a route where every frame is a real chart.
Any frame
Play it, reverse it, or seek straight to progress 0.42. Your code decides when.