November 23rd, 2023
Hi, this is Lisa! You might know me from a blog post or two I wrote on this Datawrapper blog. Today I tried to solve a color riddle.
It all began two days ago. I’m writing a book about colors in data visualizations for Datawrapper right now, and I researched “bivariate maps” to write some short paragraphs on the topic. Bivariate maps are special: They are choropleth maps that show not just one value per region, but two. (Or more.)
The map above is one of these bivariate maps: It sorts each country into two categories (Is more than 60% of the population vaccinated against COVID-19? And how high is the GDP per capita?) and then gives it a color according to the color legend. As you can see, the values are sorted into “classes”: Nigeria is the same class and color as India, because they both have a GDP per capita between $5,000 and $10,000 U.S. dollars, and because in both countries, less than 60% of the population is vaccinated.
Classes are always artificial. Data vis designers set these borders to make a certain point. Here are the points I wanted to make:
Bivariate maps are hard to read (especially if they come as a cartogram! Double the cognitive load!) That said, it can be a good choice if you show a lot of different regions — e.g., a U.S. county map like this beauty here — and very obvious regional patterns. In my case, all of the points I wanted to make are better made with a scatterplot:
You can even read more out of the scatterplot than out of the map. In addition to the insights above:
Creating that map was one big color riddle. Do I think I solved it completely? Not really. Do I think it looks better than when I started out? Oh yes.
I began by creating a bivariate map with 3 x 3 classes — that’s what most of them use. I wasn’t happy with it, though: Even I as the creator had to constantly check the color legend to know what the colors meant. That’s a bad sign.
This was one of the moments where asking, “Well, what do I want to show?” helped. I wanted to show which poor countries are really good at getting their population vaccinated, while communicating that these are outliers. Meaning:
From there, it was a matter of finding a good color palette. I liked the idea of using more than just two or three "bins" for the GDP per capita. But for the five classes I settled on, I couldn’t just use the “light color to dark color” gradient normally used in choropleth maps: If I used e.g. these five colors ⬤⬤⬤⬤⬤ for the “>60% vaccinated” classes, and then toned them down to ⬤⬤⬤⬤⬤ for the "<60% vaccinated" countries, it would be hard to distinguish between the lighter colors of the “>60%” classes ⬤⬤ and the darker colors of the toned-down “<60%” classes ⬤⬤.
Meaning: If I wanted to use a reduced lightness for the “<60%” class, I couldn’t change the lightness much in the “>60%” class. And because I wasn’t convinced that differently-saturated colors would be distinguishable enough (like ⬤⬤⬤⬤⬤), I was left with altering mostly the hue of my five classes.
Altering only the hue (and only a bit of saturation and lightness)? That’s not what data vis color tools like my coworker Gregor’s Color Palette Helper are made for. Good thing CSS pro Josh Comeau had created a beautiful, interactive blog post the other day about color gradients — including a gradient generator that doesn’t care much about lightness. I used that one, and the Interactive color picker comparison by Björn Ottosson, to create five colors that go down only slightly in lightness, while mostly changing in hue: ⬤⬤⬤⬤⬤. After reducing their saturation and lightness for the five “<60%” classes ⬤⬤⬤⬤⬤, every one one of them now recedes into the background compared with the “>60” classes.
That’s it from me for this week! I’d love to see your solution to this colorful challenge. My chosen palette is a bit too "friendly-looking" for the topic. I tried using blue/green/grey tones, but couldn't find a good combination that worked. Maybe you can? Hover over the map and click on “Edit this chart” in the top right to play around with the colors yourself. Next week, my coworker Eddie will write her Weekly Chart. See you then!