Visualizing amount of waste generated by countries in a 3 dimensional globe This is a final prototype for Quantitative Project, a repository for Major Studio 1 class / data visualization program 2022 at Parsons School of Design.
Advocating site visitors on reducing energy, natural resources and food consumption.
The idea is to reimagine the world that would show how it could be if we consider number of waste generated by each country and compare them in a global scale- in 3 dimensions.
- Merge.Geojson - contains the geometric shapes of countries and which is merged with Total Json file ( used by 80% of the visualization on the page)
- TotalWasteData.Json - contains total waste by categories ( food, hazard, electronic waste) per country. This is mainly used for the country card on the right side.
** For design process please refer to design&prototype branch documentation - concept 1 is chosen for this iteration. **
- Data : Json data (pulled from UN portal with a little data wrangling work + merged with geolocation file) and GeoJson( randomly found this data on Github, then merge the original file with my json file(filtered to only show total waste data , lat , long ) (~4hrs)
- WebGL : Mainly use globe Gl which is a UI component using three.js & webGL ( ~6 hrs)
- Javascript : using DOM selector to populate data sets, creating functions that link all the elements all together ( ~ 15 hours)
- CSS : styling & aligning the webpage with the styleguide plan that I created last week (~3hrs)
- Adding stacked bar chart to present the proportion of total waste generated in each country or even show more complex data i.e. ‘food waste’ data sets; showing waste from different activities.
- Selected country showing in another color (so it’s different/ distinct from other geometric shapes) This can be done by binding React.js (however, I’m not familiar with this JS library)
- It would be more helpful to do due diligence on the data before deciding on using the data set; I found that the data from UN portal seems to be overwhelmingly biased and may not represent facts.
- Iterating more / improving on the design concept before jump to the coding process.
For support or if you have any questions about this project, email chayanit@newschool.edu .