Tracing Ocean Plastics

As a development team in a Data Visualization class, we wanted to bring awareness to the Giant Pacific Garbage Patch (GPGP) in an interactive and informative way. We hoped to describe the situation accurately and immersively through data journalism.

fp-tracing-ocean-plastic-design

ROLE

Visual Design, Story, Web Development (D3.js, HTML, CSS, Javascript)

CREDITS

David Lin

Telling the Story

I would argue that the way we tell a story is almost as important as the content itself. So in telling the story of the plastics in our oceans, we hoped to guide readers through a cohesive, exploratory story.

We structured our site by outlining each section of the website along with the percieved effect that each section should have to the reader .

I63A5618_min

I would argue that the way we tell a story is almost as important as the content itself. So in telling the story of the plastics in our oceans, we hoped to guide readers through a cohesive, exploratory story. Here's how we outlined our story:

HOOK

We drew our readers in with real statistics about the state of our oceans. And it is estimated that "By 2050, there will be more plastic in our oceans than fish.

BACKGROUND

Using animation we describe the story of how the Garbage Patch was actually found.

LOOKING DEEPER

Next, we go into detail about the Garbage Patch, and try to dispel some misconceptions about the Garbage Patch itself. Using D3, we created a visualization describing the materials that the Garbage Patch consists of.

IMPACT

From describing the Garbage Patch more granularly, we led our readers to what plastics in our oceans means for the long term.

EXPLORE

Finally, we provided readers an interactive visualization that allowed them to track how ocean plastics move throughout the world.

Implementation

In order to create our interactive story we used D3.js, housed in a standard webpage. I created a quick wireframe/storyboard to provide us the steps we needed for smooth development. And I designed the code accordingly to match the components of each part of the site.

screenshot-min-2
code-screenshot-min

 Final Site

After a few quick iterations, and reviews with our professor and TA's. Here is the final presentation of our micro-site. 

CREDITS

I would really like to thank Jeffrey Heer and the Data Visualization class at the University of Washington. Prof. Heer's input and the critique of the other students in the class was invaluable to our progress as a team.