Fork of Clickable Circles

100%

Fork of Clickable Circles

✓ Published1🌍 Public

Last edited Sep 23, 2025

Created on Sep 23, 2025

Seven colored circles sit on a pale green background. Clicking a circle highlights it with a thick black outline and brings it to the front. The example uses d3 v7 for selection and event handling, with a custom unidirectional data-flow pattern managing the selected state. Circle positions and sizes come from static data in a JavaScript module.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Clickable Circles

Seven semi-transparent circles, each with a distinct neon color, are arranged across a fixed, full-screen light-green background. Clicking a circle selects it, permanently highlighting the chosen circle with a thick black stroke and bringing it to the front. The visualization uses a unidirectional data flow via `setState`, with `setupSVG` and `renderCircles` managing D3 v7 join operations and click event handlers.

BBHUMIKA CHUNDU

93% match

Loading thumbnail…

Fork of Clickable Circles

Seven semitransparent circles sit at fixed positions on a light-green SVG canvas. Clicking any circle selects it, giving it a thick black stroke and bringing it to the front. The visualization is built with D3 v7 using a unidirectional data flow pattern where the viz function re-renders on each state change. The code uses d3.select and join to manage circle elements, while event listeners call a setter to update the selected datum.

Jjedrt.samo@gmail.com

93% match

Loading thumbnail…

Fork of Clickable Circles

This example displays seven translucent circles with distinct colors and radii, positioned across a fixed full-screen SVG. Clicking a circle highlights it with a black stroke and brings it to the foreground. The visualization uses D3 v7’s `selectAll` and `join` for rendering, with a unidirectional data flow pattern managing the selected state. Coordinates, sizes, and colors come from a static data array.

RRashad Tyler

91% match

Loading thumbnail…

Fork of Clickable Circles

This interactive example displays a collection of clickable circles, known as "bubbles," arranged across a light-green canvas. A click on any bubble triggers a popup overlay revealing its position, radius, and color values. The visualization implements a unidirectional data flow pattern using a custom state management function, while D3 v7's `select` and data join methods handle the SVG rendering and click events. The red-toned palette creates a cohesive, simple interface for exploring the static dataset.

Wwqp782@haw-hamburg.de

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

86% match

Loading thumbnail…

Fork of Pseudo Scatter Plot with Clickable Circles

Six circles, each with a fixed position and a radius of 35, appear across the screen and react to mouse clicks. Clicking a circle changes its fill to white, adds a thick black outline, and brings it to the front, while all other circles revert to a plain black fill. Built with D3 v7, the example uses the `join` API to create and manage the SVG circles, with a unidirectional data flow (`udf.js`) that maintains the selected circle’s ID in state. The interaction is set up via a custom `setupClickInteraction` function that assigns a `click` event listener to each circle.

BBismark Kofi Owusu Sarfo

86% match

Loading thumbnail…

Fork of Circles with D3

This example displays seven colored circles of varying sizes and positions on a pale green background. It demonstrates the D3 General update pattern for creating and managing SVG elements. The code uses `select`, `selectAll`, `data`, and `join` from D3 to bind circle data to SVG `<circle>` elements, then sets `cx`, `cy`, `r`, `fill`, and `opacity` attributes via method chaining. The data is an array of objects defining each circle's coordinates, radius, and color.

WWill Chen

84% match

Loading thumbnail…

Fork of Circles with D3

Seven semi-transparent circles in vivid colors, such as pink, purple, and green, are positioned at fixed coordinates on a light gray background. The visualization uses D3.js v7 to render an SVG canvas that fills its container, with the `select` API joining circle elements to a static dataset containing x, y, radius, and fill properties. The circles are drawn with an opacity of 0.7, and the background color is configurable through the `viz` function’s options.

RRyan Offstein

84% match