Animation

Description forthcoming.

Example

var s = 0, vis = new pv.Panel()
    .width(150)
    .height(150);

vis.add(pv.Wedge)
    .data([1, 1.2, 1.7, 1.5, .7])
    .left(75)
    .bottom(75)
    .innerRadius(function() this.index * 10 + 20)
    .outerRadius(function() this.index * 10 + 30)
    .startAngle(function() (s += .001) * (this.index + 1))
    .angle(function(d) d * 2);

setInterval(function() vis.render(), 35);

Types of Animation

Time-based animation. This happens outside of Protovis using setInterval or setTimeout to trigger re-rendering. Of course, depending on how this is implemented it may be too inefficient to rebuild the entire visualization; we may want to be smart about which properties to re-evaluate and which graphical elements to re-render.

Example: Twitter messages containing the word “morning” by location and time for a given day; highway traffic over time; evolution of social network over time; etc.

Animated transitions. Given two computed states of a visualization (scene graphs), it’s often desirable to generate a smooth transition between the two states. For example, you might fade in new marks, interpolate colors, or interpolate locations.

Example: recompute the PolarClock time once per second, but animate the transitions between updates so the wedges “bounce” like physical clock parts.