ECS 272 Final Project - A Used Car Filter

This is our ECS 272 Final Project Repostory. We build a website that will help you choose your car. The following is the repo structure

bash . |-- CITATION.md |-- LICENSE |-- README.md |-- Resources | |-- Background | | `-- Warp.png | |-- car_data.csv | `-- favicon | `-- favicon.ico |-- app.js |-- index.html |-- package.json |-- src | |-- ChartMaker.js | |-- Diagrams.js | |-- Graph1.js | |-- Graph2.js | |-- Graph3.js | |-- Graph4.js | |-- Graph5.js | |-- SelectBrandModel.js | |-- csvReadIn.js | `-- graphDataCleaning.js |-- style.css `-- vite.config.js This project was based upon an existing dataset from Kaggle[1]. The last time this dataset was updated was 7 months ago, and it has 42,091 lines of data, covering 29,873 brands and 40,207 models. The price ranges from 7,000 rubles to 70 million rubles. It also has full coverage of the city of the car being sold, fuel type, transmission type, type of drive, mileage, manufacture country, engine capacity, horsepower, and age. We can confidently say this data is comprehensive enough to demonstrate the trend. Down below, we attached a portion of our dataset for reference.

Our scenarios are designed for individuals new to the used car market who want to purchase their first vehicle on a limited budget. This website serves as a filter, helping users navigate through numerous options and combinations to find their ideal car. Our target audience includes those unfamiliar with the used car market seeking their first car, college students with modest budgets looking for convenient commuting options, and car sales professionals interested in market trends.

How to run this project

To deploy this website, please make sure you have nodeJS installed on your environment. Then clone the repo using this command

bash git clone git@github.com:TheRealMilesLee/ECS272-FinalProject.git now we can go into the project folder bash cd ECS272-FinalProject Installing the dependencies using the following command bash npm install Now you can run this project by type command bash npm run dev Sit back, relax and enjoy the journey of finding your car

Notice

For this project, we use a drill down method. It will guide you through filtering cars based on your budget, age preferences, and mileage range. You can interact with the graphs by clicking on the dots and bars. Each click records the value and uses it as a parameter to filter the cars. You can always go back by scrolling up and reselecting the dots and bars. At the end of the process, you will receive a list of cars that fit your criteria. You can start over by clicking the "Start Over" button, which will take you back to the Get Started page.

Credit

We use the following tools to help us build this project - D3.js - HTML - CSS - Node.js

Dataset and Tool Citation

• D3 Sankey: GitHub Repository and D3 Graph Gallery
• D3 LineChart: D3 Graph Gallery
• D3 Bar Chart: D3 Graph Gallery
• D3 Pie Chart: D3 Graph Gallery and D3.org
• Mozilla developer documentation: MDN Web Docs
• Dataset: Kaggle - Dataset of Used Cars

Contributors

This project was completed by Hengyi Li and Shu Zhang.