Project description

In times of uncertainty and fear, clear and accessible information is critically important. Globally, the North Korean nuclear stand-off was one of the most important subjects of 2017, and the public’s desire for information was extremely strong.The ABC News Interactive Digital Storytelling team decided to tackle the subject of informing people about how far North Korea’s missiles can reach around the globe, based on the regime’s current known capacities.The story uses a ‘scrollytelling’ experience that brings together textual elements and graphics in a seamless manner, allowing the audience to experience both simultaneously. The text was carefully written and edited to marry with the graphics, so the two were complementary rather than repetitive or competing.The piece was conceived and designed with a mobile-first mindset, to ensure our ever-expanding audience on mobile devices have an experience of as high a quality as those on larger devices.

What makes this project innovative?

Noteworthy design and development characteristics of the story include:* The ‘scrollytelling’ experience maintains the natural movement of text and avoids any sense of the user's natural, expected experience being hijacked.* The visual components are very clean and simple, as the key goal was clarity. We removed any unnecessary design distractions and used whitespace liberally to let the content speak for itself.* The animations are kept fast and smooth for the audience on all devices.* Colours contrasts are all W3C AA compliant and colours are optimised to ensure clarity for our readers with various forms of colour blindness.* The story uses progressive enhancement to ensure that the content is emphasised first. Viewers with limited browsing speed/capabilities are shown a non-interactive version of the story while viewers with more modern browsers are automatically upgraded to the full experience. This means the story will always be shown in the best way possible for each reader.

What was the impact of your project? How did you measure it?

The story prompted a huge response from our audience, and attracted a new global audience to the ABC News website, making it the ABC's most popular story of the year with more than 1 million pageviews. Importantly, each user spent an average of more than 4 minutes on the page, meaning that even though the story went viral, it captured and held the interest of each visitor.The piece was picked up by the Data is Beautiful community on Reddit (link provided), and audience feedback included comments such as:* "No joke that is the coolest mobile site I've ever visited. I can't even think of a close second. That said, the info presented is very informative as well."* "I can't f***ing believe someone managed to make that work so smoothly on mobile. It's beautiful. I'm amazed. A new standard is set."* "The content is interesting and alarming, but I'm impressed with the way this information is presented. The scrolling text with graphics in the background that change with the scrolling. Very cool delivery of info. I'd like to see this used more!"

Source and methodology

The story came about while one of our researchers was gathering data for a larger piece on North Korea, and we realised the missile data would work well as a standalone story, if paired with the right visuals.

Technologies Used

The main technology used was JavaScript, leveraging D3 for the persistent visual component.The story was built on top of our own custom-built storytelling template, "Odyssey", which enhances the ABC News reading experience with clear typography, rich visuals, layered text & media, and allows producers to define 'scrollytelling' hooks.The fast and smooth animations are achieved by rendering a D3 map projection to a canvas element and by using a reduced-complexity TopoJSON map.

Project members

Matt MartinoBen SpraggonJoshua Byrd


Additional links

Project owner administration

Contributor username


Click Follow to keep up with the evolution of this project:
you will receive a notification anytime the project leader updates the project page.