5 tips for visualizing concepts

What does banking look like, in one image? How about evaluation? And training? 

That was the easy part. Now, what about the need to improve? Or to speed up and simplify a process? And finally, innovative financing models?

Designing information requires to think of visuals for concepts that may or may not have a strong image associated with them. These icons will come up in brochures, infographics, presentations and websites. Being able to find just the right image that will anchor the concept in the reader's mind is probably more art than science, so I'm sharing my own thought process here with examples from a recent product.

The Independent Evaluation Office of the Global Environment Facility has recently completed a massive evaluation — in fact, tens of evaluations — that are crucial to the future of the GEF. The reports have been published and the IEO wanted to get the word out so they approached us to develop an infographic (pdf) that would present their 10 conclusions, as a teaser inviting their audience to have a look at the full report.

Click to see the full PDF.

1. Use simple shapes

The fundamental principle of design "keep it simple" applies here. An icon does not have to be complicated and in fact, it should not be. Very simple, common shapes can often do wonder in context, as the eye recognize the reality that they represent, as if guided by gestaltism. 

Almost all of my icons are made of simple, often geometric shapes drawn in Adobe InDesign or Microsoft PowerPoint.

In this example, it's nothing but lines and a circle. The key idea is that the GEF has been a catalyst for the agencies that they fund to develop better safeguards. By establishing this new criteria, the GEF has started a reaction across the agencies, much like the domino effect illustrated. No need to draw actual dominoes with their dot patterns, nor to draw a sphere with complex shadows. It will not convey the idea any more efficiently.


Here, three concepts — scaling up, replication and market transformation — are different but have in common the idea of massive growth found in the conclusion. It is sufficient to use the arrows and hint at a line chart with a logarithmic growth, without resorting to all the elements of a chart or perhaps finding what is the true growth pattern of the three concepts.

Scaling up arrows.png

2. Leave out entire ideas 

It's common to have to illustrate a complex idea with several propositions. It might be tempting to find a visual hint for each of them, but that would require your reader to decode all those signs, in a way that is much less efficient than reading the sentence.

One idea is generally sufficient: it's an icon, not a rebus. It may not show everything, but it's enough as an entry point or a memory marker.

The IEO had found a lot of useful knowledge generated and captured by the GEF on its project, but also that it was not always accessible. Simply illustrating the latter idea with a vault is sufficient. No need to illustrate the concept of knowledge at the same time. Having, say, a book in the vault would only force the reader to decipher two abstract concepts and their relationship. It's too much responsibility for a single icon.

In this example, we have taken out all substance to illustrate solely the generic concept of "size matters". In fact, we even evacuated one of the two ideas in the conclusion (in-house expertise). The ladder is too short for the wall, a metaphor for the GEF financing that needs to be sufficient to overcome the market barriers that it addresses.

Size matters.png

3. Find the essence of an idea

A visual is meant to reveal the essence of a concept. This may be one of the most difficult aspect of drawing an icon because it requires a true understanding of the content and message. It's worth it though because relying simply on the words used in the concept may miss the point entirely. Also, finding how to visualize the essence is often the most satisfying moment of icon design.

In this example, the conclusion was a number, which might be tempting to illustrate with a graph, even a pie chart as a single percentage carries over well to such a graph. But the key idea is that the gender analysis seems to be found seldom and at random in the documentation of new projects. The GEF does not appear to have been as systematic as it should at this stage of the project development. So the visual takes this idea to illustrate task completion with a checkmark, while the missing tasks receded with an X on a light green background. This way, success looks haphazard, and not like a process that was suspended, as it would if we had put the seven checkmarks together at the beginning.

This following example is counterintuitive: the idea is limited guidance, yet the icon is a road sign that provides guidance. First, the goal of the icon is to anchor the idea of guidance simply, which the sign does nicely. Also, the road sign is ambiguous: it's a fork in the road without any indication of what direction the traveler should take, which brings us back to the idea of limited guidance.

This is one of the more complex icons in this infographic, but it's also one of my favourites because the concept was so difficult to capture. The IEO found that the GEF captures a lot of information, but not always about what matters most: impact. The GEF can dazzle with numbers about timelines, outputs and the likes, but what about the people they were trying to help? It's this idea that is shown here, with a spotlight on a heap of numbers, next to a person that is out of the spotlight. Alternatively, if the reader only sees someone lighting a heap of numbers and misses the misdirection, it still works.

4. Use abstraction

Icons often illustrate a physical reality, like people, trees and houses. But there is a great wealth of information in abstract shapes. When well-designed, an abstract shape can be as evocative.

Below, the concept was already abstract. Financing models are not just money, they are the structure of a financial transaction. How much interest will the borrower pay? When will the repayment be due? What sort of collateral is accepted? The idea is that the GEF had gone the extra mile to find new ways of lending or granting funds to prompt behaviours that would achieve its environmental objectives. They had been flexible, they had adapted to the circumstances. From this came the idea that their money comes in all shapes and forms. The GEF will make it fit to the particular circumstances of a project. The visual reflects this by placing dollar signs in a combination of odd shapes that fit together.

