Storytelling With Maps Without Reinventing the Wheel

Peter Sax's picture

Managing Director, Technology and Product


Storytelling With Maps Without Reinventing the Wheel

Project Aware is a global network of scuba divers mobilized to protect our oceans. Over the past few years they have encouraged their members to organize "Dives Against Debris," in which diver members get together to remove debris from the ocean at a particular site. Over 400,000 pieces of debris have been removed from the ocean, in over 1000 surveys filled out by members on, via a form built by Echo & Co.

This is an astonishing amount of debris, and a significant volume of data. It also presents a daunting challenge: to tell the story of the volume and geographical span of the dive sites, the myriad kinds of debris removed there, and the sheer volume of debris collected. We were blown away by the scope of the project and the implications of the work, and we knew that anyone who knew what we did would be similarly affected — but in the world of advocacy, there are so many stories being told, and we wanted to breathe as much life into these data as we could. We knew we needed to create something that would make people feel upon first glance what we already knew from living with the data, and would invite them to explore and deepen their sense of the enormity of Project Aware's accompishments.

A map was the clear choice. Echo & Co. has done mapping projects before, as have I prior to my tenure here, but this project presented unique challenges. We began with a few simple wireframes. Each dive survey marker was surrounded by small point markers, one for each piece of debris, color coded by debris type (plastic, wood, etc), densely sprinkled in the surrounding area.

An early wireframe concept for Project Aware's Dive Against Debris Map

It was a great idea in theory, but when it came to implementation, the model broke down: we didn't have individual coordinates for each piece of debris, only for the dive event.  There could have been ways of randomizing each debris piece's location, but that presented a whole new set of challenges.  There was no way to go this route within a reasonable scope.

Subsequent wireframe iterations, while also compelling theoretically, presented similar implementation challenges.

Another early wireframe concept for Project Aware's Dive Against Debris Map

We had to leverage existing tools for visualizing geographic data.  But which? We knew we needed to communicate the magnitude of debris removed from the ocean. We knew we needed to mark each dive survey. We knew the dive surveys were from all over the world, and yet many geographical areas held tight concentrations of them — so the concentration of markers would be highly variable.

Heat mapping seemed like it could be the right solution. But heat maps relate the concentration of discrete geographic locations in a given area.  We didn't have discrete locations for each piece of debris. A heat map of our debris would show a single, "hot" point on the map for each survey, representing all of the debris for that point stacked on top of each other, on the exact same location. The spreading, overlapping effect of a proper heat map would be absent.

We determined that our best option, given that each dive survey's debris data was tied to a common set of coordinates, was to dynamically resize a standard marker for every dive, to reflect the relative amount of debris removed there (leaflet js let us do this easily).

The map displays larger markers for dives in which more debris was removed

But there was one more problem: the tight concentration of dive surveys in some geographical areas. Upon zooming out, the markers overlap, rendering our attempt to communicate per-dive debris amounts somewhat convoluted.  This can work with some types of markers, but when the marker's size has meaning, and a number is overlaid on it, it doesn't look good.

We found that marker clustering solved this problem. Marker clustering combines nearby markers into one cluster marker. If you zoom in, they become discrete, individual markers; if you zoom back out, they merge back into one cluster marker. The metadata for all markers which compose the cluster marker are available in code, allowing us to display the exact amount of debris removed for all dives in the cluster, in the same way we would on a single dive marker. This way, overlapping did not interfere with our displaying of debris data in a region.

The end result communicates the relative amount of debris removed in a particular geographical region, as well as for individual dives, in a completely dynamic and seamless manner. 

Understanding which kind of existing mapping technology was most apporpriate, instead of inventing an entirely new one, was the key to putting together an interesting visualization which told the stories we wished to tell, without breaking the bank.

Click the map below to explore!


I see you like to read printed material. You should check out Nicco's book The End of Big: