Skip to main content
SimilarExport ZIP
100%

Final Stacked Bar Chart with HTML

✓ Published2🌍 Public
BBismark Kofi Owusu Sarfo
Last edited Dec 3, 2025
Created on Dec 3, 2025

This stacked bar chart illustrates BMW’s global sales volumes across 11 vehicle models from 2010 to 2024, with a set of filter buttons that instantly repopulate the visualization for different geographic regions. Built with D3.js v7 and HTML, the chart aggregates data from a CSV file, using `d3.rollups` to sum sales per model and year, and renders the result as an SVG with smooth animations. Interactive hover tooltips reveal detailed yearly figures, while a separate statistics panel computes regional totals and top-performing models.

AI-generated description

BMW Global Sales Trends (2010–2024)

Overview

An interactive, professional dashboard visualizing BMW's global sales performance across 11 models over 14 years with dynamic region filtering and comprehensive analytics.

Features

📊 Stacked Bar Chart

  • Chronological Layout: Sales data displayed from 2010 to 2024
  • Model Breakdown: Each bar stacked by 11 BMW models (3 Series, 5 Series, 7 Series, M3, M5, X1, X3, X5, X6, i3, i8)
  • Color-Coded Models: Distinct, harmonious colors for easy model identification
  • Smooth Animations: Elegant transitions when switching regions

🌍 Region Filtering

  • 7 Region Options: Global, Africa, Asia, Europe, Middle East, North America, South America
  • Interactive Buttons: One-click region switching with visual feedback
  • Real-time Updates: Chart, legend, and statistics update instantly

📈 Interactive Elements

  • Hover Tooltips: Display year, model name, model-specific sales, and annual totals
  • Expanded View: Click "🔍 Expand Chart" for a larger, more detailed visualization
  • Modal Display: Expanded chart in a dedicated modal window for focused analysis

📋 Statistics Dashboard

  • Total Sales: Aggregate sales for selected region
  • Average Annual Sales: Mean sales per year
  • Top Model: Best-performing model in the region
  • Total Records: Count of all records

🎨 Design

  • BMW-Themed: Blue and white color scheme reflecting BMW branding
  • Responsive Layout: Optimized for laptop screens with readable fonts and spacing
  • Professional Style: Clean, modern dashboard suitable for analytics presentations
  • Mobile-Friendly: Responsive design adapts to smaller screens

Data Structure

The visualization uses the following data fields:

  • Model: BMW model name
  • Year: Sales year (2010–2024)
  • Region: Geographic region
  • Sales_Volume: Number of units sold

Technical Stack

  • D3.js v7: Data visualization and interactive elements
  • HTML5: Semantic markup
  • CSS3: Modern styling with flexbox and grid
  • JavaScript ES6: Interactive functionality

How to Use

  1. View Global Data: Dashboard loads with global sales data by default
  2. Filter by Region: Click any region button to update the visualization
  3. Explore Details: Hover over bars to see detailed sales information
  4. Expand View: Click "🔍 Expand Chart" for a larger visualization
  5. Analyze Trends: Use the statistics cards to compare regions
  6. Review Legend: Check the legend to identify models by color

Key Insights

The dashboard enables analysis of:

  • Which models drove sales growth over time
  • Regional performance differences
  • Model momentum shifts year-to-year
  • Peak sales periods and trends
  • Comparative regional performance

Browser Compatibility

  • Chrome (recommended)
  • Firefox
  • Safari
  • Edge

Files

  • index.html - Main dashboard structure and styling
  • script.js - D3.js visualization and interactivity logic
  • data.csv - BMW sales dataset
  • README.md - Documentation

Future Enhancements

  • Export functionality (PNG, CSV)
  • Year range slider for focused analysis
  • Model-specific filtering
  • Trend line analysis
  • Year-over-year growth rates
  • Custom color themes
MIT Licensed

Similar vizzes

Loading thumbnail…

1 Final Stacked Bar Chart with HTML

This stacked bar chart visualizes BMW sales volumes from 2010 to 2024, segmented by car model with interactive region filtering. The animation, implemented with D3.js v7, smoothly transitions between regions while hovering over bars reveals detailed tooltips. The visualization uses SVG rendering with d3.stack for stacking and d3.rollups for data aggregation, sourced from a CSV file containing model, year, and regional sales data.

