Database Reference
In-Depth Information
Animation
ThefinalpieceoftheD3puzzleisitsanimationfacilities.Theabilitytoeasily
add animation often adds that little bit of context that separates a good
interface from a great one.
In general, animation should be used sparingly to either acquire or remove
attention depending on the situation. For example, an animation on the
changing digits of the metrics in the dashboard draws attention to the
change because their rapid change is relatively unnoticeable to the eye.
However, if the gauge itself is allowed to “jump,” it tends to be distracting.
To combat this distraction and allow the focus to be on the new value, a
simple “tweening” animation is used. This smooths the motion of the gauge
over time, which tends to be less distracting.
For simple animations, nearly no work is required. For example, animating
the bar chart from the earlier examples only requires the addition of a
transition
function to provide a smooth interpolation between elements:
update
.transition()
.attr("x", function(d,i) { return x(i); })
.attr("y", function(d) { return y(d); })
.attr("height", function(d) { return
(dim.height-20) - y(d); });
Thereareavarietyoffeaturesofthetransition, suchastheeasingmethodor
the duration that can be specialized, but this is all that is required for many
visualizations.
In rare cases, a more complicated transition is required. As it happens, the
gauge example is one of those cases. If a transition were applied directly to
the gauge, the interpolation process would occur in the Cartesian coordinate
system of the page, rather than the polar coordinate system of the gauge.
To modify the gauge display to allow for animation, first the paths must be
modified to use a data element:
var back = g.append("path").datum({endAngle:1})
.attr("class","d3back")
.attr("d",arc);
var front = g.append("path").datum({endAngle:0})
