Project description:

Africa’s cities are booming. But they will be hit hard by climate change. In interviews with 30 urban Africans, from people scraping a living by picking through waste to UN climate scientists, DW looks at how four big and fast-growing cities are adapting to the problems each faces: Lagos to scorching heatwaves, Kampala to rising waste, Cairo to potentially looming drought and Dar es Salaam to choking traffic.

Impact reached:

One important metric for measuring the success of our articles is to look at the dwell time. In the two weeks after launch, visitors stayed on the page for an average of 24 minutes. The article also did well in terms of overall visits and page impressions. Another qualitative metric that is important to us is who shares the piece on social media. In line with other data-driven pieces, the megacities project was well-received among multipliers and stakeholders, such as the deputy executive director of the UN Environment Programme; the director of the International Institute for Environment and Development; Oxfam’s Pan Africa director; ActionAid’s acting secretary-general as well as multiple policy makers and researchers familiar with the topic.

Techniques/technologies used:

We used different tools, techniques and technologies at different stages of the project. For data analysis and preliminary visualization we used Python, Excel, Google Sheets and d3.js. Mapping was done using OpenStreetMap and QGIS. The styling of the charts was adjusted using Adobe Illustrator, which was also used to create the more illustrative infographic on waste production. The UI-Design was created using the software Sketch and shared between designers and developers using the platform Zeplin. Quality control of the UI design relied heavily on the web developer/inspector tools of the web browsers Firefox and Chrome. In the production phase, building all the modules together into one webpage, our developer team relied on multiple web technologies to ensure seamless parallax-effects with both the chart elements as well as the looped video elements with overlaying text boxes, alternating with linear photo and video elements as well as text. Among the technologies used were d3.js and scrollama.js to implement the parallax effect and display images and charts. Lazy loading and the intersection observer worked hand in hand to optimize loading behaviour of the page in order to make it as efficient as possible. All images were compressed using squoosh.app to further optimize the data volume of the page. Node.js was used for assembling modularized scss files to the main.css. Jquery.js was used for the scroll-to-top button as well as for displaying images. The performance of the assembled website was assessed using Google’s Lighthouse Report web developer tool.

What was the hardest part of this project?

The core idea is to guide the user through the story step-by-step, for example with graphics that build up gradually. The user need not click on anything; his or her scrolling is the only form of interaction.

Coding the entire story from scratch granted us more creative freedom than your average content management system or any software tool does our opportunities were only limited by our imagination, skills, time and budget. Such freedom can be not only an advantage but also a challenge, as you have to create everything by yourself. While we built upon open-source packages, most of the modules were implemented for the first time at DW.

A second aspect we’d like to highlight is that we were not allowed to share some of the data freely, which is why we decided to go with static versions of the graphics rather than do interactives as that would have allowed for tech-savvy users to reverse-engineer the original data.

A third aspect that is special about DW is that we are catering to an audience mostly in the global south, so we have to balance data-heavy multimedia content with bandwidth availability in our target regions.

What can others learn from this project?

This project was the cumulation of many lessons we learned over several months building a visual journalism team. We have documented our learning experience in three blog posts (see additional project links) to make it easier for other media outlets to learn from our experiences. The most crucial lesson we would like to pass on would be to plan your new features in an A/B way: dream wild and envision the ideal version of a certain feature – but also think of an easier solution as a fallback option and plan in buffer time to implement those fall-back options in case you need them. 

Project links:

dw.com/african-megacities

github.com/dw-data/megacities

blogs.dw.com/innovation/better-templates-for-visual-journalism-scrollytelling-7-protips/

blogs.dw.com/innovation/interdisciplinary-storytelling-five-tips-for-better-results/

blogs.dw.com/innovation/interview-how-to-build-a-visual-journalism-team/

visualstories.dw.com/afrika-megacities-umwelt-klimawandel/

visualstories.dw.com/metropoles-africa-meio-ambiente-adaptacao/