Smithsonian Invertebrate Zoology Images by Depth
Explore the various ocean depths and discover the captivating and beautiful invertebrate images in the Smithsonian Zoology Collection.
TOOLS
D3.js, HTML, CSS, Python, Figma
SKILLS
Data Visualization, UX/UI, Data Cleaning
Depth Modals
During the initial prototyping phase, I received feedback that users lacked a visual anchor while scrolling. They struggled to remember what they were looking at as they were scrolling. To address this, I designed a floating modal that acts as a legend, staying with the user as they explore images by depth.
Full Project Walkthrough
BACKGROUND
The primary goal of this project was to find interesting metadata within the Smithsonian Collection and clean/prep the data to tell an engaging story focusing on quantitative data.
ABOUT THE DATA
Depth intervals were binned into oceanic zones (epipelagic, mesopelagic, and bathypelagic) to categorize species by their collection depths. The metadata included a unique identifier (GUID) which is pulled to display Smithsonian images through an API.
ABOUT THE DESIGN
Inspired by the vibrant colors of bioluminescent invertebrates, a color palette was created using hues from the images. The vertical bubble chart is designed to evoke the experience of descending through the ocean depths as the user scrolls.
Unfortunately the Smithsonian website has been down, so if images are not displaying it is because the API is not able to fetch the images from the website.