New BMW Global Sales Analytics Dashboard

0 stars0🌍 Public

BBismark Kofi Owusu Sarfo

Last edited Dec 3, 2025

Created on Dec 3, 2025

Forked from BMW Global Sales Analytics Dashboard

This D3.js v7 dashboard analyzes synthetic BMW vehicle sales data loaded from a CSV file, presenting six interactive chart types that users can toggle between using dropdown filters. The interface displays summary cards, insight metrics, and region-filtered visualizations including stacked bar charts of model sales by year, line charts of regional sales trends, an area chart of average prices, donut chart of price classifications, and horizontal bar rankings. All charts support hover tooltips with boundary-checked positioning, legend filtering, and click-to-open modal magnification with keyboard escape functionality. The dashboard adapts responsively across desktop, tablet, and mobile breakpoints.

AI-generated description

BMW Sales Dashboard

A responsive, interactive data visualization dashboard built with D3.js for analyzing BMW vehicle sales data.

Features

Responsive Design: Optimized for laptop (1366px+), tablet (768px-1200px), and mobile (<768px)
Dynamic View Switching: Toggle between 6 different visualization types
Region Filtering: Filter data by specific regions or view global overview
Summary Cards: Quick metrics including total sales, average price, and more
Insight Cards: Key performance indicators and statistical insights
Interactive Charts: Hover tooltips with clear positioning, smooth transitions, and legend interactions
Clean Layout: No overlapping elements, proper spacing throughout

Available Views

Sales Analysis (Stacked Models) - Stacked bar chart showing sales by model per year
Sales Trend by Region - Line chart tracking regional sales trends over time
Average Price Over Time - Area chart showing average vehicle prices by year
Sales by Region (Bar) - Horizontal comparison of sales across regions
High vs Low Price Share (Donut) - Donut chart showing sales classification distribution
Sales by Model (Horizontal Bars) - Top 10 models ranked by sales volume

Getting Started

Place data.csv, index.html, and script.js in the same directory
Open index.html in a modern web browser
Use the dropdown filters to select region and visualization type
Hover over chart elements for detailed tooltips

File Structure

index.html - Main dashboard markup and styling
script.js - D3.js visualization logic and data processing
data.csv - BMW sales data source
README.md - Documentation

Requirements

Modern web browser (Chrome, Firefox, Safari, Edge)
D3.js v7 (loaded via CDN)
Local web server recommended for serving CSV file (optional for many browsers)

Responsive Breakpoints

Desktop (≥1200px): Full layout with optimized spacing
Tablet (768px-1200px): Two-column grid layout
Mobile (<768px): Single-column layout with stacked filters
Small Mobile (<480px): Compact view with adjusted font sizes

Key Improvements

✓ Fixed overlapping header elements - now uses sticky positioning
✓ Improved tooltip positioning with boundary checking
✓ Better grid layout with auto-fit columns
✓ Cleaner visual hierarchy and spacing
✓ Enhanced legend readability
✓ Consistent typography and colors
✓ Better touch targets on mobile devices
✓ Improved accessibility throughout

Share visualization