← Projects

Plastic Oceans

2024 Passion Project Developer & Designer
  • Svelte
  • D3.js
  • GSAP
  • Illustrator

A static infographic version of the Plastic Oceans story — using non-traditional visualization to show why the Philippines is responsible for a third of all ocean plastic.

This is the static design counterpart to the interactive scrollytelling story. Where the live version guides users through the data step by step, this piece had to compress the same argument — nearly a million tonnes, concentrated in one corner of the world — into a single visual spread.

The constraint sharpens the design. Every layout decision is load-bearing: the dot grid that makes proportion visceral, the map that makes geography undeniable, the sachet as a design motif throughout.

Plastic Oceans infographic — dot grid and Philippines highlight
The main spread — each dot represents 1,000 tonnes of mismanaged ocean plastic, with the Philippines' share pulled out in orange.
Full artboard showing layout and annotation system
Full artboard — the annotation layer and typographic system that structures the narrative flow.
Animated dot transition between states
Dot grid morphing — the same points rearrange from scatter to proportion grid as the story advances.
Country comparison detail
Country comparison view — per-capita vs. GDP reveals that wealth is not the determining factor.

Process

Built first in Observable with D3 force simulation, then imported into Illustrator for type treatment and compositional polish. The dot metaphor — one dot per 1,000 tonnes — was the earliest decision and drove every layout choice downstream.

Highlights

  • Dot grid makes the proportion visceral before any numbers appear
  • Sachet motif threads through the piece as both data subject and design element
  • Country comparison reframes the wealth vs. waste assumption
  • Observable + Illustrator workflow for data-accurate, design-polished output