The Ocean Cleanup is an organization with the goal of making the ocean plastic-free. They do this by deploying interceptors in the ocean and at river mouths. These interceptors catch plastic waste. The Ocean Cleanup wants to inform people about what they are doing. Therefore, our project was to create a dashboard for The Ocean Cleanup that provides information about these interceptors. This assignment was created for students at the Frontend Design & Development program at HVA.
Our project is build with the following technologies tools and tech stack:
- HTML
- CSS
- JavaScript
- Svelte
- Sveltekit
- HighCharts
- Node.js
- Mapbox
- Hygraph
Clone this repository to your code editor.
Open the terminal and use the following commands.
npm install
npm install graphql-request graphql
npm install highcharts
npm install mapbox
npm install mapbox-gl
Keep in mind if you want to continue working with highcharts you will need to request a license.
You can request one here: Educational License - Highcharts Blog | Highcharts
This dashboard is intended for anyone interested in The Ocean Cleanup and can be used to view information about the interceptors, such as the amount of waste an interceptor has removed from the water.
API & Hygraph connection:
This project is licensed under the terms of the MIT license.