Interactive Web Data Visualization of Car Dataset (JS / p5.js / D3.js)
Budget: $10 – $30 USD
✅ Project Description:
I need to create an interactive web-based data visualization based on the car_price_prediction_clean.xlsx dataset.
The final result should be a visually appealing single-page web app that presents multiple data visualizations inspired by the provided reference images.
This project is part of my design coursework.
✅ Scope of Work / What to Visualize:
The dataset contains car features such as brand, price, production year, engine specs, fuel type, and other attributes.
Please create the following interactive visualization components:
1️⃣ Radial Bar Chart (Half-circle) — Car Brands by Average Price
Interactive hover tooltip on each sector showing the brand name and average price
Red color gradient (light to dark)
Scalable and responsive arc layout
2️⃣ Timeline Arc — Production Years
Half-circle timeline showing years from 1940 to 2020
Bars or lines representing the number of models produced per year
Interactive: hover reveals the number of cars or top brands per decade
Optional: zoom or brushing interaction to focus on a time period
3️⃣ Animated Gauge Chart (Speedometer) — Horsepower or Max Speed
Functional animation where the needle moves on load
Color zones for horsepower: green (low), yellow (medium), red (high)
Tooltip shows the selected car's horsepower or speed
4️⃣ Heatmap / Matrix — Number of Cylinders
Y-axis: cylinder count (1 to 12)
X-axis: number of car models for each cylinder count
Hover highlights cell and displays exact count
Darker shades represent higher counts
5️⃣ Semi-Circular Proportion Chart — Fuel Types
Visualize the proportion of Petrol, Diesel, Electric, and Hybrid cars
Smooth hover effect with tooltip showing exact percentages
Different colors for each fuel type
6️⃣ Interactive Doughnut Charts — Additional Car Features
Separate doughnut charts for:
Leather interior
Airbags
Drive Type (AWD / FWD / RWD)
Hover interaction shows percentage or count
Optional: filter or toggle cars by selecting chart elements
7️⃣ Fuel Gauge or Fuel Level Indicator (Optional Bonus)
Visual fuel gauge icon that displays fuel level dynamically or for a sample car
Styled similar to a real car dashboard indicator
✅ Design & Style Requirements:
Dark-themed background
Smooth gradients and modern minimalist design
Interactive tooltips, hover effects, and optional simple animations
All text and values can be in English
Fully responsive layout (desktop is priority, mobile optional but welcome)
✅ Technology Stack (Preferred):
HTML / CSS / JavaScript
p5.js or D3.js highly preferred
Canvas, SVG, or WebGL where needed
Open to your suggestions if you have a better visualization library
✅ Deliverables:
Fully functional HTML / CSS / JS project (ready to open locally in the browser)
Clean, readable, and well-commented source code
Optional: short README or instruction for running the project
✅ Reference Visuals:
Attached — please stick closely to the visual style.
✅ Notes:
Creativity is welcome! Suggest additional small components if you see potential.
Send me a link to your portfolio or similar interactive data visualization projects.
I need to create an interactive web-based data visualization based on the car_price_prediction_clean.xlsx dataset.
The final result should be a visually appealing single-page web app that presents multiple data visualizations inspired by the provided reference images.
This project is part of my design coursework.
✅ Scope of Work / What to Visualize:
The dataset contains car features such as brand, price, production year, engine specs, fuel type, and other attributes.
Please create the following interactive visualization components:
1️⃣ Radial Bar Chart (Half-circle) — Car Brands by Average Price
Interactive hover tooltip on each sector showing the brand name and average price
Red color gradient (light to dark)
Scalable and responsive arc layout
2️⃣ Timeline Arc — Production Years
Half-circle timeline showing years from 1940 to 2020
Bars or lines representing the number of models produced per year
Interactive: hover reveals the number of cars or top brands per decade
Optional: zoom or brushing interaction to focus on a time period
3️⃣ Animated Gauge Chart (Speedometer) — Horsepower or Max Speed
Functional animation where the needle moves on load
Color zones for horsepower: green (low), yellow (medium), red (high)
Tooltip shows the selected car's horsepower or speed
4️⃣ Heatmap / Matrix — Number of Cylinders
Y-axis: cylinder count (1 to 12)
X-axis: number of car models for each cylinder count
Hover highlights cell and displays exact count
Darker shades represent higher counts
5️⃣ Semi-Circular Proportion Chart — Fuel Types
Visualize the proportion of Petrol, Diesel, Electric, and Hybrid cars
Smooth hover effect with tooltip showing exact percentages
Different colors for each fuel type
6️⃣ Interactive Doughnut Charts — Additional Car Features
Separate doughnut charts for:
Leather interior
Airbags
Drive Type (AWD / FWD / RWD)
Hover interaction shows percentage or count
Optional: filter or toggle cars by selecting chart elements
7️⃣ Fuel Gauge or Fuel Level Indicator (Optional Bonus)
Visual fuel gauge icon that displays fuel level dynamically or for a sample car
Styled similar to a real car dashboard indicator
✅ Design & Style Requirements:
Dark-themed background
Smooth gradients and modern minimalist design
Interactive tooltips, hover effects, and optional simple animations
All text and values can be in English
Fully responsive layout (desktop is priority, mobile optional but welcome)
✅ Technology Stack (Preferred):
HTML / CSS / JavaScript
p5.js or D3.js highly preferred
Canvas, SVG, or WebGL where needed
Open to your suggestions if you have a better visualization library
✅ Deliverables:
Fully functional HTML / CSS / JS project (ready to open locally in the browser)
Clean, readable, and well-commented source code
Optional: short README or instruction for running the project
✅ Reference Visuals:
Attached — please stick closely to the visual style.
✅ Notes:
Creativity is welcome! Suggest additional small components if you see potential.
Send me a link to your portfolio or similar interactive data visualization projects.