Quick start
Your first transition in four steps.
Preparing transition
Describe a chart
import { bar } from 'visdelta/bar';
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 a = bar(products)
.x('product', { label: 'Product line' })
.y('revenue', { label: 'Revenue ($M)' });This is a description, not a drawing. Nothing renders yet.
Describe the change
const b = a.y('profit', { label: 'Profit ($M)' });a is untouched. b is a new state that differs in one line.
Connect them
import { transition } from 'visdelta/transition';
import 'visdelta/style.css';
const change = await transition(a, b, { target: '#chart' });VisDelta draws a into #chart and prepares every frame up to b.
Move through it
change.play(); // a → b
change.play({ from: 1, to: 0 }); // b → a, the same frames backward
change.progress(0.42); // one exact frameDrive it with anything
slider.addEventListener('input', () => change.progress(slider.valueAsNumber));A slider, a button, scroll position or a video's clock. They all call
progress().
See what changed
import { delta } from 'visdelta/core';
delta(a, b).stateChanges;
// [{ category: 'encoding', action: 'remap', channel: 'y' }]This is the Δ line under every chart on this site.