Project description

With ‘On SSM, sharpest divisions often just down the road’, the ABC News Interactive Digital Storytelling team sought to explore the interesting role geography played in the recent vote on the legalisation of same-sex marriage in Australia.The same-sex marriage vote was the biggest political story of 2017 in Australia, and because it was not legally binding it was vital that the will of the people be accurately reported on and reflected. As the national broadcaster we felt it was vital that we provided digestible and accurate content that helped Australians understand the result in all its complexity.However to effectively tell this story we needed to overcome a long-term design challenge. In Australia, the areas of greatest population are clustered in the smallest areas geographically, meaning there is a huge disparity in the size of electorates. Huge regional electorates dominate any obvious reading of the map, while tiny city-based electorates are so small they’re not visible on a national overview.Colour-based choropleth maps have been widely used, but it’s highly likely audiences leave with incorrect assumptions, due to this distortion of the data display. Cartograms and dot-point maps have also been tried, but none of these have proved an optimal solution.In order to tell the story of the results of the SSM vote, we came up with a novel solution to this problem, remixing a nationwide choropleth map into an interactive narrative visualisation. This was built as a ‘scrollytelling’ experience whereby the map zoomed and panned alongside the narrative, allowing us to walk the audience seamlessly through both the national picture and the local one.In the aftermath of the vote, there was much discussion about small pockets of opposition to same-sex marriage. For much of the campaign the accepted narrative was that rural and regional areas would have higher levels of opposition than suburban and urban areas.But what turned out to be notable, and what this story effectively allowed us to explore, was that these areas of opposition were often geographically very close to areas of high support.This pattern, while most prominent in Sydney, was reflected around the country. The format of the story allowed us to explore the reasons behind these divisions in a way that was integrated with the visualisation, giving the audience a deeper understanding of the issue.

What makes this project innovative?

Noteworthy design and development characteristics of the story include:* The piece was designed with a mobile-first mindset. Maps can be a particularly frustrating experience on mobile, with users expected to pinch and swipe within a small box to zoom and pan. Our approach avoided these problems, and allowed use of the full mobile screen as a canvas to tell the story. We always aim to ensure that our ever-expanding mobile audience is presented with the same quality of experience as those on larger devices.* The map is interactive and explorable in a subtle way, by tapping on any electorate, but once the user resumes scrolling, the map will return to the storytelling narrative as soon as a marker is encountered.* We’ve designed the ‘scrollytelling’ experience to be best-practice by maintaining the natural movement of text and always keeping a scrolling element visible on screen to avoid the sense of scrolljacking.* We designed smooth animations and transitions between locations on the map, including a 'bounce' that helped to orient users so they knew the broader context of where they were leaving and arriving to.* Colour contrasts are all W3C AA compliant. Colours contrast sharply with the background and are optimised to ensure clarity for our readers with various forms of colour blindness.* This piece utilises 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 interactive 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 was well received by our audience, and shared widely across Facebook & Twitter. We measure performance with our site-wide analytics, and it stood out from our regular reporting, and remained popular with our audience long after publication.

Source and methodology

We published this story the day following the announcement of the survey result. We had already published our full results explorer (based on Australian Bureau of Statistics data), which we were able to then use ourselves as in interface to interrogate the data, and pull out interesting statistics. We had been experimenting with using maps as scrollytelling visual components in previous stories, and felt it was the best way to walk the audience through some of our immediate learnings.

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 SVG and by using a reduced-complexity TopoJSON map. Subtle use of bezier curves allowed us to move between locations without upsetting the reader, and giving them a sense of place/distance.

Project members

Cristen TilleyTim LeslieBen SpraggonNathan Hoad


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.