September 29th, 2022
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:
Average 2021temperature as my "main" column — this is where the data for the tooltips comes from that you can see when hovering over the chart.
High 2020and one from
High 2021), and two value overlays for the two average temperatures. Here's a detailed explanation of how to create overlays.
00at 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.