The COVID-19 pandemic will go down in history. Graphics of the spread can thus fulfill an important purpose: During the crisis, visualizations help us understand the extent of the pandemic. And in hindsight, they serve as a powerful historic reminder.

Most of the COVID-19 maps published by media companies and research institutes focus on the current situation. However, we believe that in order to understand this pandemic, additional context is necessary.

What it does

COVID Chronicles visualizes the spread of the virus over time and sets these numbers into perspective by providing newspaper articles for each day. This representation provides a more detailed overview than raw numbers or existing maps would.

By default, the map is colored based on the current COVID19 infections in each country. However, it also includes two coloring modes based on new infections per day and infected people by total population. Additionally, the total numbers are shown in a header and country specific data is displayed in popups.

To set these numbers into perspective, COVID Chronicles provides newspaper articles for each day that are related to the pandemic. It currently relies solely on articles by the New York Times. The publication has a global reputation for neutral and detailed coverage of the Corona pandemic. Future versions of COVID Chronicles might include a more diverse and localized set of sources.

The slider can be used to get an understanding of how the numbers and the news coverage changed over time. It is possible to navigate between the dates manually or play an animation that illustrates how the virus spread. Check out the website and our Github repo.

How we built it

Working with maps is always a compromise: We decided to not rely on a service like Google Maps or Leaflet. Instead we built our project using the javascript library D3.js. This gave us more flexibility when visualizing the data, but made it harder to include features like zooming, panning as well as a responsive design.

After familiarizing ourselves with the library and creating a basic layout, we started working with the COVID data provided by John Hopkins CSSE.

After getting the automated coloring and other basic functionalities right, we started working on the inclusion of newspapers articles. The New York Times not only offers great journalism, but also several APIs for developers. These were used to get an extensive collection of newspaper articles about the Corona crisis.

Challenges we ran into

Both of us have comparably little experience when it comes to web development. We hence had to overcome a lot of basic challenges and also struggled a fair bit with getting the layout right.

It is fairly complicated to build a functional map when not relying on existing map providers. Making a map using D3.js, where countries can be colored individually and users can zoom in or out, took us quite some time. It is still not fully functional on mobile devices, but works fairly well on desktop computers.

Accomplishments that we are proud of

We were able to overcome many hurdles and created a working prototype in time. Especially the functional map as well as the thought-out design fill us with pride. (Also, we are still talking to each other, which is not easy to achieve after working on a project for 72 hours straight… ;) )

What we learned

The most obvious learning is the correct handling of the D3.js library. As we had only little web development experience, we were able to take away many lessons for future projects. Due to the nature of our submission, we also learned quite a few things about data processing as well as the work with APIs. Also, since this was only our second hackathon participation, we were able to improve soft(er) skills like team communication and project management.

What's next for COVID Chronicles

There are many improvements necessary. We want to make the design more robust, especially for mobile devices. Additionally, it is our goal to include other metrics, for example financial data, and a more diverse set of sources for newspaper articles. Due to our background in journalism and our contacts to the Swiss media scene, it might be possible to collaborate with a publisher to develop COVID Chronicles further. If you have any ideas, feedback or an urge to collaborate with us on this project, please let us know!

Try It out



css, d3.js, html5, javascript, scss

Devpost Software Identifier