# Overview (/docs)

> Write a chart one chained call at a time. Every call is a new state, and VisDelta draws the change.

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.

<LiveExample id="bar-remap" />

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 ideas [#three-ideas]

**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 not [#what-it-is-not]

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 here [#start-here]

<Cards>
  <Card title="Quick start" href="/docs/quick-start" description="Your first transition, in four steps." />
  <Card title="Playground" href="/playground" description="Write a chart and watch every edit animate." />
  <Card title="Gallery" href="/gallery" description="What each chart type can draw." />
  <Card title="API" href="/docs/api" description="Every function and option." />
</Cards>