Case Study — Animated map scrollytelling for the WHO
I partnered with Global Health Strategies to produce an interactive case study on the current state of polio eradication in Nigeria for the WHO. The objective is to show partners and donors that efforts to contain and eradicate the virus have never been more important, with the finish line so close now.
You can access the live project here.
Data Analysis
The project began with an analysis of the data, looking at wild and variant polio cases as well as vaccination rates in Nigeria. I restructured the data for integration into Mapbox, adding the necessary fields to implement date-based animations in Javascript.
Since we also wanted a chart that would compare the number of cases with immunisations, I also consolidated mutliple datasets into a single spreadsheet with a unified timeline.
Narrative Outline
Once I’d understood the subject and audience I suggested a narrative framework to the GHS team, combining visuals with editorial and functionality (details-on-demand, community stories) that would help readers.
The GHS team then took the lead, leveraging their deep expertise in the subject to develop the story. We used a collaborative document to work asynchronously on the content.
Design
Once the story was clear I could start working on UX, storyboarding, cartography and design. Paramount to me was pacing editorial content with maps, images and charts to keep readers engaged through a long-form article with complex information. Transitioning from visual to text seamlessly and animating the data wherever possible to reduce cognitive load.
Once the storyboard architecture was done we were free to work on designing an interface that would extend the organisation’s brand guidelines and clearly separate polio from vaccination chapters. We also used the design language for charts and map visualizations (using the colour spectrum to plot cases).
Cartography and Dataviz
My favourite sprint! Integrating custom datasets layer by layer and building the custom animations with Mapbox GL GS. The different types of poliovirus are represented by different colour markers with legends to give additional context to readers.
The animations were originally on a monthly interval, but the toll on processing power was too heavy so I switched to annual intervals which was more efficient and just as informative for readers.
The vaccination data was simpler, storing the number of immuniations per region. I used custom regional maps from OCHA to integrate the vaccination data and animate the regions separately.
The chart was built in Flourish, simplifying the data as much as possible to make the line graph more impactful, animated on load to help guide readers’ eyes towards the total number of vaccinations (500M).
Webflow Development
The article was built on Webflow, which speeds up the development process and lets me reuse this project for other GHS stories in the future.
All of the animations and scroll-based chapter updates are handled with custom Javascript in a separate static file. The chapters are defined with IDs from CMS collections in Webflow, with a switch statement loading or removing map layers and triggering animations as the user scrolls into a new chapter. Here’s a sample of how that switch statement works:
switch (chapterName) {
case 'nigeria-wild-1':
resetLegendsComponent()
createLegendComponent('dark', ["#F4693D"], 'Each dot represents a wild polio case')
case 'nigeria-wild-2':
map.setLayoutProperty('wild-polio', 'visibility', 'visible');
map.setLayoutProperty('variant-polio', 'visibility', 'none');
var from = chapterName === 'nigeria-wild-1' ? 'start' : 'peak';
var to = chapterName === 'nigeria-wild-1' ? 'peak' : 'end';
animatePolioCases('wild-polio', { to, from, duration: 6000 })
resetLegendsComponent()
createLegendComponent('dark', ["#F4693D"], 'Each dot represents a wild polio case')
break;
}Campaign and release
The story will be available soon as a part of a larger campaign, I also provided static and animated social media posts to help boost the release of the case study.
