This year, the European Commission was debating whether or not to abolish the switch between summer and winter time — and asked European citizens to vote on the new timing. Paul Blickle and the Interactive Team at Zeit Online in Berlin published an interactive explanation of how the options affect our day. Here, Paul explains how they came up with the graphics.

In February 2018, the European Commission was asked by the European Parliament to find out whether the daylight savings time (DST) was still necessary. In July and August, European citizens got the chance to vote in an online poll. The non-representative result was that 84% preferred to abolish the yearly »spring forward, fall backward« and stay with what's called summer time. The EU member states must now decide with which time they want to continue as their standard time. The last time change will likely happen in 2021. Read more on Wikipedia.

In March 2018, the beforementioned Parliament's vote and the upcoming switch to summer time were motivation for our Team Interactive to think about ways of showing the topics daylight saving, time change and daytime lenghts.

For our graphic, we had two objectives: First, it should show the underestimated differences in sunrise and sunset times between two places in Germany. Second, it should simulate how the abolition of the daylight saving time would shift these times one hour forward or back, resulting in earlier sunsets in summer or later sunrises in winter.

A good starting point were the talks with colleagues from departments that deal with data, who were also eager to find out the best way of showing daytime lengths. We had been inspired by other people's work about this, which were often maps or chart types that depict the daytime length as a band of varying height across a rectangle that stands for all days of the year from left to right and the time of the day from top to bottom.

As so often, the first drafts of the project were scribbled on a whiteboard. This is a photo that we took after a session in which we sketched the daylenght chart (3), some interactivity fields (4), sunshine in different seasons on the globe (1) and the day-night-border moving over potato land (2).

We felt that this was an efficient way of showing the gradual change of the daytime length over the course of a year, if we could a) add the right amount of detail that makes it more intuitive while not adding complexity and b) find a version that works better on mobile devices.

For solving point a) we had a list of interactivity ideas that we wanted to implement and offer to our readers:

The option of entering a zip code for your own daytime chart and sunrise/sunset times.

A second zip code field, to let you add another place in Germany that gets visually overlaid and shows, for example, how much longer or shorter the sunlight times are during the summer in your place compared to where your parents live.

With the current discussion in mind: A switch that changes the chart to show two scenarios, DST always on and DST always off, additional to the actual time — DST in summer and standard time in winter.

One idea didn't make it: two sliders with which you as a reader could set the time when you wake up and go to bed so you can get the information of how many hours of daylight per year you have while you're awake and what the difference would be in the two mentioned scenarios. Adding this feature would have overloaded the interactive — and realistic sleeping times are a bit more complex (think weekends, holidays, irregular working times, naps during the day, awake times during the night etc.).

The solution for b), a version for mobile devices, was simply to rotate the chart 90 degrees and have the daytime from left to right and the days of the year as very narrow lines from top to bottom. This works well for desktop, too. On desktop, you can hover your mouse cursor over the chart to see each day's sunrise and sunset times; on mobile the day that's in the middle of the screen is activated, so you can navigate by scrolling.

Some curated pairs of places are offered next to the zip code fields. They are examples of places in Germany that are far away from each other or on the same latitude or longitude.

How does it affect our day when the switch between summer and winter time is abolished? In this interactive graphic, the user can switch between the three possible scenarios.

Around that time, I started playing around with Observable notebooks and enjoyed the possibilities. Observable is an online tool where you can create notebooks and share them, fork other notebooks etc. A notebook is »an interactive, editable document defined by code. It's a computer program, but one that's designed to be easier to read and write in by humans. A notebook can be used as a scratchpad for exploring data, or to explain quantitative phenomena.« (Mike Bostock, creator of Observable). If you haven't tried it out yet, I recommend you to do so by starting with this short introduction.

Combining code from two notebooks by Mike Bostock—one creating a globe in orthographic projection , the other one, called solar terminator, drawing the day-night-border on a map — is easy and results in a globe showing where it is day and where it is night. I forked one of the notebooks and added code from the other. In one version, I added inputs for changing the displayed date and time, and in the next version I let an animation play back a specific day of the year. I wasn't aware that sunset and sunrise times can be this different inside a part of the globe as small as Germany.

Because I wanted to show the two extremes, the solstices in summer (»longest day«) and winter (»shortest day«), plus the equinox (day and night having the same length, occurs twice a year), I made an Observable notebook that has three animated globes next to each other, each with Germany centered and highlighted. And I was glad I could name it »Germany's Extreme Solar Terminators«

Since Germany is not very big in this projection, I decided to add zoomed maps to each globe. I found that the globe with the moving »shadow«, combined with a smaller map of Germany with the same shadow moving over it was a brilliant way of showing how big the differences can be—between places in Germany and between different days of the year.

»Germany's Extreme Solar Terminators«: These three globes show Germany's shortest and longest day of the year plus the equinox - when day and night have the same length.

If you don't live in Germany and want to make a similar map, you can try to by forking my Observable notebook and changing it correspondingly. Someone already did this with Wisconsin!

Exporting from Observable and making the graphic work in our CMS was a bit tricky, but meanwhile—since Observable is under constant development—it offers an export feature. I still need to try it out. Let me know if you did an what your experiences are.

Check out this New York Times piece if you want to read more about DST!