BMW Sales Dashboard

A professional, single-page dark-themed dashboard for analyzing BMW vehicle sales data with interactive filtering and real-time visualizations.

Features

• Single-Screen Layout: Fits entirely on laptop screens (1366×768 and above) without scrollbars
• Interactive Filtering: Filter data by Region, Body Style (Model), Transmission, and Fuel Type
• Real-Time Updates: All charts update instantly when filters change
• Dark Theme: Premium dark navy and charcoal color scheme with accent yellow-green highlights
• Responsive Charts: SVG-based visualizations that scale to fit their containers
• Magnifiable Charts: Click any chart to open an enlarged view in a modal with full interactivity
• Rich Visualizations:
  • KPI Cards: BMW Total Sales, BMW Cars Sold, BMW Average Price
  • Yearly Sales Trend (Bar/Line Chart)
  • Sales by Body Style (Pie Chart)
  • Sales by Color (Donut Chart)
  • Sales by Dealer Region (Stacked Horizontal Bar)
  • Company-wise Sales Table

Files

• index.html - Main dashboard HTML with dark theme styling
• script.js - D3.js-based data visualization and interaction logic
• data.csv - BMW sales dataset (49 records, 11 columns)

Data Structure

The dataset includes:

• Models: 3 Series, 5 Series, 7 Series, X1, X3, X5, X6, M3, M5, i3, i8
• Regions: Asia, Europe, North America, South America, Middle East, Africa
• Metrics: Price, Sales Volume, Mileage, Engine Size
• Attributes: Year, Color, Fuel Type, Transmission

Getting Started

1. Save all files in the same directory
2. Open index.html in a modern web browser
3. Use the filter panel on the left to explore different data segments
4. Hover over chart elements for detailed tooltips
5. Click on any chart to magnify and explore in detail

Chart Magnification

All charts support magnification:

• Click or tap on any chart card to open an enlarged modal
• The magnified view includes:
  • Full tooltips on hover
  • Readable axis labels
  • Complete interactivity
  • Legend where applicable
• Close the modal by:
  • Clicking the X button
  • Clicking outside the modal
  • Pressing the Escape key

Color Scheme

• Background: Dark Navy (#111827)
• Cards: Dark Charcoal (#1F2937)
• Text: Light (#F9FAFB)
• Accents: Yellow-Green (#FACC15)
• Chart Colors: Pink, Orange, Cyan, Purple, Emerald, Amber, Red, Blue, Indigo, Teal

Compatibility

• Modern browsers (Chrome, Firefox, Safari, Edge)
• Requires D3.js v7
• No server required - runs entirely client-side

Performance

The dashboard is optimized for:

• Fast filtering and re-rendering
• Smooth animations and transitions
• Responsive design that adapts to window resizing
• Efficient SVG rendering with viewBox for proper scaling