Interactive Web Data Visualization of Car Dataset (JS / p5.js / D3.js)

✅ Project Description: I need to create an interactive web-based data visualization based on the [login to view URL] 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 [login to view URL] 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.

Project ID: 39229999