Interactive Data Visualizations: Motion That Explains Change
How to use motion in charts without delaying the data: update versus redraw, transitions, accessibility, reduced motion and performance.
Core Takeaway
Motion in a data visualization should explain what changed, not perform for its own sake. Animate a chart when values update in place so people can follow the change; avoid a full redraw that forces them to re-read the whole chart. Keep the transition short, preserve axes and labels, and provide a table or text summary for people who cannot rely on the visual.
Motion as an explanation
A chart is a comparison. When the data changes, a transition can preserve the viewer's mental model: a bar grows, a line extends, a point moves to a new value. That helps people see the change. A flashy entrance animation that draws every mark from zero does the opposite: it delays the comparison and makes the viewer start over. The first question is always what the motion is explaining.
Update in place, not from scratch
If the chart shows the same categories over time, keep the marks and animate their values. If the categories change, a redraw may be clearer, but it should be fast and should not pretend to be a continuous transformation. The worst case is a morph between unrelated datasets, which looks impressive and communicates nothing. Match the transition to the relationship in the data.
Keep the frame stable
Axes, labels, units and the chart title should not move during a value update. If the scale changes, say so and give the viewer a moment to notice. A chart that rescales silently can make a small change look dramatic. Keep the legend stable and avoid reordering categories unless the order is part of the story.
Interaction and interruption
Hover, selection and filtering can trigger transitions. Keep them short and interruptible. If the user moves the pointer quickly across a series, the chart should follow without queuing a long animation for every point. Throttle expensive work, and let the latest input win. A chart that lags behind the pointer feels broken even if the data is correct.
Accessibility
A visual chart is not accessible on its own. Provide a table, a text summary or an accessible description of the key values. Do not use colour alone to encode categories. Respect reduced motion by updating values instantly or with a very short cross-fade. If the chart has interactive points, make them keyboard reachable and announce the selected value.
Performance
Animating many marks at once can be expensive. Prefer transform and opacity over layout, avoid re-rendering the whole chart on every frame, and consider reducing the number of animated marks when the dataset is large. Test on a mid-range device with the largest realistic dataset, not only with five sample points.
Key Principles to Remember
- Animate to explain a change, not to decorate the chart
- Update marks in place when the categories stay the same
- Keep axes, labels and scale stable during an update
- Make interaction transitions short and let the latest input win
- Provide a table or text summary and respect reduced motion
Frequently Asked Questions
Sources
- Understanding SC 1.4.1: Use of Color — W3C WAI
- Understanding SC 2.3.3: Animation from Interactions — W3C WAI
- The Role of Animation and Motion in UX — Nielsen Norman Group