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);
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.