Car MPG Strip Chart

An interactive D3.js visualization showing the distribution of miles per gallon (MPG) across different car manufacturers.

Features

• Interactive Strip Chart: Displays MPG values for different car makes with jittered positioning to avoid overlap
• Color Coding: Points are colored based on MPG values using a viridis color scale
• Tooltips: Hover over data points to see detailed information including make, MPG, and torque
• Jitter Control: Adjust the amount of horizontal jitter using the interactive slider
• Responsive Design: Clean, modern styling with proper axis labels and formatting

Technologies Used

• D3.js v7
• HTML5/CSS3
• Modern JavaScript (ES6+)

File Structure

• index.html - Main HTML structure
• styles.css - Styling and layout
• chart.js - Reusable chart component
• main.js - Application logic and initialization
• stripechart.csv - Data source

Data Format

The CSV file should contain the following columns:

• Make - Car manufacturer name
• Torque - Engine torque value
• mpg - Miles per gallon rating

Usage

1. Open index.html in a modern web browser
2. The chart will automatically load and display the data
3. Use the jitter slider to adjust point positioning
4. Hover over points to see detailed information

Improvements Made

• Upgraded to D3.js v7
• Modular, reusable chart component
• Proper data joins for smooth animations
• Interactive controls
• Better styling and typography
• Responsive design
• Error handling
• Comprehensive tooltips
• Smooth transitions and animations