Explore Denmark’s Climate: An Animated Graph

Turning everyday climate data into bold, interactive graphics.

Gif: Catherine Jex

Date Completed: 2018

The Brief: Make an animated graph in Tumult Hype Pro.

Key Features: Excel . Affinity Designer . Tumult Hype

Client: None . Hobby Project

Media Type: Online

More In This Category:

Share on twitter
Share on facebook
Share on email
Share on linkedin
Share on pinterest

A static graph can be boring and easy to overlook.

So what’s the solution? A bold graphic and animated data. Not too much, but just enough to add some interest. Adding interactivity allows the user to zoom in on specific data, isolating certain features of the graph. While drawing their attention to one data series at a time makes it easier to digest the information.

This graphic was produced for… well, nobody. It was a hobby project of mine to see whether it was possible to animate graphs in Tumult Hype Pro. And it was! It’s a simple reproduction of a commonly used graph to show the average climate variables for the whole of Denmark. It depicts average monthly precipitation, temperature, and sunshine hours for the period between 1981 and 2010.

The data were obtained from the Danish Meteorological Institute, plotted in Excel, and imported to Affinity Designer for development. Individual components were assembled and animated in Tumult Hype Pro.

The graphic is only designed for use on a desktop. It is possible to add touchscreen functionality, I just haven’t done it yet. Hovering the mouse over each of the labels, isolates that series and the relevant axis. It also initiates a sequence of animations, whereby the data plot from left to right and the axis colour changes to match that of the selected series. The animations use an ease in-out function for a smooth start and finish. And after each animation, the chosen data series remains highlighted, by applying a gradient overlay to dampen the other, non-highlighted data.

And here is how it looks:

Interactive Version 1

This version isolates each dataset one at a time, but retains some visibility of the other two datasets underneath.

Hover the mouse over the labels in the graphic above to explore average climate from Denmark. (Data: DMI. Design and Animation: Cath Jex)

Interactive Version 2

This version isolates each dataset one at a time when hovering the mouse over each of the three labels: Temperature, Sunshine, and Precipitation.

Hover the mouse over the labels in the graphic above to explore average climate from Denmark. (Data: DMI. Design and Animation: Cath Jex)

Gif Version

You can see the animated gif of the same animations produced in Tumult Hype Pro at the top of this post.

Sign up to receive email updates from CathJex.com

A short newsletter delivered when new content appears, including portfolio items and blog posts. Typically once a month. You can opt out at any time by clicking unsubscribe in the newsletter.

This website uses some cookies.