Car MPG Strip Chart

An interactive D3.js visualization showing the distribution of fuel efficiency (Miles Per Gallon) across different car manufacturers.

Features

• Interactive strip chart displaying MPG values for different car brands
• Jitter control to adjust point spread for better visibility
• Color-coded points based on MPG values
• Hover tooltips showing detailed information
• Mean lines for each manufacturer
• Responsive design that works on different screen sizes
• Smooth animations and transitions

Files

• index.html - Main HTML structure
• styles.css - CSS styling and responsive design
• chart.js - D3.js chart creation and update functions
• main.js - Data loading and interaction handling
• stripechart.csv - Sample car data

Data Format

The CSV file should contain:

• Make - Car manufacturer name
• mpg - Miles per gallon (numeric)
• Torque - Engine torque (numeric, optional for display)

Usage

1. Open index.html in a web browser
2. Use the jitter slider to adjust point spreading
3. Hover over points to see detailed information
4. Red lines show the mean MPG for each manufacturer

Browser Compatibility

• Modern browsers with ES6 support
• Uses D3.js v7 for enhanced performance and features

Improvements Made

• Upgraded to D3.js v7 for better performance
• Added responsive design and modern CSS
• Implemented proper data joins for idempotent updates
• Added interactive jitter control
• Enhanced tooltips with more information
• Added mean lines for statistical insight
• Improved color scheme and styling
• Added error handling for missing data
• Modular code structure with separate files
• Better accessibility and semantic HTML