Skip to main content
SimilarExport ZIP
100%

Final Bar Chart with HTML and movable filter

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

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.

AI-generated description

BMW Sales Visualization

An interactive D3.js horizontal stacked bar chart visualizing BMW sales data by model and transmission type.

Features

  • Stacked Bar Chart: Shows sales volume for Manual vs Automatic transmissions by BMW model
  • Interactive Tooltips: Hover over bars to see detailed sales information
  • Responsive Design: Adapts to different screen sizes with a modern gradient background
  • Visual Polish: Smooth animations, drop shadows, and hover effects

Data

The visualization uses data.csv containing BMW sales records with the following columns:

  • Model: BMW model (3 Series, 5 Series, 7 Series, X1, X3, X5, X6, M3, M5, i3, i8)
  • Year: Production year
  • Region: Geographic region
  • Color: Vehicle color
  • Fuel_Type: Petrol, Diesel, Hybrid, or Electric
  • Transmission: Manual or Automatic
  • Engine_Size_L: Engine displacement in liters
  • Mileage_KM: Odometer reading in kilometers
  • Price_USD: Sale price in USD
  • Sales_Volume: Number of units sold
  • Sales_Classification: High or Low sales category

Visualization

The chart aggregates sales volumes by:

  1. Y-Axis: BMW Model names
  2. X-Axis: Total Sales Volume (in millions)
  3. Colors:
    • Purple (#8B5CF6): Manual transmission
    • Pink (#EC4899): Automatic transmission

Models are sorted by total sales volume in descending order.

Files

  • index.html - HTML structure and styling
  • script.js - D3.js visualization logic
  • data.csv - BMW sales dataset

Technologies

  • D3.js v7 - Data visualization
  • HTML5 - Structure
  • CSS3 - Styling with gradients and animations

Usage

  1. Open index.html in a modern web browser
  2. Hover over bars to see detailed sales information
  3. Data is automatically loaded from data.csv

Interaction

  • Hover: Bars brighten and scale slightly, showing a tooltip with model, transmission type, and sales volume
  • Visual Feedback: Drop shadows and smooth transitions provide responsive feedback
MIT Licensed

Similar vizzes

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
91% match
Loading thumbnail…

Final Stacked Bar Chart with HTML

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.

BBismark Kofi Owusu Sarfo
89% match
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
88% 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
87% 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
87% match
Loading thumbnail…

Stacked Bar Chart with HTML and movable filter

This example shows a stacked bar chart of BMW model sales by year, where each bar segment represents a model's sales volume. A movable filter panel lets the user highlight the model with the highest or lowest total sales, dimming all other segments for comparison. Built with D3 v7, it uses `d3.rollups` to aggregate the CSV data by year and model, `d3.stack` for stacking, `d3.scaleBand` and `d3.scaleLinear` for axes, and SVG rendering for interactive bars with tooltips.

BBismark Kofi Owusu Sarfo
86% 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
83% match
Loading thumbnail…

Making Meaning of BMW Sales Volume Bar Chart

This interactive dashboard uses D3.js v7 to visualize BMW sales data from 2010-2024, displaying key metrics, a timeline of sales across six markets, top-selling models, regional distribution, fuel type comparisons, and yearly trends. The visualization employs SVG rendering with animated transitions, tooltips, and annotations that highlight peak sales periods and best-selling models. Data loaded from a CSV file is aggregated and processed using D3 rollups to compute summary statistics.

BBismark Kofi Owusu Sarfo
83% match