Live: https://risk-viz-inky.vercel.app/
- This is a front-end data visualization project built on Next13.
- The dataset and problems outline are provided by RiskThinking.
To get started with the website, follow these steps:
- Clone the repository to your local machine.
- Install the project dependencies.
npm install
- Rename .env.local.example file to .env.local and fill in the necessary environment variables.
- Run npm run dev to start the development server.
- Open NEXT_PUBLIC_HOST in your web browser to view the website.
The project includes the following features:
- Interactive Google Maps with color-coded Markers representing risk ratings.
- Marker Cluster ensures appropriate display of data points.
- Interactive data table with sorting, filtering, searching functions.
- Interactive mixed graph composed of floating bar graph and line graph showing risk rating trend prediction.
- All components are interconnected by state management within the index page.
- Users can use Map and Table to get a grasp of risk levels within certain areas for different category of businesses.
The following dependencies are used in this project:
- next: Framework for server-rendered React applications, Next13 is used for this project.
- typescript: Typed superset of JavaScript that compiles to plain JavaScript.
- csv-parse: This package is a CSV parser for Node.js.
- @react-google-maps/api: Integrating Google Maps into React applications.
- @tanstack/react-table: Headless UI for building powerful tables & data grids.
- chart.js: Charting library that allows for the creation of various types of charts and graphs.
- react-chartjs-2: Wrapper for Chart.js that allows for the creation of Chart.js charts in React applications.
- react-redux: State management library.
- bootstrap: CSS framework for building responsive and mobile-first websites.
- react-bootstrap: UI library for React that provides pre-built Bootstrap components.
- tailwindcss: Utility-first CSS framework that allows for rapid UI development.
The website includes the following pages:
- /: The homepage, which displays UI.
Contributions are welcome! If you'd like to contribute to this project, please fork the repository and submit a pull request.
This project is licensed under the MIT License. See the LICENSE file for details.
This README.md is generated by ChatGPT and modified manually.