Project description:

Over the past year, the world’s logistics network has seen unprecedented upheavals, affecting deliveries of everything from bottles of champagne to iPhones. The story uses a bicycle as a case study for the global delays in deliveries. We visualised a pre-disruption delivery timeline and contrasted it to the same delivery amid the global disruptions. The story then looked at the factors influencing the delays, as well as the results of them, with a focus on how congested ports had become since the beginning of 2021.

Impact reached:

The topic of supply chain disruptions has been the subject of countless stories published over the past year but few have taken a predominantly visual approach to explaining the topic. It’s a complex subject that spans economics, politics, manufacturing, and a global pandemic. We simplified the idea by providing a scenario that most people can relate to — ordering a product online, making the subject and its impacts easy to understand.

Techniques/technologies used:

For the introductory scolly section, we used our in-house scrollytelling component coupled with SVGs created in Adobe Illustrator. The SVGs contain multiple layers, which allowed us to manipulate them using CSS and Javascript. The ships and trucks are animated along SVG paths based on how far a reader had scrolled down the page, while other elements are animated using CSS keyframe animations. Elements like the wakes of the ships were made visible or hidden based on how far the ship had travelled since its starting position.

We created the second scrolly using satellite imagery sourced from SentinelHub. We manipulated the images in Photoshop and created SVG annotations in Illustrator and QGIS.

Lastly, the map component near the end of the story was created using D3.js with data from GoComet. The map is rendered as an SVG and is only visible on desktop. On mobile, it is replaced with a dumbbell chart.
 

What was the hardest part of this project?

The idea for the initial scrolly section took a long time to form. As a result, the ideation phase made up a significant amount of the overall time we spent on the project, and the introductory section went through several iterations. We started out wanting to create a globe and zoom into congested ports to display satellite imagery but decided we needed to ground the idea to make it more relatable.

We then settled on the idea of tracking a single product, though our initial thinking was just to have lines running down the page to show the relative trips of the bicycles before and after the disruptions. We eventually decided to go with illustrations to make a serious idea easier to approach and to move away from the abstraction of lines running down a webpage to something more literal that included actual modes of transport.

Another issue we encountered early on was dealing with the sheer amount of data needed to create a visualisation of ships traversing the globe, but as mentioned above we eventually dropped this idea.

What can others learn from this project?

Most interactive stories you see are visually quite serious, but it’s acceptable to lighten a serious topic with visuals that a child would understand. This is something we discussed a lot when putting the piece together. Our senior editors were worried about the seriousness of the topic and whether it would resonate with our readers. We brainstormed how we could go about engaging readers and decided to go with more “cutesy” animations as a way to draw readers into the story.

Project links:

www.straitstimes.com/multimedia/graphics/2021/12/global-supply-chain-problems/index.html