Plotting fall temperatures with our new range & value overlays in column charts

Hi, this is Lisa! I'm responsible for the blog at Datawrapper. This week, we launched range and value overlays for column charts. What a splendid opportunity to use them for our Weekly Chart, I thought! So here it is.

The chart above shows the maximum, minimum, and average temperature per week close to the Datawrapper office here in Berlin. Two years are shown: The full year 2020 (light blue, in the background), and the current year 2021 in orange until, well, this week.

"Wait, that chart above is a column chart?" I hear you asking. Yes — and no. I built it with the "column chart" chart type in Datawrapper, but then used the following tricks to bring it to its final box plot/span chart-like form:

How to create this chart

1. First, I uploaded seven columns: One with the date (in calendar weeks), three with the min/max/average temperatures in 2020, and three with the min/max/average temperatures in 2021.
2. I chose the column with the Average 2021 temperature as my "main" column — this is where the data for the tooltips comes from that you can see when hovering over the chart.
3. I then created four overlays: Two range overlays (one from Low 2020 to High 2020 and one from Low 2021 to High 2021), and two value overlays for the two average temperatures. Here's a detailed explanation of how to create overlays.
4. To make the column of the column chart disappear, I made it transparent by adding a 00 at the end of its color's hex code — I basically told this color to be "0% opaque."

Here's a 90 second video in which you can see me going through the third and fourth steps:

After creating the overlays, I spent quite some time adding annotations to
a) explain to readers what the visualization shows, and
b) let readers know what's interesting about the data.

In many annotations, you can see me attempting both at the same time by using colored backgrounds that remind readers which color stands for which year. To learn how to create backgrounds with HTML, visit this Academy article.

---

That's it from me this week! To see a similar chart created with a Datawrapper line chart (!), visit Gregor's Weekly Chart from last year. If you live in the northern hemisphere, I hope you're enjoying the fall (and all its colorful leaves). Next week, you can look forward to a Weekly Chart from our writer Rose.