2021
Two parts of a pandemic: How the coronavirus spread in Canada
Country/area: Canada
Organisation: Radio-Canada
Organisation size: Big
Publication date: 16 Dec 2020
Credit: Nael Shiab, Francis Lamontagne, Melanie Julien, Martine Roy
Project description:
For the end of 2020, I wanted to publish a geographical analysis on how the COVID-19 pandemic stuck the country. But in Canada, some health regions are very big and others are very small. So I decided to create a 3D data visualization of the country in which spikes coming from the health regions would represent the data. With this approach, the readers would be able to recognize the country areas. In the same, they would see and understand the data.
Impact reached:
This project is one of our most-read and shared stories of the year. The readers loved this visual approach to explain what happened in the country during one of the worst health crisis of our time. From the emails I received from many readers, they liked the aesthetic of it and how clear the visual the representation was. In the project, I also ask them their postal code to identify their health region. With this information, part of the text is dynamically generated to give the users the situation in their health region. They enjoyed this feature as well.
Techniques/technologies used:
I created a React (javascript library) custom template to keep the visualization visible at all times, while the user scrolls on the page. For the cartographic functions, I used D3. For the 3D universe, I used ThreeJS (javascript library) to create the 3D scenes and to animate them. Behind the hood, it’s using the WebGL technology. I also coded Node.js scrapers to retrieve the COVID-19 data.
What was the hardest part of this project?
I had to learn how to use the ThreeJS library by myself. It’s mostly used for commercial purposes or video games. But I couldn’t find great examples for journalistic data visualization purposes! So I had to figure out many things by myself, like how to transpose a cartographic svg path made with D3 to a polygon made with ThreeJS! Another challenge was to find the perfect point of view for the camera to work perfectly on both wide (desktop) and narrow (mobile) screens.
What can others learn from this project?
With this project, I think other reporters can learn how 3D dataviz could help to explain complex topics to the general public. 3D scenes have an extraordinary potential for immersive experiences. On top of it, it uses WebGL technology which makes the dataviz very efficient, even on mobile phones.