In the following case, the challenge was that we had already illustrated the concept of scaling up (see upward arrows above), so a new icon was required. After all, we are trying to make the infographic visually engaging. The circles illustrate the idea of progressive growth. By using eccentric circles, we avoid the image of a target that could have formed in the mind of a reader with concentric circles.

Scaling up circles.png

5. Data illustration is ok

Sometimes, it's a number that you need to illustrate. It may be a single number or a small collection. I have read somewhere (Stephen Few perhaps? Or Edward Tufte?) that a pie chart is more data illustration than visualisation, given its simplicity and paucity of information. It's also a very clean graph to show a single percentage because the eye can identify each of the quarters. In the case below, it's immediately clear that the first percentage is a little over three quarters.

Pie charts.png

Icons are not the end all of an infographic. Copy, hierarchy, structure and data visualization are equally and sometimes more important. But the icons serve two main purposes: to lighten the look of a text-heavy document and to anchor an idea. Do not rely on icons to do the work of your text, but use them to attract the eye of the reader and maybe to linger in their minds.

Contact Voilà if you need icons for your infographics and presentations.

When economists get excited about charts

On Twitter, Matt Notowidigbo, Associate Professor of Economics at Northwestern University, has started a very interesting thread.

The mere number of responses (55 in less than a day, as of this writing) is a good example of how much people love charts. They remember, think and talk about them, even if it's not their full-time jobs. Also, none of the charts submitted are visually spectacular and few are even beautiful. Many are in black and white. But their message is what stuck with the audience, Readers are brought in by the insights of the study and the appropriateness of the visualisation method. Here are a few examples.

Let's start with a submission by Notowidigbo, a convincing case of the impact of a technology on the lives of the poor. The change in amplitude is striking enough, and the fact that there are three regions drives the point home.

And here's one that I saw recently on social media and that generated a lot of support in the thread. It's about the unequal impact of parenthood on men and women's earnings and it was published in January 2018.

The following example reinforces that a good graph is not necessarily one that is understood in three seconds, but one that rewards exploration and understanding. To help you a little, you're supposed to be looking at the lag in price changes (the horizontal lines) based on when the news crossed from London to Amsterdam (the vertical lines). I like the creativity of the approach.

Here's a colourful and rich one.  It shows the impact of various weather factors on behaviour, economics, etc. It makes you think about the unexpected impacts that climate change may have on society.

Also, I was surprised to see one that I had the opportunity to edit (not the original) for a report on renewable energy because my client had also found it insightful.

I had retained the whole concept, making only minor changes to the design fo clarity. Now looking at it, I with we could see whether the predictions panned out from 2014 to 2017.

Duck curve FG.png

Verifying predictions brings me to my own contribution to the thread.

What is going on here? Why is it that analysts as a whole exhibit an optimism bias that doesn't seem to abate over time? Is it part of human nature? Or is it something specific to their incentives to overestimate? In any case, the graph makes a convincing showing with simple line charts.

What makes a good graph is first the insight and second the right visualisation. While good aesthetic appearance is part of proper information design — and several of the graphs above would deserve to be improved — it is nearer the end than the beginning of the process.

A targeted country

When a mass shooting in the US appears at the top of the news cycle, it's difficult to talk or even think about something else. The whole debate is hard to grasp from abroad as the arguments of the gun lobby — people kill people, bad guys will have guns, it's in the Constitution, the government will control us — have all been addressed successfully outside of the U.S. Yet, the debate goes another round. As one famous tweet and may people have said: it seems like the debate was over ever since Americans decided in Sandy Hook that it was ok to mass murder children.

An editorial from the New York Times shows this in a powerful way. The title sets the scene "What Congress Has Accomplished Since the Sandy Hook Massacre" and the visualization does the rest.

Screen Shot 2018-02-16 at 08.55.49.png

And all the way down to today, with the Parkland massacre. The legend is especially poignant as it raises your hopes that something has been done, but then you scroll and scroll and none of these colours appear.  Poignant scrollytelling

What struck me though isn't really visualized: it's the number of mass shootings each month. The Times probably decided not to encode it because it would have distracted from the message. But there seemed to be a trend where they are more common in the summer and I wanted to verify that, so I made this with the data.

Mass shootings.png

Each red dot represents a mass shooting. The black bars in the back top at the monthly average. They happen to form a skyline, targeted by the shootings. A moving art piece hidden in the data.

We, non-Americans, watch in horror each time and feel powerless like many Americans, except we truly are and it's weighing on us. For now, this will be my contribution as I can't stop thinking about it and I dread the moment that I will.

The colour palettes of the Obama official painted portraits

The portraits of Barack and Michelle Obama were unveiled this week and one of their most striking features is their colour palettes. The one from the President especially is a radical break from previous portraits and the one from the First Lady is captivatingly elegant.

Portrait Barack Obama.jpg
Portrait Michelle Obama.jpg

