Viewing a saved revision (read-only)
33f974b5c1ae400485177321d0d6dd31
New 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 descriptionBMW 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
- 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, andscript.jsin the same directory - Open
index.htmlin 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 stylingscript.js- D3.js visualization logic and data processingdata.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