How we used interactives to bring The Times’s clean air campaign to life
By Ryan Watts and Daniel Clark of The Times and Sunday Times interactive team
One of the reasons we add interactives to a story at The Times and The Sunday Times is to help guide readers through important but complex data. The data around air pollution fits this description to a tee.
The units of measurement need explaining, the weight given to different pollutants requires thought and determining whether the results are good or bad when the full health implications are unknown is complicated.
On May 9 The Times launched the Clean Air for All campaign, which examined the scale of Britain’s dirty air, accused the government of inaction in tackling pollution and called for the introduction of a new Clean Air Act.
The campaign has featured on the front page of the newspaper four times with more than 30 pieces published on the subject.
The interactive team were excited from the off. Air pollution is the perfect topic for personalisation — readers want to know how it affects them personally — and there is scope for producing visualisations which both wow and inform our readers.
We decided to focus on three projects:
An alternative league table of air quality at London’s schools
This showed readers how air quality at any particular school compared to others in the borough, how it was predicted to change in the coming decade and whether a school near by offered cleaner air.
How bad is the air you breathe? National postcode lookup
Using government modelling we compared the air quality in a chosen postcode with that in the rest of the country. We also mapped how far a reader needed to move to live in an area where air quality would meet World Health Organisation guidelines.
How do we make the air in our cities breathable? A visual explainer
We wanted to be constructive and look at how we might fix the air pollution problem. This project used a bespoke storytelling template, similar to the stories feature on Instagram, and aimed to redesign a London street to promote healthier air.
All three projects were collaborative efforts with unique challenges. Below we explore the obstacles we faced in researching, designing and developing our school league table project and how we overcame them.
Challenges in data journalism
Finding the data was our first hurdle. Britain is not set up to measure air pollution across the country, although installing a monitor in every postcode is one of our campaign demands, so we knew that we would need to rely on modelling.
This modelled data, where pollution levels are estimated based on real data, needed to be of a high enough density to return accurate readings for every school in the capital. Thankfully the Greater London Authority publish ? 20-metre by 20-metre data, which gave us thelevel of detail required.
Outside London the data is only available in 1km by 1km squares, which was not detailed enough to create a score for specific schools. Air pollution outside the capital is significantly worse than elsewhere, however, so we were satisfied that a London-only tool was justifiable.
We initially planned to use school postcodes to match them with the air pollution data, joining each school to the nearest point. But when we overlaid our geo-referenced postcodes on to an Ordnance Survey basemap, we found that these postcodes didn’t always fall within the boundaries of the schools. When we added the air pollution data we also found that there were multiple points within the grounds of any one school.
Using the closest point felt a little arbitrary and it wouldn’t capture the best and worst air quality to which a single school site was exposed. We decided to use shapefiles of school boundaries instead, and if a point of air pollution data fell within the shape we added it to the school’s file. Averaging these points gave us a much more accurate estimation.
Working our way through this process required a significant amount of experimentation but ultimately we were able to produce a script that took in five million rows of air pollution data and accurately matched it with the shapefiles of 3,000 London schools.
We found that an element of data wrangling was required for each of our three projects (and for other stories in the campaign), so keeping a single, well-documented repository of scripts made the process much easier to manage.
Challenges in development
The main challenge we faced from a development point of view was the volume of data we needed to host and display. To put this in context, we had detailed data for more than 3,000 schools in London, each with 20 to 25 data fields, and 1.7 million postcode records across the UK.
For projects with less data we may load this information from a file within the interactive, but the data for the national dashboard was 434MB, which would have drastically slowed down the reader experience, so for us this wasn’t a palatable option.
To overcome this we decided to create an application programming interface (API) that would read information from a database and return it to us as and when we needed it. We started by importing the data into an SQL database using Sequelize — a tool used in Node.js for mapping data into a database.
The next stage was setting up a simple API with two different end points for schools and the national picture. For the schools version, we needed a way of returning the selected school as well as all of the schools within a borough. The code below shows how we utilised the lambda event object to handle this, meaning we could pass in ?school_id=… or ?borough=… when calling the API.
const { urn, borough } = event.queryStringParameters || {};We could then use these variables when querying the database to make sure that the correct information was returned.
Finally, we deployed the API to AWS Lambda via serverless, a framework that we’ve written about in depth before. We learnt a lot throughout this process, and we’ll definitely be using this method of data storage again for future projects.
Challenges in design and data visualisation
The biggest challenge from a design point of view was getting colours that worked. We wanted to use a consistent palette that readers could use as a shortcut for working out whether air pollution was high or low. This would be difficult with two different measurements so we opted for one: particulate pollution.
We discovered that every school in London has an estimated particulate pollution level higher than the WHO limit. Using a green-yellow-orange-red colour scale — commonly used when presenting air pollution data — was therefore misleading, as green is too often associated with a healthy environment, or clean air in this case. Only having red and yellow helped to communicate the seriousness of London’s air pollution within every search result.
In reusing the same colours throughout our work, the same scale was present in each section of the interactive: two charts, a map and table. This allowed us to use a contrasting blue to represent a pollution level lower than the WHO recommends, which made a striking point in itself.
What’s next?
Clean Air for All is a live campaign and our attention has turned to where we can contribute next. Keeping journalists, designers and developers involved from the start led to one of the most striking projects we’ve produced this year and when we do build a new air pollution project we’ll be sure to keep the process collaborative from the off.
