Project description:

Considering confirmed and suspected deaths, in September the capital of Chile was reaching 10.000 deceases, placing Santiago as one of the cities with the most deaths from the pandemic in the world, exceeding a thousand deaths per million inhabitants.
We decided to address this with a visualization week by week. As the users scroll down, they see a map of Santiago filling with red and blue points, each for every death, explaining also the most important events of that week. In the end, the map is almost no visible for so many points, which is very shocking.

Impact reached:

We had 20,000 unique visitors in the next weeks after publishing our interactive. It was very commented on social media, highlighting “the impact” of seeing illustrated all the people who died and setting a record about passing the 10 thousand deaths (a number not everyone was aware of). “It distresses you a bit, but it’s a very good way to graph it”, someone said on Twitter. We published it during the weekend of our national holiday, stressing the fact of how important was that we all took care of ourselves and we hope it helped at least a bit.
Our main goal with this project was to show a really big number, a data hard to visualize for people, in a way they could “see it”.  How to show, in more than a number, all the persons who died in just around seven months. In that sense, the week by week advance of the scrolling worked quite well, seeing every week more and more points in the maps. We also keep “fixed” in the upper side of the web a score of the number of people dying, which was also increasing every week. We believe this system helped readers to really understand the severity of the casualties.

Techniques/technologies used:

We used GatsbyJS, P5.js, ReactJS, GraphQL, WordPress (headless).

We first did the canvas part with P5.js drawing the Great Santiago area with segmented custom topojson files with the “comunas” delimiter and their correspondent centroid. That allows us to group little spots around that point programmatically. 
Then we took the scraped data ordered by “comuna” (comune), date and other statistical data into a CSV file (gender, COVID-confirmed, or assumed by close contact), and we load it next to our P5.js drawing. Then we took our P5.js static development into a ReactJS component, sorting the passing days data with additional data fetched by headless WordPress custom meta consumed by Gatsby’s graphql.
With a scroll-aware listener, we were able to sync weeks with week-to-week data through a React useState, painting the corresponding real numbers into our P5 canvas, giving the actual scale of the death toll to our user according to the scroll pass by.

What was the hardest part of this project?

The hardest part of the project was to decide the graphic layout to show the data. We draw and iterate different options for showing the deaths in the maps and the increase during the time (for example, to make circles of points for each commune or to show the point in a more distributed way. We also tried a lot of ways to build a “dialogue” between the text and the graphics. In the end, we choose what we thought caused more impact on the user.
Another hard aspect was the scrolling and make it work as we wanted, with smooth transitions between weeks.
We worked with a freelance data scientist and a designer, and the rest of the work was developed for 3 editors and our front developer. It took us more time than expected because we almost did it in our “spare” time (we regret nothing). I think our bosses didn’t understand and value what we did until they saw it, which confirms our initial assumption, that this was very difficult to realize how harsh the data were until you see it.

What can others learn from this project?

What we most enjoy about working on projects like this is working in an interdisciplinary team in a very horizontal way. We learn so much from the data scientist comments and suggestions, the same from the designer and of course, our front developer who’s always looking for better ways to improve the user experience.
This is the kind of project where journalists can expand their knowledge about visual journalism, which is more important every day. Because one thing is the data, and journalists can be very good at gather, process and write about it, but sometimes, especially in these times, that is not enough. 

Project links:

interactivo.latercera.com/muertos-covid-santiago/muertos-covid-santiago-data/