A visualization dashboard for global WWTP, allowing for the overview and comparison of WWTP metrics across countries. This project uses d3.js and React as the front-end tools for the application.
The project was bootstrapped with Create React App, which provides the basic scaffolding for React web applications. This projects the basic code to set up an initial front-end UI on localhost, which you can find at this commit. The other code used in the project was written by the team (sometimes with the help of online resources), which can be found in the commit history. In this repository, we also have our data analysis + aggregation in the form of Jupyter notebooks.
- node
- yarn
-
navigate to the application root file
cd my-app -
install node modules (libraries)
yarn install -
start the application
yarn start -
navigate to the homepage on the browser, at localhost:3000/about
my-app
└───node-modules - libraries that accompany the front-end
└─── ...
└───public - a static build of the webpage (from Create-React-App; not used)
└─── ...
└───src - React objects that form the front end of the webpage (bulk of the user-written code lives here)
| index.js - entry point of the front-end, renders App.js
| index.css
| App.js - set up routes to different pages and maintain global variables across all pages.
| App.css
└─── components - extendable and modular components
└─── data - cleaned and formatted data (in json format) to be passed into the front end
└─── hooks - hook to use D3.js
└─── pages - React hooks for the various pages
| ... - other bootstrap-included files for testing, debugging, etc.
| package.json - provides information on the front-end build, including app name, starting scripts, etc.
| ... - other module related files that help build the front-end
data-exploration
| 547_Data_Exploration.ipynb - exploration of the data
| csv_to_json.ipynb - aggregation and conversion of file format for the data to be passed into front-end