Clickable Circles with D3 and React

100%

Clickable Circles with D3 and React

✓ Published0🌍 Public

Last edited Sep 10, 2025

Created on Sep 10, 2025

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.

AI-generated description

MIT Licensed

Similar vizzes

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

86% match

Loading thumbnail…

Clickable Circles with D3 Rosetta

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.

BBismark Kofi Owusu Sarfo

83% match

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

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

82% match

Loading thumbnail…

ScatterPlot

This scatter plot visualizes the relationship between BMW sales and price, with each point representing a model. The code loads data from a CSV file and maps sales to the x-axis and price to the y-axis using d3.scaleLinear. Rendered as SVG circles with hover effects, the chart displays axes via d3.axisBottom and d3.axisLeft, and includes text labels for both dimensions. The visualization uses D3 v7 and applies CSS styling for dot appearance.

GGorantla Vishnusai

80% match

Loading thumbnail…

sketch with D3

This scatter plot visualizes the relationship between car price and mileage, with each circle representing a vehicle and its color indicating fuel type (Petrol, Diesel, Hybrid, or Electric). Using D3 v7, the code loads data from an external CSV file, converts numeric fields, and renders an SVG with linear scales for both axes. The visualization includes labeled axes, a title, and a custom legend built from the distinct fuel types. d3.csv fetches the data, while d3.scaleLinear and d3.scaleOrdinal handle the positional encoding and categorical color mapping respectively, with d3.axisBottom and d3.axisLeft generating the tick marks.

BBismark Kofi Owusu Sarfo

79% match

Loading thumbnail…

Q1_Reusable D3 Scatter Plot

This reusable scatter plot visualizes car sales data, showing the relationship between horsepower and price, with color encoding car make and bubble size representing mileage. The chart includes interactive tooltips that display detailed values on hover. Built with D3 v7, it uses `d3.scaleLinear` for axes, `d3.scaleSqrt` for bubble size, and `d3.scaleOrdinal` with `schemeTableau10` for categorical colors. Data comes from a Kaggle CSV loaded via `d3.csv`, rendered as SVG elements within a reusable component function.

Mmaddineni2112@gmail.com

78% match

Loading thumbnail…

Fork of React & D3 Vibecoding Starter

This example shows a React and D3 bar chart of BMW sales volumes across different models, using data loaded from a CSV file and rendered as SVG. The chart displays the average sales volume for each car model, with interactive bars that highlight and dim upon selection. It uses D3 v7 APIs such as `scaleBand`, `scaleLinear`, `axisBottom`, and `axisLeft` within a React component structure. The implementation leverages a `ResizeObserver` for responsive dimensions and D3 joins for rendering the bars and axes.

Ssaiabhishekmunnangi@gmail.com

78% match