One way to learn about colour is to learn from the best and the two painters of these portraits, Kehinde Wiley (more) and Amy Sherald (more), have much to teach. This is why it seemed like a good opportunity to test various colour extracting tools. I'll be using three online tools, plus Photoshop. Many tools offered more than five colours so I made my own choices among the suggested colors. I provide the colour codes in all the formats provided by each tool.

ColorExplorer palette.png

This tool may have the best balance of the three online tools for the portrait of Barack, although it seems to have missed entirely the dark blue of the garment in favour of a dark purple that's probably more red than it needs to be. I like the compromise made in brown for the skin tone. For Michelle, the green of the skin tone seems especially well captured. It's interesting that from the vivid colors of the Milly dress, it's a beige that comes out.

On ColorExplorer, I set the “Color refinement analysis” to “rough” because it returns more diverse colours and other settings would return a subtle but similar palette. I set it to 10 colors for the same reason. You can upload your own picture but it has to be 250k and less.

ColorExplorer interface

ColorExplorer interface

Canva Palette.png

Canva captured a light brown for the skin tone of Barack and the dark brown of the chair separately. The accent colors of the flowers are completely left out, perhaps because they are small. For Michelle, there is a reddish brown whose origin is unclear. Perhaps some average based on the bright red found on the dress.

Canva has a beautiful interface that puts the colours in the context of the original image. Initially, it gave me the impression that it provided the best result of the three online tools. You can upload your own image.

Canva interface

Canva interface

DeGraeve Palette.png

Another tool that overlooked the accent colours in Barack's portraits. The brown of the chair is also missing despite its size. The purple of the suit appears with a better balance than with the other online tools. The bright pink of Michelle's dress appears in a very muted shade but at least it's there. The green of the skin on the other hand it completely missing, while its one of the most interesting and visible colours of the painting.

DeGraeve offers two palettes of 5 colors each: dull and vibrant. I selected the dull in both cases because it seemed closer to the original image. One challenge is that you have to provide a link to the image and cannot simply upload yours.

DeGraeve interface

DeGraeve interface


Photoshop Palette.png

Photoshop allows complete control, but whether that's a good thing is unclear. My palette is closer to the original, but also seems less harmonious than those extracted by the online tools. Barack's skin struck me as very bright and so I chose an copper-toned brown. My dark green is taken brown the background of the foliage. I picked the most striking accent colour — lilac — and the dark blue of the suit, which came out without much red if any. For Michelle, I chose to extract the bright pink because is seems like an important colour in the painting despite its small size. In Photoshop, selecting various black parts of the painting made it clear that the underlying colors varied greatly, from yellow, to green, to blue.

Photoshop interface

Photoshop interface

None of the tools aced nor fumbled it. It is a case of trying out each tool to make a combination that suits you. It seems as if the online tools make an effort to extract a harmonious colour palette that may not be accurate, but at least pleasant. They capture the spirit if not the letter of the image. This might be what we have to learn from the masters.

Bonus: You can download the palettes in Adobe Suite format here.

5 tools for getting a little better at colour for dataviz

While organizing my colour tools, I thought of sharing a few of them here, some I’ve used, some new to me. The truth is that I intend to get better at it and it was prompted by a 2015 piece by Elijah Meeks that hit close to home:

If you don’t feel capable of selecting a color scheme based on the fundamental principles of how humans perceive color, then what makes you think you can select between a hive plot and a Gannt Chart?
— Elijah Meeks, circa 2015

So if that applies to you as well, I’ll start with five basic tools.

Color Brewer

The reference in colours for maps and more. It’s on every list. The interface is a bit dated by today’s standards, but it’s incredibly convenient, with options for colour-blind palettes, or even photocopy-safe ones. Why Cynthia Brewer has barely 1200 followers on Twitter is a mystery to me (well, she doesn’t tweet much).*

Color Brewer.png


Picking a colour scale with constant changes along the gradient is complicated by our non-linear perception of colours. The Color Brewer addresses this problem and Gregor Aisch takes it a step further by allowing us mere mortals to create our own properly-scaled multi-hue scale. It has quickly become an essential resource. It’s worth reading the thinking behind it and checking the color picker developed on top of it by Tristan Brown.

Chroma js.png

Adobe Color

Not everything in data visualization is about a perfect gradient or diverging palette. Many graphs require simply a pleasant palette. Looking at popular palettes from around the world can be inspiring.

Adobe Color.png

Colour Lovers

This tool acknowledges that a colour scheme has a main, a secondary and accent colours, unlike other tools that treat all colours in a palette as equal. Trigger alert: painful interface.

Colour Lovers.png

Color Explorer 

This is a bit of a curve ball in the list. It extracts the colours from an image. Perfect for when you’re smitten by a picture and its palette (hello Wes Anderson).

Color explorer.png

There you go, with fewer excuses for using the default colour palette of your favorite dataviz tools.

*Because we Canadians pride ourselves on our humility yet brag about any famous Canadian, I’ll mention that Cynthia Brewer is Canadian. Also, Drake and the present use of the British spelling “colour”.

*In finding these resources, I’m indebted to Elijah Meeks, Nadiah BremerLisa Charlotte Rost, and Andy Kirk.