BBismark Kofi Owusu Sarfo
94% match
Loading thumbnail…

1 Final Stacked Bar Chart with HTML

This interactive dashboard visualizes BMW model sales performance from 2010–2024, using a stacked bar chart to compare sales volumes across regions and years. Users can filter by geographic region, sort bars by total sales or specific models, and click bar segments or legend items to highlight individual models with smooth opacity transitions. Built with D3.js v7, the visualization uses SVG rendering with animated transitions and interactive tooltips, reading data from a CSV file containing model, region, year, and sales volume information.

BBismark Kofi Owusu Sarfo
94% match
Loading thumbnail…

Final Stacked Bar Chart with HTML and movable filter

This interactive D3.js v7 visualization presents a stacked bar chart of BMW model sales volumes by model and year. Users can filter the view through a movable dropdown menu to highlight either the highest or lowest selling model. The SVG-based chart uses `d3.rollups` for data aggregation, `d3.stack` for stacking, and `d3.scaleBand`/`d3.scaleLinear` for axes, with a color-coded scheme (`d3.schemePaired`) distinguishing years. Hovering over individual bar segments reveals a tooltip with detailed sales data, while clicking a segment dims the rest of the chart.

BBismark Kofi Owusu Sarfo
92% match
Loading thumbnail…

Stacked Bar Chart with HTML

This stacked bar chart displays BMW sales volume by region across years from 2010 to 2024, using aggregated data from a CSV file. The visualization uses D3 v7’s `d3.rollups`, `d3.stack`, and `d3.scaleBand` to group and stack regional sales contributions per year into a single SVG. Color-coded segments represent five regions, with axes, grid lines, and a legend generated via `d3.axisBottom`, `d3.axisLeft`, and ordinal color scaling. Sales values are aggregated with `d3.sum` and formatted in thousands on the y-axis.

BBismark Kofi Owusu Sarfo
91% match
Loading thumbnail…

Interactive Stacked Bar Chart of BMW volume of sales

This dashboard visualizes BMW sales data through an interactive stacked bar chart, showing sales volume by model and year. It includes summary cards with key metrics, insights highlighting top-selling models, and secondary charts for price trends and regional comparisons. Built with D3.js v7 and rendered as SVG, the visualization features region filtering via dropdown, hover tooltips for detailed information, and clickable legend items to highlight specific models. Data is loaded from a CSV file containing model, region, price, and sales volume fields.

BBismark Kofi Owusu Sarfo
89% match
Loading thumbnail…

Stacked Bar Chart with HTML and movable filter

This stacked bar chart displays BMW model sales volumes across multiple years, with each bar segmented by year and colored using a paired color scheme. A movable filter panel allows users to highlight either the highest or lowest selling model overall. The visualization uses D3.js v7 with SVG rendering, employing d3.rollups for data aggregation, d3.stack for bar stacking, and d3.scaleOrdinal with d3.schemePaired for color mapping. Hovering over individual bar segments reveals detailed tooltips with model, year, and sales figures.

BBismark Kofi Owusu Sarfo
89% match
Loading thumbnail…

Final Bar Chart with HTML and movable filter

This interactive D3.js visualization presents BMW sales data as a horizontal stacked bar chart, comparing Manual and Automatic transmission sales volumes across eleven vehicle models. The bars are ordered by total sales, with purple and pink segments encoding transmission types, and hover interactions reveal detailed information for each segment. Built with D3.js v7, it uses the `d3.rollups` API to aggregate the CSV dataset, employs SVG rendering with animation filters and drop shadows, and includes a tooltip system that dynamically positions itself based on pointer coordinates.

BBismark Kofi Owusu Sarfo
89% match
Loading thumbnail…

Clickable Stacked Bar Chart with HTML

This stacked bar chart shows BMW sales volumes by year, broken down by region, with each segment colored according to its region. The visualization is built using D3 v7 with SVG rendering, and it also includes a clickable legend. Clicking a legend item or a bar segment toggles the highlight for that region, turning the selected elements white. The chart loads data from a CSV file and aggregates sales volumes using `d3.rollups` and `d3.sum`, with axes and grid lines configured via `d3.axisBottom` and `d3.axisLeft`.

BBismark Kofi Owusu Sarfo
89% match