Please ensure Javascript is enabled for purposes of website accessibility
Business of Animation Logo

7 Data Animation Tips - How to Integrate Data into Animation

ben marvazi 2020

Make More Money as an Animator

Check out our FREE TRAINING on How Animators Can Make Over $10,000 Per Month

“Movement brings shapes to life, creating connections for an audience. Animation can also bring data to life…”

Andy Cotgreave, Visual Analytics Expert

Data animation is useful for visualizing and making sense of complex data in a world with a lot of information at our fingertips. Animating data makes it more engaging and useful, especially when presented as explainer videos or infomercials.

With animation, numbers become easier to digest, and otherwise overlooked trends, patterns, and narratives become apparent. 

There is clear evidence that animation can increase engagement, create an emotional attachment with an audience, and convey information more effectively and informally. By animating data visualizations, you can engage viewers in ways other methods may not be able to. 

However, when animating data visualizations, animators should be wary of common mistakes and make sure they create data animations that are clear, concise, and not overly superfluous. 

Real-time interactivity with these data animations promotes engagement and allows users to explore data more deeply. At the same time, excessive or misguided animation can defeat its purpose, obscuring rather than illuminating insights.

In this blog, we discuss data animation and how you can use and effectively integrate data animation into your animations. 

What is Data Animation?

different examples of data animation

GIF by Jardson Almeida via Dribble

Data animation is a form of visualization that you can create to explain your animation client’s business data in a simple visual story. Data animations are created using live data collected from various sources that drive the animations in your composition. The data can vary from static to time-varying. 

As the data is being explained in your animation, the audience can easily follow changes and make sense of all the data being presented. Animating data changes is a great way to enhance visual storytelling and therefore audience engagement with the data. 

While your animation clients will typically provide you with all the data needed to create a data animation, it’s useful to know that you can add and use data from every possible source. These include:

  • Data from devices such as fitness trackers that record activity through sensors and store them in different file formats;
  • Global static data such as survey results that can be changed to drive graphics;
  • Live data from websites such as the entry and exit path of a user navigating through a web page;
  • and data embedded in video file metadata.

Data animations add value to any presentation and they also constitute a useful tool in exploratory data analysis for your animation clients. 

Some of the uses for animated data videos include:

  • Financial Reports
  • Advertising Metrics
  • Sales Dashboards
  • Content Analytics
  • Competition Dashboards
  • Marketing Analytics
  • Executive Presentations
  • Quarterly Briefings
  • Social Media Metrics
  • Mobile Statistics
  • Annual Reports
  • Web Analytics
  • Social Media Monitoring
  • Human Resource Stats

The Benefits of Using Data in Animation

While the overuse of animation to visualize data can cause confusion and strain our working memory, there are a lot of benefits to creating data animations correctly. This is because movement adds a unique angle to data visualization in the sense that it creates the ability to see insights in the data that you would not be able to see otherwise. 

Before moving on to how you can integrate data into your animation, let’s look at some of the benefits of data animation that will surely improve your animated projects. 

  • Better User Engagement
users are engaged with data animation

Image by Ray Slater Berry via Chameleon

The biggest benefit of data animation is that it drastically improves user engagement with the content. 

Research done by Jeffrey Heer and George G. Robertson on animated transitions in statistical data graphics suggests that animating static charts can improve graphical perception and increase viewer interest. What’s more, incorporating real-time updates into data animations can make them even more engaging to users. 

Creating data animations can engage viewers in ways other visualization types may not be able to. Animations can help people see transitions from one state to the next and enable them to track changes more easily. 

Therefore, the real strength of data animation is how it presents data rapidly but in an easy-to-follow and absorb format.

Data animation can help uncover and complement a topic, create a vivid focal point, and bring new meaning to a data set. 

Not only that, but the “attention-grabbing powers of animation can be used…to reinforce the hierarchy of content and to highlight what’s most important at a specific point in time, ” explains Val Head, Senior Design Advocate at Adobe and author of Designing Interface Animation and The UI Animation Newsletter.

Good data animation has a clear, logical purpose that helps reduce a viewer’s cognitive load, direct their focus, and establish spatial relationships within your animation while also building your client’s brand identity. 

When using data animation effectively, engagement is up because you are simplifying and extracting key insights from the data.

When it comes to data visualization, motion is more engaging to users simply due to the fact that is more ‘fun’. People are more likely to enjoy viewing animated charts than static ones.

  • Improved Communication
data animation will allow better communication

Image by Praveen Singh via REVE chat

Data animation can be used to provide your animation clients with stories that bridge the communication gap between management and employees. This is because, as stated before, data animation makes complex topics easier to understand. 

The communication between your animation client and their target audience is also aided by the fact that we, as people, are hardwired to detect motion. Because animation is made up of motion, data animation is a powerful tool to take advantage of this inherent human quality.

The motion in data animation brings attention to what has changed and de-emphasizes what hasn’t. Animations clarify analysis by calling attention to what matters and directing your animation client’s target audience’s focus to where it counts. These animations help people see how the data has evolved. 

This is where the next benefit of storytelling comes in. 

  • Storytelling
storytelling can be done through data animation

Image by Nick Mannon via Blast

Data storytelling is used to tell stories with your data animations, make your audience understand how and why the data got to that point, and inspire action and/or behavioral changes. Helping people perceive trends and changes is a key advantage of data animation. 

Point-in-time behavior data can be used with data storytelling through animation to provide your animation clients with an analysis of how the data has evolved over time and a context of how data got to that point.

Animation combines visual and auditory stimuli to cater to multiple learning styles and evoke stronger emotions than static imagery alone. Using data animation, you can present the process of understanding complex data in a clear and captivating way to explain, educate and inform. 

An example of storytelling within data animation is using animated charts. Animated charts are excellent for storytelling because it is good for telling a story once about the data once all of the facts are known. 

However, because of the number of data sets to follow in animated charts, it might be a good idea to animate one set at a time to make the information as accessible as possible for your viewers. 

  • See and Understand Changes
data animation can allow you to visualize and see changes

GIF by cuily via Dribble

Data animation isn’t just about communication; it’s also about exploration and analysis. Without animation, the changes in a chart happen almost instantly, and the viewer might not be able to see how the data changed from one point to another. 

The simple change of animating certain data points from one transition to another enables viewers to see and understand changes more easily. 

In her book “Visualization Analysis and Design, author Tamara Munzner distinguishes three kinds of animation: narrative storytelling, transitions from one state to another, and video playback, where the user can control the sequence by playing, pausing, and rewinding. 

She writes that “Animation is extremely powerful when used for transitions between two dataset configurations because it helps the user maintain context.” Data animation can therefore be used in different ways with different impacts. 

How You Can Integrate Data into Your Animations

When thinking about how you can integrate data into your animation, there are a few ways you can do it. We’ll go over seven of the most common ways here, starting with analysis. 

  • Analysis
data animation allows for easier analysis

GIF by Joey Bertschler via Hackernoon

Data animations make it easy to track the path of certain data sets and identify patterns. You can create analysis data animation for your animation clients when they have data sets that span a certain time. 

The GIF below demonstrates this style of data animation. When comparing the animation on top to that of the bottom, it’s clear that the highlighted mark on the bottom is easier to follow. This is mainly because all of the data is moving relative to each other, making analysis much easier. 

data animation to show life expectancy by family size

GIF by via Tableau

  • Dashboard Applications

Another way to use data animation effectively is to create dashboard animations. Many dashboard authors turn their workbooks into full-blown app experiences, and in these cases, data animation aids perceived performance with a responsive, polished feeling. 

This sales calendar date picker uses animations on the right-hand sheet to zoom in and out as the date scope changes. 

dashboard applications utilize data animation

GIF by Lindsey Poulter via Tableau

  • Bar Chart Races

Bar chart races can serve as a compelling storytelling tool for data animation. 

Although there are some reasons not to use bar chart races too frequently when creating explainer videos or infomercials, so do use them sparingly and only when needed. 

bar chart races is a form of data animation to show progress

GIF by Jacob Olsufka via Tableau

  • Data Storytelling and Presentation

As mentioned, data analysis provides a powerful storytelling tool for your animation clients. For example, editorial news pieces often apply well-crafted data animations to highlight less obvious patterns and key details.

Below is an example that uses data animation to highlight key relationships and patterns among multiple visuals. 

data animation can tell a story as a presentation

GIF by Alex Varlamov via Tableau

  • Illustrate Progression
data animation can illusrate progression

GIF via 3D Repo

By creating data animations, you can effectively illustrate the progression of a particular data set. In particular, time sequences or logically ordered series can benefit from data animation. 

Animated time sequences are slower in communicating an entire story. Still, they benefit from a new level of engagement, especially among audiences who might not normally engage with data.

  • Enhance your Explainer Videos
data animation can help with creating explainer videos

Image via Visme

Some of the most successful data animations help viewers learn and understand the material. Studies have shown that our brains process images 60,000 times faster than text and that we remember 55% more information when it has a relevant image paired with it

You can use data animation to your advantage to explain concepts without having to produce full videos. A destination-focused piece, for instance, may feature an animated map that changes as a reader scrolls throughout the story, highlighting certain routes or cities to add meaning and depth. 

Tips for Integrating Data in Your Animations

Contrary to what it might seem, data animation isn’t confined to complex data sets represented by traditional charts and graphs. Even a “like” button that tallies user sentiment on a social app is a way to visualize data. Regardless of complexity, a common set of principles and techniques comes into play when animating data visualizations. 

The four most important techniques when considering data animation include value change, zooming, parenting, and easing, offset, and delay. The aim of using these principles is to give your data animation natural motion and imbue motion that conforms to viewers’ innate expectations and senses of continuity and narrative. The goal is ultimately to help users understand abstract data.

  • Value Change
pay attention to value changes as you create data animations

GIF by gaborszollosy via Microsoft

When showing value changes with data animation, a numerical counter ticks up or a bar rises before landing on a final figure instead of displaying a static number. This can be a powerful way to convey progress or growth – or lack thereof. It also signifies that the data is subject to change, and in some cases, including values in your data animation indicates interactivity.

