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.
