← back to projects

Witnessing Glaciers

Designing and building a website with Three.js to visualize the world's glaciers. Website visitors scroll to reveal facts about the benchmark glaciers and their health.

Year

2022

Problem

During a workshop with Scott Reinhard (Graphics Editor at The New York Times) , I explored data visualization related to climate change and glaciers. The final prototype is a website which features a globe populated by all of the world’s glaciers, designated by white specks. A few key glaciers have been identified and marked with larger spheres that turn red as the user scrolls and reads their corresponding text. All of the data comes from the World Glacier Monitoring Service. Using javascript and Three.JS I was able to place all of the glaciers on this model of the Earth.

Screenshots

webpage screenshot
webpage screenshot
webpage screenshot
webpage screenshot

Research

I started by exploring current climate change issues and open datasets I could pull from. I came across several stories about melting ice caps in the Italian alps.

Screenshot of figma file with images of the alps and data graphics

Collecting research in figma

This eventually led me to glaciers, which have been changing size at alarming rates. I started out by sketching in Processing, using GPS coordinates and glacial masses from WGMS’s Fluctuations of Glaciers Databases . The simple sketch shows the world’s glaciers in their relative positions, their color fades from white to black in accordance with their mass. As years pass, the glaciers fade.

Data visualization of the world's glaciers shrinking over time

Processing sketch

Next, I looked at the Benchmark Glaciers from a USGS dataset. The Benchmark Glaciers are four North American glaciers which have been chosen for longterm monitoring. Using the dataset I was able to make representations in Processing of 3D boxes based on the glaciers’ area and elevation over the years.

gif of gulkana galcier represented as a wireframe cube that is shrinkinggif of wolverine galcier represented as a wireframe cube that is shrinkinggif of lemon creek galcier represented as a wireframe cube that is shrinkinggif of south cascade galcier represented as a wireframe cube that is shrinking

Next, Scott encouraged me to commit to design explorations that were non-graphic. He encouraged me to do one exploration off of the computer and one exploration with sound. The first exploration was a timelapse of a large ice cube melting. One neat observation from this study was the realization that large ice cubes melt from their interiors.

A dangerously unscientific study on glaciers and sea level

Next, I learned how to map the glacier data points onto a 3D globe using Three.js. When I find the time, I would like to turn the website into an interactive database style website. Visitors would be able to look through all of the world’s glaciers on the globe interface and explore data related to their health and sizes.

Screen recording of an early mockup which showed every glacier in the world on a 3d globe

Mapping every glacier in the world