# Quick start (/docs/quick-start)
> Your first transition in four steps.
### Describe a chart [#describe-a-chart]
```ts
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 [#describe-the-change]
```ts
const b = a.y('profit', { label: 'Profit ($M)' });
```
`a` is untouched. `b` is a new state that differs in one line.
### Connect them [#connect-them]
```ts
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 [#move-through-it]
```ts
change.play(); // a → b
change.play({ from: 1, to: 0 }); // b → a, the same frames backward
change.progress(0.42); // one exact frame
```
## Drive it with anything [#drive-it-with-anything]
```ts
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 [#see-what-changed]
```ts
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.