The Value of Slow Transitions

The Why

From Object Constancy by Mike Bostock:

Animated transitions are pretty, but they also serve a purpose: they make it easier to follow the data. This is known as object constancy: a graphical element that represents a particular data point… can be tracked visually through the transition. This lessens the cognitive burden by using preattentive processing of motion rather than sequential scanning of labels.

(The emphasis is mine)

The How

Object constancy is achieved through object identity: the data is bound to it’s object by a shared unique identifier. This allows D3 to reuse the object when the data set is updated. Object identity is achieved by passing a key function to the data() method at the time of data binding:

1
2
3
4
5
6
7
8
9
var data = [ // <-A
        {id: 0, value: "foo"},
        {id: 1, value: "bar"},
        {id: 2, value: "foo"},
        {id: 3, value: "baz"},
        {id: 4, value: "bar"}
    ];
d3.selectAll("svg:g")
    .data(data, function(d){return d.id;});