State changes

delta(a, b) tells you what changed between two states. It is the Δ line under every chart on this site.

import { delta } from 'visdelta/core';

delta(a, b).stateChanges;
// [{ category: 'encoding', action: 'remap', channel: 'y' }]

It needs no browser, so it also runs in Node and in tests. A transition exposes the same result as change.delta.

Seven kinds of changeCopy Anchor Link

1. Data

   Try it →

   Which source records participate, and did their values change?Try it →

   writes .data() .where()reports Δ add · remove · update

2. Grain

   Try it →

   Which records make one mark, and how is its measure calculated?Try it →

   writes .rollup() .breakdown() Unit .value()reports Δ split · merge · reaggregate · change-reducer

3. Encoding

   Try it →

   Which data field is bound to which visual channel?Try it →

   writes .x() .y() .color() .size() .repeat()reports Δ bind · unbind · remap

4. Coordinate

   Try it →

   How are values mapped into position and space?Try it →

   writes .flip() { domain } { scale }reports Δ rescale · reorient

5. Layout

   Try it →

   How are the same objects arranged or connected?Try it →

   writes .layout() .sort() .connect()reports Δ reorder · rearrange · reconnect

6. Attention

   Try it →

   Which objects are emphasized or framed by the camera?Try it →

   writes .focus() .highlight()reports Δ enter · exit · shift (focus | highlight)

7. Appearance

   Try it →

   What fixed visual form or styling is used?Try it →

   writes .color("#…") .strokeWidth() .curve()reports Δ restyle · reshape

Every entry is a fact about the two states: a category, an action, and sometimes a detail such as the channel. A few lines that are easy to mix up:

• A colour field (.color("region")) is Encoding. A colour value (.color("#3366ff")) is Appearance.
• Mapping y to another field is Encoding. Changing the scale or flipping the chart is Coordinate.
• where() changes Data. highlight() and focus() change Attention: every row stays.
• Changing sum to mean is Grain, even if the groups stay the same.

Several at onceCopy Anchor Link

One edit can produce several facts. Splitting totals into coloured detail is a Grain change, a new colour binding and a colour style change, all at once:

Not a scheduleCopy Anchor Link

The list is for reading. Its order is fixed by category and says nothing about what moves first. How a chart moves is decided by its chart type; see Transitions.

More detailCopy Anchor Link

The same result also carries the raw differences (deltas, hasDelta()), exact declaration edits, and lineage when both states have inline data. See Core and Identity.