Skip to main content
SimilarExport ZIP
100%

Clickable Circles with D3 Rosetta

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

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.

AI-generated description
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
93% 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
87% 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
87% match
Loading thumbnail…

Clickable Circles with D3 and React

A grid of pastel-colored circles, each positioned by explicit pixel coordinates from a static data array, fills the visualization. React manages the application state while D3's `select` and `join` methods render the SVG `<circle>` elements. Hovering a circle triggers a `mouseover` event that calls `setSelectedId`, updating React state and re-running the D3 selection to draw a black stroke around the active circle, while `mouseout` clears the highlight.

223100098@lums.edu.pk
78% match
Loading thumbnail…

Clickable Circles

This example demonstrates interactive selection of circles rendered with D3.js. Each circle displays its own position and radius, and clicking one highlights it with a black stroke and raises it above the others. The visualization uses a unidirectional data flow pattern where state changes trigger re-rendering through the `viz` function. D3’s `selectAll` and `join` methods manage circle creation and updates, while click event listeners call `setSelectedDatum` to update the selected circle’s styling.

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