More money, more COVID-19 vaccinations? Let’s look at the outliers with a bivariate map.

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:

• The richer the country, the more people are vaccinated. That’s true for most countries — but let’s look at the outliers:
• Cambodia is a poor country (it’s purple), but more of its population is vaccinated against COVID-19 than, e.g., Germany’s.
• Russia is the biggest fairly rich country ($25K GDP per capita) in which less than half of the population is vaccinated: 47%. That’s almost exactly as many as in way-poorer India.

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:

• The U.S. has the lowest vaccination rates of all the richest countries shown (>$40K GDP per capita).
• Portugal has the same GDP per capita as, e.g., Slovakia or Trinidad and Tobago, but has together with the very rich United Arab Emirates and Brunei the highest vaccination rate of all countries shown: over 90%.

Map choices

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:

• I should emphasize the poor countries.
• I should emphasize the countries with high vaccination.

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!