How much warmer is your city? Behind the scenes of our climate change interactive

How we built an award winning interactive article to showcase temperature change, and its impact, in 1000 major cities around the world.

In the BBC Visual and Data Journalism team, we work on a range of different projects, from the straightforward ‘How did my MP vote on Brexit?’ to the more complicated climate change food calculator.

How much warmer is your city?, a project we published in July 2019 that visualised temperature change in major cities across the globe, was definitely the latter. Two data journalists, two designers and two developers joined forces for approximately two to three months to create this project (whilst juggling other things); with input from leading climate scientists and our colleagues on the BBC News Science and Environment desk. It was an experimental format for an article, making use of technologies and approaches we had little experience with.

How much warmer is your city? won the WAN-IFRA European Digital Media Award for Best Data Visualisation, with judges describing it as: “Amazing from start to finish. Proves the power of data visualisation when it comes to illustrating an important topic.”

This prompted us to take a look back over the variety of things we had to consider when building the project, and everything we learnt along the way.

Drawing the reader in

The impacts of climate change on people’s daily lives are complicated, only more so when specific numbers and a variety of scientific projections based on different scenarios for the future are being discussed. We spent a long time figuring out how to set the tone for the article, make it informative and personal to the reader while at the same time trying not to make it intimidating or overwhelming. We discussed at length how to present the projections, without making them so daunting that the user wants to just close the page and run away.

To make it stand out from our other articles, we changed the background to black. This small detail instantly modified the atmosphere of the article and emphasised the urgency of the topic. It made the visuals in the piece stand out, and immediately grabbed the reader’s attention.

Screenshot of the top of the article, showcasing the impact of dark mode
Screenshot of the top of the article, showcasing the impact of dark mode
The article in dark mode

Our goal was to not only engage the reader but keep them interested until the end of the article. How could we do something that would fascinate readers, evoke the global scope of the project and, at the same time, communicate the importance of climate change? A 3d interactive globe! Having not delved much into 3d data visualisations, the team were very excited to try this out.

The globe shows how much July temperatures across the world have changed in the last 100 years. At first, creating a 3d spinning globe felt like an impossible task. We experimented with a lot of different techniques — from masking an image, to creating a 3d SVG.

5 different approaches to rendering a 3d globe

Each of these approaches had their benefits and drawbacks. Some were visually inferior, others would be slow and inefficient — particularly when animated as it would involve a lot of re-rendering and re-calculating positions.

In the end, we opted to make the globe using Three.js and WebGL, because it was surprisingly easy to prototype, adaptable and visually impressive. Animating it was much easier, handled by moving an inbuilt camera around the Earth rather than trying to rotate and reposition the globe ourselves. Making use of WebGL also meant the heavy lifting of rendering the globe was handled by a computer’s GPU rather than CPU, meaning that it won’t take up all of the processing power and slow a whole computer down.

We mapped the temperature data to the globe, but removed the oceans since our piece focused on land temperatures, this had the benefit of making country boundaries clearer, the data lighter and the whole globe prettier.

Gif of spinning 3d globe showing average temperatures of the last 100 years
Gif of spinning 3d globe showing average temperatures of the last 100 years

To build the globe itself, we used the Three.js ‘Sphere Geometry’ and passed pre-defined values for the radius and segment size (the number of the polygons used to build the sphere — the bigger that number, the more rendering power needed, but the smoother/rounder it looks). We reduced the segment size for mobile devices so that it renders faster — the reduction in polygons didn’t make it look less spherical because the model was smaller too.

The land data is mapped using ‘Particles’. We used a CSV containing the latitude and longitude for the points, and a number indicating how much the temperature has changed. To position the grid on the 3d globe we had to transform the 2d Cartesian product from the data to be 3d and apply it to the sphere’s dimensions — luckily this was only 3 lines of code!

const x = particlesRadius * Math.cos(latRad) * Math.cos(lonRad);
const y = particlesRadius * Math.sin(latRad);
const z = particlesRadius * Math.cos(latRad) * Math.sin(lonRad);

Walking through the data

How do you emphasise the potential impact of a two degree temperature rise when it sounds relatively minor? How do you show multiple temperature projections, each based on different scenarios of our future, without overwhelming the reader?

To help people realise the impact of temperatures in their own area, we built a lookup allowing readers to pick a country and search for their city, or a city close to them. This made the temperature change no longer so abstract, readers could see how January and July temperatures in their own areas had changed in the past century and were projected to change in the future.

Plotting all four of the projections together in one graphic made it difficult to explain — it was very busy and hard to understand what was being shown. Having them separated into static graphics side by side, made them look too similar — and was difficult to compare the temperature increases.

‘Scrollytelling’ is a technique of updating or revealing a graphic (or other visual content) as the user scrolls. It has been used more frequently in newsrooms recently, as it provides a great way of holding the user’s hand and walking them through often complicated data. We used it for the first time in Falling through the pay gap, and felt it really helped us tell the story in the data. We decided it would be a good tool to use to help us explain the possible outcomes predicted by scientific models of how temperatures might change by 2100. It helped us break down the different scenarios, with the data changing as the user scrolled from one scenario to the next, highlighting the differences in temperatures expected based on future greenhouse gas emissions.

Gif of a chart showing Brighton temperatures, being updated on scroll
Gif of a chart showing Brighton temperatures, being updated on scroll

