This was an in depth project looking at how climate change is predicted to impact temperatures in cities around the world.
I worked closely with our trainee developer, mentoring and learning from him throughout the process. We built the project using Handlebars, SASS, JS(ES6), Three.js and D3.
He was responsible for creating and optimising the globe using Three.js, whilst I concentrated on the scrolly chart section. I adapted the Pudding's Scrollama library to work with our bespoke internal scaffold, and gracefully degrade for older browsers (such as IE11). I built the chart using D3, with events to sync it up to the scrolly.
We concentrated on accessibility, making sure everybody would be able to engage with and enjoy the project. One of the ways we did this was by implementing an animation toggle, seen in the 'Gender pay gap' scrolly project previously. It was taken further this time - starting and stopping animations on multiple different elements using event emitters. We also synced it to the ‘prefers reduced motion’ option on user's devices - so if this is enabled, animations would automatically be disabled.
The project was translated into approximately 27 different languages. This meant it would be accessed by people all over the world, on different devices, connections and with differing amounts of data available. Therefore, we had to be mindful of performance. We did this in a variety of ways - from making sure all the images were optimised and lazy loaded, to chunking all the data for each city into individual files.
The project was a great success, seen by over 1.2 million people in the first 3 days and longlisted for an Kantar Information is Beautiful award.