Rollover here, roll over there

There are two kinds of events that are basically invented just for data vis people in newsrooms: Elections – and massive sports events like the Olympics and the football World Cup. (If you live in Western Europe or South America and could escape the fact that the latter one is happening these days, I congratulate you.) Many newsrooms have created World Cup-related visualisations so far: FiveThirtyEight created art with their amazing match predictions, many European newsrooms have copied the NYT and John Burn-Murdoch (Financial Times) and NZZ Storytelling deliver their top-notch visual analyses, as usual.

The following dotplot is heavily inspired by Patrick Stotz’ graphic for SPIEGEL Online. When I talked to him at the Netzwerk Recherche conference in Hamburg last weekend, he suggested to also include information on which teams actually made it to the quarterfinals. So I did:

We can see the many surprises of the World Cup: Germany didn’t even get into the round of 16, and other strong teams like Spain, Portugal and Argentina didn’t make it past that stage. Low-ranked teams like Russia, Croatia and Sweden are now in the quarterfinals and will fight for their entry into the semifinals this Friday and Saturday.

Chart choices hacks

This week’s chart is a dotplot scatterplot that tries really hard to be a dotplot. I’ve done this kind of mini-hack before and explained how it works back then. But this week, I want to focus on another
trick:

Scroll up to the graphic and hover over the label “made it into the group stage” below the description. Now hover over “made it into the round of 16”. Do you notice something? Countries like Portugal and Spain appear in both categories: First they’re light green, then they’re dark green. Normally these teams would only appear in one category (“group stage” or “round of 16”). But I wanted to show all 32 teams when readers like you select the group stage, not just the teams that didn’t make it into the round of 16 or into the quarterfinals.

gif of effect

How did I achieve that? I tweaked the data a bit: The countries that appear in the group stage and in the round of 16 also appear twice in the data. What you can see on the chart are basically two dots that are exactly on top of each other. Hover over the chart, click on “Edit this chart” in the top-right corner and check out step 2: Check & Describe in Datawrapper to see what the data looks like.


By the way, are you one of the many people who don’t understand the pun in the title? “Rollover” means the same as “hovering” in web design, and “to roll over” is a football trick. See you next week!

Comments