In dataviz, we often deal with numbered abstractions.
But when the Canadian Climate Institute came to us with research about infrastructure, a topic connected to physical objects, we saw the potential for illustrations.
So this is the story of how data on the costs of climate change turned into an ambitious scrollytelling with animated landscapes.
Data is not numbers, it’s reality
Here are the kind of figures that the client had prepared. It showed their calculations, findings, and recommendations.
Accurate, clear, precise.
But also generic, not visually connected to this real-world topic.
So to seize the opportunity, we made a point of developing visuals that would refer back to infrastructure.
Our very first pitch was an isometric illustration, giving a bird’s eye view of a landscape. The client immediately saw where we were going and went along with it.
Credits to the client for seeing the full potential, because we only had one small illustration to present all infrastructure combinations. As our illustrator had then gone on vacation, we had to use and reuse it a lot!
We also had ideas for visuals regarding some specific numbers, but these ideas didn’t get past the first concept. (We reused them a year later for another project)
On the basis of the client’s approval for the concept, we developed the full isometric illustration on four panels associated with four different types of environments (urban environment, sea coast, road traffic and agricultural countryside). The zigzag layout gave us space to add annotations and made the visual more dynamic than if we had used a square matrix for the four panels.
Telling a story
We then discussed with the client the exact narrative of the scrollytelling and developed the full illustration around its needs.
This is a lot of work and yet it is often overlooked in information design, including by clients who assume that their story is design-ready.
We also introduced an important storytelling device: using colour to bring the attention of the readers to specific impacts across the landscape.
Another idea that we developed at this stage is the zoom, to focus on a part of the story. The camera gets closer to an area, then a circle appears and the content is made even bigger.
Lesson learned: it was one thing to imagine it, but another to implement it in code later!
Some animations were even developed for the zoomed in scenes. In this example, the first scene shows a sea coast in a normal state, then a second shows some flood and a third scene shows a complete flood.
Pushing the aesthetic
We decided not to go realistic but to use a simplified and abstract palette. It also allowed us to stick to the client’s brand colours.
These are our first attempt and the final palette.
Everything was now in place for the coding stage, where we refined every element some more. Of course, there was much debugging… and some web integration.
Here’s one detail that I like very much: the report itself was hidden in the landscape all along and is revealed at the very end.
Climate change will impact electricity, homes and buildings, roads and railways. The numbers in this report are Canadian, but the findings can inspire all nations adapting to this new climate. This report is important.
Here is the portfolio link to the full presentation of this scrollytelling about the costs of climate change. Scroll to the bottom to see the full piece.
And here is the Behance version (the team appreciates the “Appreciations” on this platform!)