The website shows an animation of all registered SARS-CoV2 cases in Germany throughout the year 2020. The cases are shown over time per county using open source data. Cases start on the 28th of January 2020.
You can see it live here or on Vimeo.
I'm using data from npgeo-corona-npgeo-de.hub.arcgis.com for the covid cases. Some corrections to the data had to be made as it is pretty flawed. I removed all reported cases before the 28th of January 2020 as the first case was reported on that day and confirmed the day before.
Due to problems with reporting, the total number of cases differs from the official number of cumulative cases for the year 2020. To compensate for this fact, the number of cumulative cases shown in the animation is increased towards the end of the year.
In order to draw the counties and match them to covid case records, I generated some GeoJSON enriched with data from wikipedia. It includes the counties names as well as the municipality code (AGS = Allgemeiner Gemeinde Schlüssel) using GeoJSON Utilities.
The project is created using babylon.js.
The first step is generating and drawing the counties. The GeoJSON data is loaded and projected on to the canvas. The necessary triangulation is done using earcut library and geo projection using d3-geo. I took a lot of inspiration from this great tutorial by Jay Kim and this one by Fabian Gündel.
The keyboard and mouse movement is pretty janky since I just add on the camera target vector without lerping or animation but who cares, right?
There are many things I really would've liked to improve, but it's a weekend project after all.
I would sum it up as a beautiful heap of bodged lines connected by plenty of setTimeout() 🏃.
An array of all drawn counties is created in the process which also includes the counties name, the center point of the mesh, bounding box as well as the GeoJSON properties.
The covid case records are loaded from JSON source, sorted and grouped by date. Reported cases before the 27th of January 2020 are set to zero.
While drawing the cases for each day, execution time is measured. If the process was too fast, execution is paused for the time difference (minimum execution time - real execution time) to display each day long enough and for the DOM changes to be rendered.
Covid case data by Robert Koch-Institut (RKI) dl-de/by-2-0
County data was generated using GeoJSON Utilities
Feel free to use my code in any way you want.
Special thanks to Beni, Denise, Tarek and Mery for the support 🙏
Doctors Without Borders are taking care of Covid patients and providing mental health support around the world. You can help to save lives by donating to them.
The content provided through this project is an artistic representation of open source covid case data. I made some adjustments (see above) based on scientific facts and official reports.
I assume no responsibility for the correctness and completeness of the information provided as well as unauthorized modification of the information by third parties.
You can get in touch with me via vagrant-angora@maskmail.net