To make this work technically, we adapted The Pudding’s Scrollama library. We rewrote it to be class based, removed repetitive code and made it more tightly coupled to our internal tooling. Because we support users on Internet Explorer 11, we also adapted how it works on different browsers — using CSS position: sticky by default, but with feature detection we provided a fallback to position: fixed if sticky was unsupported. This meant the scrolly experience still worked in older browsers, but was just a little less smooth.

Now we had explained how much temperatures could rise — in a place personally relevant to the reader — we needed to remind them about the consequences of global warming beyond specific temperatures. To do this, we decided to use case studies to look at the real world impacts of climate change. We focused on three very different locations: the Indonesian megacity of Jakarta, the US state of New York, and the Arctic. We spent time trying to figure out how to present these, whilst keeping them in theme with rest of the article. We wanted to make them engaging and attractive, so decided to use animated illustrations to accompany each of the three case studies, achieved using CSS animations.

Sea levels rising in New York

These animated images, along with the transitions in the scrollytelling section and the rotating globe, raised questions about how users with motion sensitivity would be able to access our content. Whilst investigating the use of scrollytelling in the newsroom, we read articles such as Eileen Webb’s Your interactive makes me sick, which highlights the issues faced by people with vestibular conditions when the web is dominated by moving/animated content.

To counter this, when we were developing Falling through the pay gap, we implemented an animation toggle — allowing the user to disable animated content before they saw any of it. It received positive feedback so we chose to re-use it again here. This time it had to control multiple different elements, which was achieved using event emitters in JavaScript. We also went one step further and synced it to the prefers-reduced-motion option, which allows users to disable animations and transitions, at an operating system level. If a user had enabled this, the animation toggle would be set to off by default .

Reduce motion in Apple Settings
Animation automatically disabled

There were many other things we had to consider to make the project accessible. For example, how would a keyboard-only user interact with the piece? From our research, it is easy to get stuck or lost in a lot of interactive articles if you try and navigate without a mouse. This affects a variety of users — from ‘super users’ who find it quicker to interact with their devices using only a keyboard, to arthritis sufferers who struggle to use a mouse. We made sure that users can tab to the interactive elements on our page and navigate the article, including the scrolly section, using the directional arrows.

We also spent time trying to create an optimal experience for screenreader users. This involved a lot of discussion around how to create decent non-visual descriptions of the globe, and making sure there was enough context in the text part of the scrolly that it made sense without the graph.

Adapting for a global audience

Given the global appeal of the story thanks to both the topic of climate change and the the inclusion of 1,000 major cities worldwide, the story was re-versioned for a number of World Service news websites, making it available to non-English speaking users all over the world. It was published in 27 different languages, a department record at the time.

‘How much warmer is your city’ in 27 different languages
‘How much warmer is your city’ in 27 different languages

The translations were all written into a spreadsheet, which was transformed into multiple JSON files — one for each language — which we then pulled into the project using key names, allowing us to use one code base to produce all 27 versions of the interactive.

But translating a piece into different languages isn’t all we need to do to make our projects accessible for users across the world. Internet connections, data availability and devices vary greatly from city to city, country to country — something we are even more aware of since the introduction of ‘Visual Journalism Hubs’ based in cities from Jakarta to Lagos. We have to be careful to make sure the size of our webpage doesn’t impact our users too much — especially those trying to access it over a poor connection or with very little data to spare.

To do this, we made sure we initially only pulled in data that was necessary — the data which powers the globe — then, once a country and city is selected, we pull in the city’s projection data. We also used a technique called ‘tree-shaking’ to make sure that we were only pulling in the code we needed from any external libraries we were using (from Three.js and D3 in particular).

We used ‘lazy loading’ so images would only be downloaded if the user reached that part of the page. We also minified all the SVGs and the code files we produced — making sure every file was as small as it could be to reduce overall download sizes.

We used a method called ‘request animation frame’ which allows us to detect if the globe is in view, and then make sure it was only being animated when it was — so as not to use any more processing power than necessary.

We strongly believe in progressive enhancement — that all lower end browsers or users without JavaScript should be able to access the core information, in as nice an experience as possible. We worked hard on that for this project — providing a map fallback image for the 3d globe, which still showed the same information. The animated images use CSS animations so they still work regardless, and the lazy loaded images are wrapped in `noscript` tags so users without JS can still get the images. The scrolly is the only part which relies heavily on JavaScript — we cannot provide data on a user’s city without JS so we have a custom error message here, telling the user to upgrade their browser.

Screenshot of a bespoke ‘update your browser’ message
Screenshot of a bespoke ‘update your browser’ message

What have we learnt?

A lot! Nearly every step of the way involved learning something new. Whether it was how to even attempt to make a 3d globe, how to use ‘prefers reduced animation’ or how to animate SVG images — it was all fairly new to us. That’s what made it such an exciting project to work on, and probably why it was received so well (reaching over 1 million users in the first few days) — it was very different to a lot of the articles we produce, even in Data & Visual Journalism.

What’s next?

We’ve taken what we learnt in this project and created more scrolly projects — including ‘An animated tour of the UK election results’ and ‘How a single locust becomes a plague’.

We’re eager to find more use cases for experimental visual and data journalistic content — whether it include scrollytelling, 3d visualisations or something else entirely.