Whipsnade Zoo Spectrogram

PersonalWebOffline2017Frontend Developer

Languages

JavaScript

Frontend

CSSD3.jsHTML

Summary

An interactive display built for ZSL Whipsnade Zoo's new £2m Centre for Elephant Care. The enclosure was opening and they wanted a way to get visitors excited: education, engagement, science communication. Special microphones pick up infrasonic sounds (below 20Hz) that elephants use to communicate but humans cannot hear. The soundwaves appear on an electronic screen above the enclosure.

The UI showed a spectrogram with frequency on one axis, time on another, and amplitude on a third. Reference lines along the frequency scale showed where different animals sit: humans, birds, other species, and elephants right at the bottom. Visitors could speak into a microphone and compare their voice to elephant calls in real time. Children especially liked seeing where they landed on the spectrum.

Problem/Context

The display was built for the centre's opening. Constraints were real: specific microphones were needed to capture infrasonic frequencies, and everything had to be safe. Wires had to stay out of the way of elephants and zookeepers. Nothing could be tripped on.

Role/Contribution

Austin Consultants won the job and hired me for the JavaScript work. I worked with a UX designer and a hardware engineer from Austin. I did all the programming myself: HTML, CSS, and JavaScript, with D3.js driving the real-time spectrogram. No framework felt necessary. I also helped with the hardware installation and setup.

Testing

Everything was manually tested. Before the centre opened, I spent time at the elephant enclosure installing the microphone, positioning it to pick up as much as possible, and connecting it back to the central computer running the app. I helped set up the TV display that would show the elephants' communication. A lot of manual testing happened once the hardware was in place.

Accessibility

The display had to be visible to everyone. The design targeted WCAG AAA for the UI: contrast, legibility, the works. It was a display-only screen, not interactive, so the accessibility requirements were all visual.

Outcome/Impact

Queen Elizabeth II, patron of ZSL, unveiled the centre on 11 April 2017. The display attracted press coverage: the Evening Standard and SPA Business both described the infrasonic display. Footage of the opening is available on YouTube.