This project has two parts. The first part is a web app that visualizes motor vehicle collision data from New York City using an interactive heatmap. The second part is a data analysis report that analyzes the motor vehicle collision data and provides insights into the data.
Web App - NYC Motor Vehicle Collisions (Link)
This project aims to help students understand how to build a web app using real-world data from NYC Open Data through APIs. The web app visualizes motor vehicle collision data from New York City using an interactive heatmap. Users can filter the data based on specific criteria such as collisions involving pedestrians, cyclists, or motorists. By working on this project, students will gain practical experience in web development, API integration, and data visualization.
The following technologies are used in this project:
- 😀 React.js: A popular JavaScript library for building user interfaces.
- 😄 Mapbox GL JS: A JavaScript library for rendering interactive maps using WebGL.
- 😆 react-map-gl: A React wrapper for Mapbox GL JS that makes it easy to integrate Mapbox maps in a React application.
- 😉 NYC Open Data API: A public API provided by the city of New York that offers access to various datasets, including motor vehicle collision data.
By working on this project, students can learn:
- 🐸 Web App Development: Students will learn how to create a responsive and interactive web app using React.js, a widely used JavaScript library for building user interfaces. API Integration: Students will learn how to fetch and process data from a real-world API (NYC Open Data API) and how to handle asynchronous operations in a React application.
- 🐢 Data Visualization: Students will learn how to visualize large datasets using interactive maps and heatmaps. They will use Mapbox GL JS and react-map-gl to create a rich, interactive map visualization of motor vehicle collisions.
- 🐋 State Management and User Interaction: Students will learn how to manage the state of a React application, create custom filters, and handle user interactions to update the map visualization.
- 🦭 Performance Optimization: Students will learn how to optimize the performance of a web app by managing data fetching, processing, and rendering efficiently. By completing this project, students will gain a solid understanding of web app development, API integration, data visualization, and user interaction, preparing them for real-world software development projects.
To run the project, you need to have Node.js and npm installed on your computer. You can download and install them from the official Node.js website.
After installing Node.js and npm, you can run the following commands in the project directory to run the project:
npm ci
# Add mapbox key to .env file
npm start