Chaos & Opportunity

Creating an interactive 3D map of disturbance zones and vegetation at Mount St. Helens

When Mount St. Helens erupted in 1980, it didn’t just blow up. There was a series of discrete, linear geologic events, one leading into another, that added up to what we know as the “eruption.” These geologic events created micro-environments called “disturbance zones” that—over time—fostered unique biological ecosystems.

“It’s really important for us to study in all the different zones,” explained graduate student Elise Larsen, “because the effects of the volcano were so different from one to the next.”

Cartographers and scientists have mapped out and captured the different impacts of the volcano in a number of different maps, but the disciplines are usually kept separate—geology on one map, biology on another. What we were endeavoring to do was to combine all the different types of maps into one. And we wanted it to be interactive. And 3D. And time-based. The map became a design, data, and scientific challenge. What follows is a case-study that illustrates and describes all the elements that made up the cohesive map.

Concepts & Initial Wireframes

The following wireframes show our first conceptual diagrams of the map. Note that there is no vegetation actually illustrated on the map. One of the major challenges was gracefully orchestrating the balance between five different color-coded zones, the color of the vegetation (shades of green), and the color of the terrain (shades of grey). Add to that, label colors of the interface, and there was the hazard of the map looking like a crayola box.


This little diagram shows how we wanted the motion of the map to work. The end result was surprisingly close to how it is described below.


The Vegetation Layer

Time lapse satellite imagery of vegetation regrowth is a great way to experience the magnitude of the explosion and the subsequent regrowth. We were inspired by a post made by NASA’s Earth Observatory.


It seemed like an easy enough task to apply these images to the map itself. Only problem: the NASA images were flat raster images and wouldn’t blend with our 3D model. We needed to go back to the source to extract the vegetation data. First, we had to root out the original satellite data files. NASA kindly provided us the source files (giant 7-layer GeoTIFF files). Next, our cartographer friend Aaron Reyna ran a series of magic algorithms that extracted the vegetation layer. This is what one-band of the raw NASA geotiffs look like in its untreated state; note how tiny Mount St. Helens is in this sea of satellite data.


This is how the data looked after the vegetation had been extracted.


If you want to get technical, this is known as the “Normalized Difference Vegetation Index” (NDVI). It’s an especially handy method for reading vegetation from data because of its ability to penetrate clouds and smoke, or anything in the atmosphere that might be hindering visibility. The mathematical process is essentially looking to extract data associated with chlorophyll, thereby exposing the vegetation. Interesting footnote: before 1985, satellite technology could not read the blue wavelength of the spectrum, which results in a coarser read of the vegetation. So, in the final map, the first five years are not as smooth as the years that followed.

Eventually, the vegetation came to look like this in the interactive.


Disturbance Zones

After the vegetation had been extracted, we needed to plot out the disturbance zones. Unfortunately, there was no definitive map—we had to synthesize the map from several different sources. We used reference maps from the USGS, USFS and National Geographic. To complicate matters, the map itself was a key navigational element.

Here are some of the original reference maps we used.





The final, synthesized map became a simplified vector map.


When applied, the disturbance zones looked like this:


Elevation & Terrain

The last step was the most precarious. We had to assemble all the pieces on a 3D model, apply terrain, and settle on three perspectives for the map. Each zone was linked to stories, and each zone had to be accessible from any angle. At the same time, the perspectives needed the appropriate scientific focus to demonstrate natural regrowth (as opposed to artificially planted areas). The final design would be a delicate balance between scientific accuracy and user experience. As a drafting and prototyping tool, we used Google Earth with a superimposed zone map to work out some of the perspective issues.

The undressed elevation map looked like this:


With all the independent components finished, we finally assembled the parts into a working interactive. The finished map has a multitude of moving parts, with a great deal of complexity feeding into it, but comes off as—we hope—an elegant and unified operation.


Here’s a demo video of the map in the context of the completed interactive.

-Michael Neault, Content Producer


Second Story creates enchanting, informative, and entertaining media experiences with innovative technologies that empower connections to ideas.

Tagged with: , , , , , , , , ,
Posted in Content, Design, Technology