If you need your data viz to tell a story, animating it may be the best way to go. By breaking the graphic into sequential frames, each building off the other, you can help your audience understand what might have been a difficult message.

The New York Times does this really well, as they did recently with their interactive about competing tariffs between China and the United States.

New York Times animated graph
This animated force-directed graph tells the story with minimal effort or input required from the user to interact with it.

By pairing the graphic with a narrative describing each step along the way, they turned what could have been a confusing force-directed graph into a clear presentation of the tit-for-tat tariffs each country’s imposing on the other. It requires minimal effort from the user.

That’s the idea behind my recent animated graphs for Resources for the Future. The graph—actually there are two: the one pictured here below electricity demand and another about natural-gas prices—has four series of data, the actual historical data and three series of projections. Normally, all would be shown together, statically, and it would be up to the viewer to interpret the legend or labels and then decipher the static illustration of change over time. The animation makes the implicit time dimension explicit and easier to understand. The annotations ensure that your message is being conveyed.

An animated Highchart line graph
The animation makes the implicit explicit and easier to understand. The annotations ensure that your message is being conveyed.

Some technical notes

The code for this chart and its siblings is available on GitHub. The setup is to take an array of Highcharts configuration options, extended to meet the needs of this application, and create the charts based on the individual configurations. The animation is effected by replacing each series’ data with null values that are programmatically resupplied with actual data. The Highcharts library takes care of the transitions.