Water Watch: Navigating Global Marine Protection

Inspiration

The inspiration for Water Watch stemmed from my interest for environmental conservation and the pressing need to protect our planet's marine ecosystems. Using the statistics of declining marine biodiversity and the critical role that Marine Protected Areas (MPAs) play in preserving these vital habitats. My goal was to create a tool that visually highlights the importance of MPAs and educates users about their locations and significance worldwide.

What it does

Water Watch is an interactive web application that allows users to explore Marine Protected Areas across the globe. The application features a rotating 3D globe, highlighting various countries and their marine protection efforts. Users can select a country from a dropdown menu to view detailed information about its MPAs, including their geographic coordinates and percentage of territorial waters protected.

How we built it

I built Water Watch using modern web development technologies, including:

• ChatGPT 4o: For building the structure of the website and brainstorming ideas.
• React: For building the user interface and managing the application state.
• Three.js and @react-three/fiber: For rendering the 3D globe and interactive elements.
• PapaParse: For parsing CSV data containing information about Marine Protected Areas.
• CSS: For styling the application and ensuring a responsive design.

The globe texture was sourced from publicly available high-resolution images, and the application logic was implemented to handle user interactions and camera movements.

Challenges we ran into

One of the significant challenges I faced was integrating the 3D globe with real-time data while ensuring smooth performance and responsiveness. Managing the camera movements and preventing unwanted zooming behavior also required careful handling. Additionally, I encountered difficulties in loading and mapping high-resolution textures onto the globe, which required using a lesser quality picture that was more compatiable. Another challenge was pinning the points to the globe without the globe going into a constant zoom state

Accomplishments that I'm proud of

We are proud of several accomplishments:

• Successfully integrating a rotating 3D globe with real-time data visualization.
• Creating an intuitive and user-friendly interface that educates users about Marine Protected Areas.
• Overcoming technical challenges related to performance optimization and interactive elements.
• Building a visually appealing application that effectively communicates the importance of marine conservation.
• Building my first project!

What we learned

Throughout the development of Water Watch, we learned:

• SAVE AS YOU GO, or you will feel a unique anger as you disect your buggy code.
• Advanced techniques in 3D rendering and animations using Three.js and @react-three/fiber.
• The importance of performance optimization in web applications, especially when dealing with complex visual elements.
• Effective ways to handle user interactions and camera movements in a 3D environment.
• The critical role of Marine Protected Areas in preserving marine biodiversity and the need for increased awareness and conservation efforts.
• How to use ChatGPT to handle the grunt work.

What I plan to finish for Water Watch

• Figuring out how to read the data and make it work with the globe.
• Adding a feature that allows the user to choose between different data sets.

Built With

• css
• papaparse
• react
• three.js