Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

New BMW Global Sales Analytics Dashboard

Public visualization

Viewing a saved revision (read-only)

33f974b5c1ae400485177321d0d6dd31

New BMW Global Sales Analytics Dashboard

0 stars0🌍 Public
BBismark Kofi Owusu Sarfo
Last edited Dec 3, 2025
Created on Dec 3, 2025

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: Fits perfectly on laptop screens (≥1366px) without scrolling
  • 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, smooth transitions, and legend interactions

Available Views

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

Getting Started

  1. Place data.csv, index.html, and script.js in the same directory
  2. Open index.html in a modern web browser
  3. Use the dropdown filters to select region and visualization type
  4. 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

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): Single-column layout with adjusted font sizes
  • Mobile (<768px): Compact view with stacked filters