When the right visual is not a chart

Francis Gagnon
January 11, 2023

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.

A photograph of a laptop featuring the opening screen of the web interactive, an isometric bird's eye view of an illustrated landscape.

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.

16 slides with different charts, either line, bars, pie or even maps. All are too small to be read.

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.

Isometric illustration of an urban landscape with a bridge, with only outlines. The illustration is annotated with examples of highlights. There is also a suggested paragraph of text for storytelling.

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!

An isometric grid with four panels with examples of potential annotations about infrastructure.
Outline of an isometric illustration representing an urban landscape with a bridge. It includes examples of potential annotations about infrastructure. Two buildings in light blue are repeated across the four panels.
Outline of an isometric illustration representing an urban landscape with a bridge. It includes examples of potential annotations about infrastructure. The bridge and a building are highlighted in red.
Contour d'une illustration isométrique représentant un paysage urbain avec un pont. L'image est répétée quatre fois en zigzag.

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)

Illustration of price tags with large numbers about the annual costs of climate change impacts on infrastructure. There are a few short paragraphs giving more context.

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.

Outline isometric illustration of a full landscape, with urban and country parts. There are windmills, power lines, roads, a river, trees and buildings. There is a sample paragraph next to it to show how the story could be laid out.

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.

20 slides with isometric illustrations. It represents a storyboard but the text is too small to be read.

We also introduced an important storytelling device: using colour to bring the attention of the readers to specific impacts across the landscape.

Outline isometric illustration of a full landscape, with urban and country parts. There are windmills, power lines, roads, a river, trees and buildings. Some of the roads, houses and power lines are highlighted in orange. There is a sample paragraph next to it to show how the story could be laid out.

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!

Isometric illustration of a street corner in the city, with street lamps and a bus visible. There is a circle around out, and outside of the circle the scene is greyed out and the houses are smaller, for a zoom effect. There is a sample paragraph next to it to show how the story could be laid out.

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.

Isometric illustration of a scene in the countryside, with houses, trees and the seaside. There is a circle around, and outside of the circle the scene is greyed out and the landscape smaller, for a zoom effect.
Isometric illustration of a scene in the countryside, with houses, trees and the seaside. There is a circle around, and outside of the circle the scene is greyed out and the landscape smaller, for a zoom effect. The river is overflowing and partially flooding the roads nearby.
Isometric illustration of a scene in the countryside, with houses, trees and the seaside. There is a circle around, and outside of the circle the scene is greyed out and the landscape smaller, for a zoom effect. The river is overflowing and flooding the neighbourhood.

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.

Outline of an isometric illustration representing an urban landscape with a bridge. The southeast side of the elements are green, with a few details here and there in pink.
Outline of an isometric illustration representing an urban landscape and powerlines. It is coloured beige on top and lilac on the southeast side, while it stays white on the southwest side.

Conclusion:
✅ Concept
✅ Story
✅ Aesthetic

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!)

Francis Gagnon

Francis Gagnon

Francis Gagnon is the founder of Voilà: (2013), an information design company specializing in sustainable development.
Facebook
Twitter
LinkedIn
« Back to articles

You might be interested

Do you like to be informed?

Share our discoveries and follow our work by subscribing to our newsletter.

See a few examples

We will be happy to help you reveal your worth. Here is how you can reach us.

© Voilà: 2024 – Design : Aanagram.ca – Coding : marie-evegratton.com

M