The topic chosen focuses on plastic pollution, with particular focus on the pollution towards the environment. This data set focuses on the global plastic waste generation by 166 different countries for the year 2010. The circles represent the location and size of waste produced in that area. As you zoom into the map, you’ll be able to see the total plastic waste generated by a particular country in tonnes.
Plastic wastes increase the risk of polluting waterways, rivers and ocean environment, therefore the essential to observe and understand the generations of such materials and its impact on the environment. This data set was interesting to me as it also mentioned that the global projection of plastic waste generation in 2025, is similar to this data set as represented. In this day and age, where environmental issues are a hot topic, the recent debate between Trump and Biden further pushed my interest towards this topic.
As the data consist of 166 countries, I wanted to create something impactful to understand the implications of each country and their respective contribution towards such an adverse environment issue. I wanted those observing the data set to not only compare the countries, but also the major regions (as represented if the map is zoomed out to see all the countries). This visual comparison helps us to understand the area we are staying in and our contribution to the issue.
Original data source
Therefore, with this in mind, I wanted to create a visual representation of plastic waste “floating” around the globe. I started with sketching the outlook of how I wanted the flow of waste to look like. Initially, I wanted the visual to look more 2-dimensional. As I was coding the header, I wondered since I was representing the global plastic production, why not make it a sphere (hence representing the globe) with trash flowing around the world to represent the entirety my idea. I felt that it was an appropriate choice visually while opening up for users to interpret it as well. I also allowed the users to interact with their world of waste, by enabling the orbit control function.
For the map, I wanted it to draw a relationship with the header. Hence, I used the accent colour used in the header into the map. I didn’t want the representation of this data set using conventional graphs or charts as I felt that the impact of such representation is diminished. Therefore, I used a world map (powered by Mapbox) to showcase the data in a more visual and interactive way. This also ties back to the header of the globe representation.
There were quite a few issues I encountered during the coding process. As I was working with 3D elements on p5js, this viewing experience of the header due to the amount of 3D elements the software had to render. The interaction with the 3D environment was also a factor. I consulted Andreas for solutions. We both identified the solutions to reducing the image sizes, as well as the number of 3D elements to use in the sketch.
For the map, I wanted to use my custom map style as created on Mapbox instead of the given map style. I wanted to remove the country labels on the maps as well as elements such as the country borders. However, during the integration, I couldn’t use my map style link. I tried using the maps created by others and I could use those, except for mine. However, I couldn’t resolve the map styling issue as it was Mapbox’s issue in which I had no control over. Therefore I settled with the given style as it still fits with the overall look of the website.
The feedback I got was pretty positive, as I shared the work with my friends. One particular issue that stood out was that due to the interactive function on both sketches, it prevented users from scrolling down the website. Therefore, I created a few functions to allow users to scroll down the website without losing the interactivity.
I think from what I learnt from this coding was that it’s important to understand that there isn’t a specific way to code something. It’s also important to be flexible to adapt the codes that we find online, and how we use them to implement into our sketches.
3D explorations of sphere.
Exploring the 3D elements and space using orbit control.
Trying different 3D shapes (torus & spheres).
Initial Version of Map
Mappa.js reference example