David Attenborough’s Great Barrier Reef

An interactive journey



reef_wave

David Attenborough’s Great Barrier Reef saw David and Atlantic Productions team up with leading scientists and researchers to create a TV series documenting how the reef was formed, its delicate balance and the grave threat it faces due to climate change.

Using state-of-the-art technology and film making techniques they captured some of the most amazing aspects of the reef environment.  Turning back time to reveal how the reef plateau was formed, how its delicate balance is affected by weather systems on the other side of the globe, and following the staggering journeys some of its visitors make as part of their annual migration.

The interactive site follows the key themes of the series and lets users visit five key locations along the reef – each one touching on a different topic. Mixing video, photographic and interactive graphics, each ‘module’ was designed to engage and inform with beautiful content and design.

reef_mantis

reef_whale

Working closely with Atlantic Productions we established early on that getting the ‘story’ of the site correct was critical to bringing people along on the journey and sharing as much research and understanding as possible.

Key also was that the site have synergy with the series – so multiple working prototypes of the site was created meaning we could easily make changes in direction. Once this was refined, the process of overlaying the rich graphics and interactivity was straightforward and cost-effective.

reef_map

With over 30k hits in the week of launch we hope that the important message of the site has been shared with many people around the world and raised awareness of the peril of the reef.

The site is optimised for large to medium screens so it’s best viewed on a laptop, desktop or tablet device.

The many interactive elements within the site meant that development was bespoke to say the least. Whilst the framework of the site is incredibly simple, there are elements of vector and Javascript animation, Canvas and WebGL used throughout.

It was important that the site not only looked great, but that it felt rich and interactive throughout.

The interactive map for instance relies heavily on SVG with the Snap.svg library used for interactivity and animation. Local storage tracked the user’s journey throughout and calculated, amongst other things, distance travelled as well as drawing the journey on the map.

One module which demonstrated how juvenile fish use sound to navigate their way around the reef was created with WebGL so users could ‘swim’ around the reef and ‘hear’ the distinct crackles and pops created by coral structures.

reef_sound

A time-lapse module letting users could see how a change in acidity of the ocean water drastically corroded Sand Dollar Shells would have been fairly trivial should this project have been a native tablet app, but because we were working within the browser, we looked to Canvas as a way to quickly ‘pan’ through an array of images, using mouse or finger swipes to drive the direction of time.

There were many technical challenges in creating the site, too many to go into here but we hope to break some of them out elsewhere to go into some specific detail and share some of our problems and solutions.

reef_counter

Explore