In the media there are usually two strategies that get attention: be the first or be the best. From the two, being first is the easier but less glamorous one. After a few weeks of reporting on how the Corona virus spread in winter 2019/20, the idea of creating a time-lapse on a map came up. Although this is not something especially original, we hadn’t seen it in other news outlets. So there was a chance for an easy win, if we were quick. In this article I will describe how we did it and will add some reflection on how to do it differently.
The resulting map
In the following weeks, the map was continously updated and reused in multiple articles reporting on Covid-19. Our team described the creation process in a small article for the general public.
A mobile first map
Usually, world maps are terrible for mobile devices. They have the wrong aspect ratio and the maps get tiny. In this case, the data was on our side. At the point of creation, only few cases of people infected with the corona virus had been reported in North America and none in South America. So we simply cut the Americas away and ended up with a mobile-friendly map. A good example for how knowledge of the data can help design a better visualization. Naturally this came back to bite us later, but well …
A blend of manual and computational labor
Our data source delivered daily updates on cases that had been reported in the Chinese provinces and in different countries. Even though it was great to have such frequent updates, it also meant that we would need to update our map almost every day.
This fact strongly implied that we needed to be able to automatically generate the map. At the same time, we needed to somehow connect the data to the base-map via code.
For this we drew invisible rectangles on top of each country and Chinese province on the map. Each rectangle named according to the corresponding country or province in the data. We then brought the data and the base-map-SVG into an Observable notebook and started to experiment.
Designing with code
At the beginning, we had the idea to present individual cases as dots that would fill up the rectangles on the map. This was out of respect for each individual that had been affected by the virus. A life that was in danger after all. On the other hand, showing small dots somehow implied that we knew precisely where each case had occurred. Which was misleading to the readers. We finally decided to use single circles and represent persons infected through their area. This, on the other hand quickly led to the Wuhan circle covering the whole map. As our goal was to show the spread of the virus throughout the world, we reduced the visual impact of this circle by applying a logarithmic scale. This made the map look visually similar to the first variant while avoiding to problem of randomly placing dots.
A positive side effect was also that it reduced the drama of the map a little bit which we felt was the right thing to do after consulting with domain specialists.
These decisions were only possible because we saw the results of our design choices with the real data.
Why GIF?
Finally everything was exported as an animated GIF. GIF was the quickest way to get something on the website. In retrospect it was not the best decision. As time went on, the GIF quickly grew to sizes that are unhealthy for a news website (each new day added about 150kB). The better choice, clearly, would have been to make a video or even an interactive. But remember, we aimed at being first.
Outlook
Creating a visualization that was mostly hand-made but at the same time updatable in a short time forced me as a designer to create a workflow that I had not thought about much before. Building a base and placeholders by hand in a design tool was definitely faster and less limiting than implementing it all in D3 or some other more programmer-oriented tool. At the same time, manually placing and sizing each circle would not have allowed us to do design iterations and to continuously update the map during the following weeks. For this, programming was the quicker option. It really felt like the best of both worlds and it gave me a glimpse of how a future visualization design tool should work. Something already described by multiple authors in recent years.
I think it is likely that we will use this mix more often in the future and am looking forward to experiment with it more.