An iteration of the interactive visualization of the TOPP dataset

Project Description

The TOPP (Tagging of Pelagic Predators) project is a collaboration of biologists, oceanographers, engineers and computer scientists. For the past fifteen years, TOPP scientists have been tagging twenty–three species of marine animals to track their position and behaviour.

My approach to visualizing the tagging data was to take a slice of that data and allow visitors to visualize and interact with it. Challenges included selecting and structuring the data from the noisy and often incomplete data collected in the wilds of the Pacific Ocean, crafting a clear interaction path, and creating a clear visual language.

Initial evaluations with visitors showed an average dwell time of eleven minutes, which is significant for an interactive visualization on the busy museum floor.

Design and Evaluation

initial TOPP concept mockup

Initial interaction concept mockup

My first concept for interacting with the data is pictured above. The idea was to allow visitors to use a tangible interface resembling a data card to explore the animals' migration tracks by species.

interaction card
interaction card

Cardboard card design for early testing of the exhibit with visitors. Graphic design by Nina Fujikawa. Questions by science writer Kevin Boyd.

We tested the on–screen visualization with visitors using the cards pictured above as tangible user interfaces. If visitors put the cards on the table, the tracks of the corresponding species would highlight. Then they could "press" the through–hole buttons to touch the screen and activate different types of track encodings to give them information, for example, about whether a track represented data for a male or female.

We found this tangible user interface to be confusing to visitors, however, because they did not immediately recognize what to do with it. For example, many visitors thought that they should use the hole in the card to "catch" a track. The data card TUI's were too unconventional and their use was non–obvious. We moved to a direct touch interface.

Visual Language

sex encoding iteration
sex encoding iteration
sex encoding iteration
sex encoding iteration

Some of visual encodings used to represent the tracks of male and female white sharks

We went through multiple iterations of the design language for each element: map, data tracks, encodings, speed visualizations, the timeline, the on–screen cards, and the tagging sites.