Value change visualizations are especially prevalent in mobile apps. In a language learning app, for example, a bar may rise incrementally until arriving at a final score on a test. Value change shows progress and can provide the user with a sense of accomplishment, encouraging them to continue a learning path.

Applying value change to the lines in a chart is another way to demonstrate changes over time.

  • Easing, Offset and Delay
animating with easing, offset, and delay can affect your data animations positively

GIF via Erratic Generator

Extremely fast and erratic movement in data animation can be unpleasing to the human eye since it looks unnatural. It’s important to give your data animations “natural” entrance and exit speeds by easing them into the frame. 

Offsetting is just as important as easing. This is because introducing different elements and delaying their speed can further signal to users that distinct variables are being shown, and it can help establish a hierarchy among them. 

In a stock trading app, for example, the value of a user’s stocks might appear first followed by those of general indices. Offset and delay makes it easier for users to comprehend numbers and charts than if they were presented all at once.

  • Parenting
dynamic ranges and parenting can help with your data animations

GIF via Trump Excel

Parenting creates relationships between different components in your data animations. When a property such as position, scale, or color in the parent element changes, a property in the child element changes. 

For example, on a line chart, if a point on a line is the parent, as the user drags the point they could see the value (the child object) change.

Parenting is an effective way to increase interactivity and create hierarchy in your data animations.

  • Zooming
zooming into data animations gives you a more detailed look into the data

GIF via The Flerlage Twins

Zooming allows users to easily go from a birdseye view of data to a more granular one. It can be a useful technique when presenting large data sets that might typically be viewed on a desktop. 

One of the most common forms of data animation visualization is maps. Zooming is a critical tool in this context since the confines of a screen greatly curtail what can be presented in a single visual.

Data Animation Mistakes to Avoid

While data animation might seem straightforward and mistake-proof, there are still some common mistakes animators can make that make their data animations less effective. 

You can design focused and effective data animations by avoiding these pitfalls:

  • Resource-Intensive Visuals That Don’t Add Much Value
data animations are easier displayed without too much animation

GIF via Stack Overflow

This is especially important when creating data animations that will be displayed in mobile apps. Rendering motion in visuals can be resource-intensive on the back end and could negatively impact performance and user experience on the front end. 

Large data sets or data that require extensive coding elevate this risk. Before putting the resources into building such visuals, you should communicate with your animation clients about the desired result.

  • Flashy or Superfluous Animation
avoid flashy data animation to easily convey the data

Image via Designers

Edward Tufte, an influential writer in data animation and data visualization, had this to say about data animation: “Above all else, show the data.” Coming from the man credited with writing the book on modern data visualization, this is an important quote to remember.  

You should always focus on conveying information. Attributes like color, shape, and movement should only be used to enhance understanding of the data you animate. Extraneous visual elements detract from this purpose.

Data animation visualizations should support an application’s purpose. ​​A language learning app, for example, might use motion to emphasize users’ progress, while an investment app might subtly highlight actionable data. 

Regardless of the nature of the app, however, in most cases, animators should avoid flashy animations, such as falling confetti or fireworks. They not only risk making the app feel like a game, which could lead to unhealthy engagement with the app but they can also obscure or exaggerate what the data actually conveys.

  • Overly Interactive Visuals
avoid overly flashy visual when working on data animation

Image via Visme

Working with data requires a degree of precision, and users will need a decent portion of their screen to execute gestures successfully. Too much interactivity could prove cumbersome and frustrating, which negatively affects user-friendliness. It’s beneficial to prioritize one action at a time when creating interactive data animations.

Not only that, but giving viewers and users too much freedom to interact with data might detract from important data sets they need to be aware of, regardless of your design. 

  • Inconsistent Style
maintain a consistent style for your data animations

Image by Ana Predescu via Creatopy

Data animations should mesh with the overall style and functionality of an application or with the brand image of your animation client’s business. This is something Apple refers to in its Human Interface Guidelines as aesthetic integrity.

Maintaining stylistic consistency in the kind of transition you use, the type of animation, the color blend, and so forth helps viewers and users successfully navigate data sets. 

Tips on How to Create Data Animation

Data animation is a unique animation niche and service that you can provide to your animation clients.

However, it’s important to be aware of the potential mistakes you can make that will decrease the effectiveness of your data animations. If you take our advice and follow the tips we provided in this blog, you’ll be creating outstanding data animations in no time!

If you’d like to learn how to animate certain data charts, check out this blog for guides on all the different charts you can use in your data animations. You can also check out this YouTube video on how to create data animations using After Effects

If you’re looking to grow your animation skills, check out our free masterclass, download a copy of our free marketing handbook, and check out our blog on “How to Start an Animation Studio”!

rocket for boa

Lacking Business Skills as an Animator?

Transform your animation skills into a profitable business with our expert-led free training.
Business of Animation Footer Logo
Helping Animators Succeed

Feeling Stuck in Your Animation Career? Learn How to Break the $10,000 Per Month Barrier!

crossmenuchevron-down linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram