Overview

You write a chart one chained call at a time. Every call gives you a new state, and every state can move to the next one: VisDelta works out what changed and draws every frame in between.

import { bar } from 'visdelta/bar';
import { transition } from 'visdelta/transition';
import 'visdelta/style.css';

const products = [
  { product: 'Hardware', revenue: 12, profit: 5 },
  { product: 'Software', revenue: 18, profit: 11 },
  { product: 'Services', revenue: 9, profit: 7 },
  { product: 'Support', revenue: 6, profit: 4 },
];

const from = bar(products)
  .x('product', { label: 'Product line' })
  .y('revenue', { label: 'Revenue ($M)' });

const to = from.y('profit', { label: 'Profit ($M)' });

const change = await transition(from, to, { target: '#chart' });
change.play({ duration: 800 }); // or change.progress(0.5)

Drag the scrubber. Each position is a real chart: the bars, the axis and its title always agree. Press play again at the end and the same frames run backward.

Three ideasCopy Anchor Link

Every call is a state. bar(rows).x("product").y("revenue") describes a chart. It draws nothing and never changes. Add .y("profit") and you have the next state; the one before it is still there.

Any change can move. transition(a, b) matches the marks that stay, the ones that leave and the ones that arrive, and plans a route from one state to the next. sequence([a, b, c]) strings many states into one timeline.

Progress is just a number. progress(0.42) shows one frame. A button, a slider, scroll position or a timeline can supply that number. VisDelta never decides when.

What it is notCopy Anchor Link

It does not clean data, guess which field should be colour, or morph one chart type into another. A Bar state transitions to another Bar state.

Start hereCopy Anchor Link