Skip to main content
SimilarExport ZIP
100%

Circle Bubble of BMW sales

✓ Published1🌍 Public
BBismark Kofi Owusu Sarfo
Last edited Nov 14, 2025
Created on Nov 14, 2025

An animated bubble chart displays BMW sales volumes from 2010 to 2024 for eleven car models across six world regions. Yearly transitions show sales evolving over time, with color-coded bubbles representing distinct models. Users can filter by country and model via checkboxes, pause or reset the animation, and hover for tooltips. Built with D3.js v7, it uses `d3.rollups` for data aggregation, `d3.csv` for loading CSV data, and SVG transitions driven by a JavaScript interval to animate between years on a scatter plot.

AI-generated description

BMW Sales Animation

An interactive D3.js visualization showing BMW sales volumes across different regions, models, and years with animated bubble charts.

Features

  • Animated Bubble Charts: Watch sales data evolve year by year
  • Country Filtering: Toggle countries on/off via checkboxes
  • Interactive Tooltips: Hover over bubbles to see detailed sales information
  • Play/Pause Controls: Control the animation at your own pace
  • Color-Coded Models: Each BMW model has a distinct color
  • Responsive Layout: Grid lines and axis labels for easy data reading

Files

  • index.html - Main HTML structure
  • script.js - D3.js visualization and animation logic
  • dataProcessor.js - Data processing and color mappings
  • data.csv - BMW sales dataset

Data Structure

The dataset includes:

  • Models: 3 Series, 5 Series, 7 Series, X1, X3, X5, X6, M3, M5, i3, i8
  • Regions: North America, South America, Europe, Asia, Africa, Middle East
  • Years: 2010-2024
  • Metrics: Sales Volume, Price, Engine Size, Fuel Type, Transmission

How to Use

  1. Open index.html in a web browser
  2. The animation starts automatically
  3. Use the checkboxes to filter by country
  4. Click Play/Pause to control the animation
  5. Hover over bubbles to see detailed information

Technologies

  • D3.js v7
  • HTML5
  • CSS3
  • JavaScript (ES6+)
MIT Licensed

Similar vizzes

Loading thumbnail…

Circle Bubble of BMW sales

This animated bubble chart visualizes BMW sales volumes from 2010 to 2024 across selected countries and car models. A play/pause control and checkboxes let viewers filter by region and model while a year counter animates the timeline. The visualization uses D3 v7's `d3.csv` to load data, `d3.select` for DOM selection, and `d3.rollups` for grouping, rendering SVG bubbles whose size corresponds to sales figures.

BBismark Kofi Owusu Sarfo
97% match
Loading thumbnail…

Circle Bubble of BMW sales

This animated bubble chart visualizes BMW sales volumes from 2010 to 2024 across selected countries and car models. A play/pause control and checkboxes let viewers filter by region and model while a year counter animates the timeline. The visualization uses D3 v7's `d3.csv` to load data, `d3.select` for DOM selection, and `d3.rollups` for grouping, rendering SVG bubbles whose size corresponds to sales figures.

BBismark Kofi Owusu Sarfo
97% match
Loading thumbnail…

New Circle Bubble of BMW sales

This animated bubble chart visualizes BMW sales volumes from 2010 to 2024, with each bubble representing a model-country pair and sized by total sales volume for the displayed year. An interactive timeline plays through years sequentially, while users can filter by region and model using checkboxes. The visualization uses D3 v7 to render SVG elements and a `d3.rollups` operation in `dataProcessor.js` to aggregate the CSV data across country, model, and year dimensions. Animated transitions update bubble positions and sizes as the year label changes.

BBismark Kofi Owusu Sarfo
96% match
Loading thumbnail…

A Circle Bubble of BMW volume of sales with Hover

This animated bubble chart visualizes BMW sales volumes across global markets, plotting each model as a circle whose size reflects total sales for a given year. The visualization cycles through years from 2010 to 2024, with a large year label updating as the animation progresses. Users can toggle country filters via checkbox controls or pause the animation with a play/pause button. Built with D3.js v7, the chart uses `d3.rollups` for data aggregation, `d3.scaleSqrt` for bubble sizing, and SVG elements with animated transitions. Hovering over a bubble reveals detailed sales information via a tooltip.

BBismark Kofi Owusu Sarfo
94% match
Loading thumbnail…

Fit Circle Bubble of BMW volume of sales with Hover

This interactive D3 visualization displays BMW sales volumes as an animated bubble chart, with each bubble representing a model-year combination colored by model and positioned by year and sales volume. The chart animates through years, updating bubbles by country, with hover tooltips and checkbox filters for regions. Using d3.scaleLinear, d3.scaleSqrt, d3.rollups, and d3.extent, it processes CSV data to show trends across 2010–2024. Playback controls pause and resume the animation, while the legend distinguishes eleven BMW models.

BBismark Kofi Owusu Sarfo
93% match
Loading thumbnail…

Fit Circle Bubble of BMW volume of sales with Hover

An animated bubble chart visualizes BMW sales volumes across global markets from 2010 to 2024, with bubble size encoding sales figures for each model and country pair. The visualization updates year by year, showing sales trends over time. Interactive hover tooltips reveal precise details, while checkboxes filter markets and clicking legend items isolates specific models. Built with D3 v7, the chart uses d3.rollups for data aggregation, d3.scaleSqrt for bubble sizing, and d3.csv for loading the dataset, with SVG rendering and smooth animations between years.

BBismark Kofi Owusu Sarfo
93% match
Loading thumbnail…

BMW Sales Animation (2010-2024)

This animated bubble chart visualizes BMW model sales volumes across six global regions from 2010 to 2024. The visualization uses an SVG-based scatter plot where bubble size represents total sales volume, with each model assigned a distinct color and each region mapped to a representative country. Controls include checkboxes for filtering countries and models, plus play/pause and reset buttons. Built with D3 v7, the visualization uses `d3.rollups` for data aggregation, a linear animation interval for year progression, and smooth transitions for bubble movement and scaling.

BBismark Kofi Owusu Sarfo
93% match
Loading thumbnail…

New Circle Bubble of BMW volume of sales with Hover

This animated bubble chart visualizes BMW sales volumes across global markets from 2010 to 2024, with circles positioned by year and scaled by sales volume. The visualization cycles through years automatically, updates the large year display, and uses d3.rollups to aggregate the CSV data by country, model, and year. Hovering over bubbles reveals detailed tooltips, while checkboxes filter by market and clicking legend items highlights specific models. The implementation uses D3 v7 with SVG rendering, d3.scaleSqrt for bubble sizing, and d3.axis for the grid and axes.

BBismark Kofi Owusu Sarfo
92% match