Project description:

Dengue is a big problem in Singapore around the summer months. This project used public data to track the spread of Dengue around the city, and show where the Dengue clusters were located. The piece combined aspects of a tracker and an explainer to clarify how and why the virus was spreading.

Impact reached:

The piece provides information that allows the public to make better informed decisions, and, in doing so, keep themselves safe. It is an example of public service journalism in the way that it provides pertinent information to Straits Time’s general readership. The data is presented in an accessible way and the premise of the piece is simple: Are you living in a dengue cluster and what can you do to protect yourself from the disease?

The article amassed a significant amount of readers, with a good portion of them coming back to check for updates.

Techniques/technologies used:

Given that there is a tracker component to this interactive, we decided it would be best to automated the data collection. We wrote scripts in Node.js to scrape the National Environment Agency’s website to get weekly infection counts. We also automated the collection of spatial data that showed the locations of clusters, the severity of infection in that cluster, and the number of people infected by making API calls. These scripts run on a weekly basis to automatically collect new data once it is published by official sources.

Once scraped, data is pushed to a Google Sheet to store the figures. This data is linked to a Datawrapper chart and incorporated into the project itself. The page is built in Vue.js and all figures on the page are dynamic, updating whenever the new data comes in. This allows us to quickly add new data to the page whenever it comes out.

The map showing clusters on the page was built using Vue.js and Mapbox. It uses geocoding to convert a reader’s address into a location to show them how close they are to a Dengue cluster. The data from this comes from OneMap, whose API we called whenever we updated the graphic.

Other graphics on the page are created in Datawrapper using the data we scraped.

Context about the project:

The biggest challenge in this project came in the data acquisition stage. The scraping process was more challenging than usual as the data was embedded in the page as Javascript code. As a result, we need to find a way to not only target the data, but extract it from the page. This required using a substantial amount of regex to get the figures out of the code, and multiple custom functions to then convert data is the form of a string into something that could be executed in the script.

Additionally, some of the pre-existing Vue components for Mapbox were broken when we incorporated them into our Vue template, so they needed some re-engineering.

What can other journalists learn from this project?

Our objective was to marry the idea of an explainer and a tracker so we didn’t only provide information on how dengue was spreading th Singapore, but also how people could protect themselves. A lot of trackers we’ve seen over the past few years only present the situation, rather than providing an educational tool that allows people to make better informed decisions about how they protect themselves.

With the aim of making this an explainer/tracker, we also only made the top part of the page dynamic so updates would be quick. This meant that the explainer section, which required very few changes over time, largely stayed the same, while the tracker was updated on a weekly basis. This approach made the project manageable and maintainable over time, requiring only a few minutes to check the updates every week before redeploying the interactive.

Project links:

https://www.straitstimes.com/multimedia/graphics/2022/06/singapore-dengue-cases/index.html