Clickable Circles with D3 Rosetta

100%

Clickable Circles with D3 Rosetta

✓ Published5🌍 Public

Last edited Jul 9, 2025

Created on Jun 20, 2025

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.

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

88% 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…

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

86% 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

85% 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

84% match

Loading thumbnail…

Clickable Circles with D3 and React

Clickable circles rendered in an SVG canvas demonstrate a React and D3 integration. The visualization shows 14 circles with varied positions, sizes, and colors from a static array. Clicking a circle selects it, highlighting its outline with a black stroke. The App component manages selection state and re-renders the D3 visualization via `select()` and `.join()` for efficient DOM updates. The `viz` function uses D3’s SVG selection API to set attributes and attach click handlers, while React’s `useState` and `useEffect` control the interactive response.

CCurran Kelleher

83% 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

82% match

Loading thumbnail…

CV: Clickable Circles

A React application renders five black circles positioned along a downward curve using D3.js. Clicking any circle turns it white with a black outline, visually indicating selection through a state-managed callback. The visualization leverages D3's `select` and `join` operations within an SVG container, with circle coordinates and styling defined directly in the data array and rendered through `renderCircles`. The selected state is tracked in React and re-applied on each interaction.

CCurran Kelleher

81% match