Skip to main content
SimilarExport ZIP
100%

Clickable Circles with D3 Rosetta

✓ Published0🌍 Public
BBismark Kofi Owusu Sarfo
Last edited Sep 25, 2025
Created on Sep 25, 2025

This interactive scatterplot displays BMW sales data from 2010 to 2024, plotting vehicle Price_USD against Sales_Volume. Clicking any circle highlights that datum with a white fill and thick black stroke while resetting all others to black. The visualization uses d3-rosetta’s `unidirectionalDataFlow`, `createStateField`, and `createMemoize` to manage state and cache data loading. D3 v7 scales (`scaleLinear`) and selections render circles, while `setupClickInteraction` binds click events that update the selected ID, triggering automatic re-rendering.

AI-generated description

BMW Sales Data (2010–2024)

This dataset contains information on BMW car sales across global regions from 2010 to 2024. It includes details about models, specifications, and market performance.

Source

The original dataset was published on Kaggle:
BMW Sales Data 2010–2024 – Kaggle

Dataset Description

  • Model – BMW model name (e.g., 3 Series, X5, i8)
  • Year – Year of manufacture (2010–2024)
  • Region – Market region (Asia, Europe, North America, etc.)
  • Color – Car color (categorical)
  • Fuel_Type – Petrol, Diesel, Hybrid, or Electric
  • Transmission – Manual or Automatic
  • Engine_Size_L – Engine size in liters (numeric)
  • Mileage_KM – Mileage in kilometers (numeric)
  • Price_USD – Sale price in U.S. dollars (numeric)
  • Sales_Volume – Number of units sold (numeric)
  • Sales_Classification – Categorical label (High, Medium, Low)

Usage in VizHub

  • Paste the dataset into a data.csv file in your VizHub project.
  • Use D3.js to load the file:
MIT Licensed

Similar vizzes

Loading thumbnail…

Clickable Circles with D3 Rosetta

This example shows a scatterplot of BMW car models positioned by x and y coordinates, with clickable circles that highlight the selected model in white with a black stroke while resetting others to black. Built with D3 v7 and the d3-rosetta library’s unidirectional data flow, it uses `setupSVG` with `one` to manage the SVG, `renderCircles` with `join` for circle rendering, and `setupClickInteraction` to handle click events that update state via `createStateField`. The data comes from a static dataset of car sales records.

BBismark Kofi Owusu Sarfo
91% match
Loading thumbnail…

Clickable Circles with D3 Rosetta

Six circles represent BMW models, positioned by coordinates from static data, with color, stroke, and layer order reflecting a user-selected vehicle. Built on d3-rosetta’s `unidirectionalDataFlow` pattern, the example uses `one`, `createStateField`, and `createMemoize` to manage the SVG, render circles via a D3 join, and handle click events that update state, re-rendering with `highlightSelectedDatum` to visually emphasize the chosen datum.

BBismark Kofi Owusu Sarfo
87% match
Loading thumbnail…

Clickable Circles with D3 and React

This interactive scatterplot visualizes a synthetic car sales dataset, plotting the price and mileage of various BMW models against a categorical x-axis of model names. Each circle's size encodes the sales volume, while its color represents the fuel type, creating a clear overview of market performance. Built with React and D3.js, the visualization uses a `vg` selection with `scalePoint`, `scaleLinear`, and `axisBottom`/`axisLeft` APIs to render the axis and circles.

BBismark Kofi Owusu Sarfo
83% match
Loading thumbnail…

Clickable Circles with D3 Rosetta

This example demonstrates interactive selection and highlighting of circles in a scatter plot. The visualization renders six circles from a static dataset using D3 selections, and clicking any circle updates the application state, which re-runs the rendering function to apply a white fill and thick stroke to the selected point. It uses the `d3-rosetta` library's `unidirectionalDataFlow`, `createStateField`, and `one` utilities within a React-free, vanilla JavaScript setup, leveraging D3 v7 for DOM manipulation and event handling.

CCurran Kelleher
82% match
Loading thumbnail…

Scatter Plot with D3 BMW

This interactive scatter plot visualizes BMW car models by regional sales volume and average price. It uses D3.js v7 vith the d3-rosetta utility library for unidirectional data flow, rendering circles whose colors encode car models. Hovering over a data point or a legend item highlights all points for that model with a black stroke. The visualization displays a categorical color legend and loads synthetic static data from a local module after a simulated delay.

BBismark Kofi Owusu Sarfo
82% match
Loading thumbnail…

Scatter Plot with Clickable Circles

A scatter plot displays car model data with circles plotted according to continuous axes. The visualization uses D3 v7 with a unidirectional data flow pattern, where clicking any circle highlights it by changing its fill to white and adding a black stroke, while resetting all other circles to black fills without strokes. The rendering pipeline uses D3 selectors with `.join` operations to manage SVG circles, and the interaction is implemented through mouse click event listeners that update the selected state and trigger a re-render.

BBismark Kofi Owusu Sarfo
79% match
Loading thumbnail…

pseudo-scatter-plot-with-d3

This example presents a clickable scatter plot rendered with D3.js and the d3-rosetta utility library, which enables unidirectional data flow. It loads data from a CSV file containing circle positions, radii, and colors, and renders them as interactive SVG circles. When clicked, a circle becomes highlighted with a black stroke and raised to the front. The visualization demonstrates d3-rosetta’s `unidirectionalDataFlow`, `createStateField`, and `one` utilities, along with D3’s `select`, `csv`, and data joins for updating the DOM.

CCurran Kelleher
77% 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
76% match