Why animate?
You're now reaching an exciting but tricky part of data visualization on the web: animation. It is tricky for 3 reasons: design, code, and performance.
Before we jump into the tech part, let's discuss what animation means, why it can be useful, and when it should be avoided.
What is animation in dataviz?
Animation means your chart markers smoothly transition between positions instead of jumping instantly.
Here is a small application with 3 charts that uses animation. Click one of the four buttons and watch the graphs smoothly update.
Types of Data Professionals
The field of data offers a diverse array of job titles, making it challenging to navigate without getting lost in the jargon and uncertainty about which roles to pursue. The charts below offer deeper insights into the competencies needed, salary ranges, and popularity trends for the four primary job titles.
Three charts with smooth dataset transitions.
Animations are a great way to enhance the transition between 2 states of the graph.
But they must be used with care. That's why this module dedicates 2 lessons to the theory of animation, before jumping into the code in lesson 3.
Animation can be helpful
Animation is not (and should not be) just decoration. There are 3 real reasons to animate a chart, in rough order of importance:
Object constancy
The strongest reason. Without animation, a dataset change is a jump cut; the reader has to re-parse the chart from scratch. Animation lets the eye track which bar, point, or shape became which.
Directs attention
Motion is the loudest visual signal a chart can give. Useful for highlighting an outlier, a state change, or an update that just arrived. When switching between groups (like in the example above), it also lets you follow each shape and understand how the trend shifts.
Engagement & polish
The weakest reason, but still worth considering. Animation adds a touch of professionalism to your chart and produces a wow effect that makes people remember your work.
If your animation does not fall into one of those categories, don't do it.
Animation can hurt
Animation can also be excessively annoying for your audience. This module gives you the keys to animating pretty much anything, but you must use them with care.
There are 2 main reasons animation can hurt:
Distraction
Animating something that does not carry information? Or just adding wiggling, spinning shapes? It only pulls the eye away from the data itself, making your chart less insightful.
Time
If the animation adds a lot of delay, it drives frequent users crazy. A half-second animation is fun at first, but not when you click a button for the 500th time on an app you use every day.
The decision rule
Animate change that matters. Do not animate anything else.
Oh no! 😱
It seems like you haven't enrolled in the course yet!
Join many other students today and learn how to create bespoke, interactive graphs with d3.js and React!
Enrollment is currently closed. Join the waitlist to be notified when doors reopen:
Or Login