Skip to main content
SimilarExport ZIP
100%

Fork of Clickable Circles

✓ Published0🌍 Public
Wwqp782@haw-hamburg.de
Last edited Jan 16, 2026
Created on Jan 16, 2026
Forked from 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.

AI-generated description
MIT Licensed

Similar vizzes

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
87% match
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
87% match
Loading thumbnail…

Fork of Clickable Circles

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.

Ggedamrajani336@gmail.com
86% 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
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
83% match
Loading thumbnail…

Fork of Fork of Circles with D3

This example shows a collection of semi-transparent, colored circles rendered on a mint-green background using D3.js. The visualization uses D3's method-chaining and general update pattern to bind circle data—including coordinates, radius, and fill color—to SVG elements. The code demonstrates D3's `select`, `selectAll`, and `join` functions to create the SVG container, while a tooltip element changes its text on mouseover. Interactive behavior includes console logging of a circle's name on click, illustrating D3 event handling.

Cchris.shimotake@gmail.com
82% match
Loading thumbnail…

Fork of Fork of Circles with D3

This example shows a collection of semi-transparent, colored circles rendered on a mint-green background using D3.js. The visualization uses D3's method-chaining and general update pattern to bind circle data—including coordinates, radius, and fill color—to SVG elements. The code demonstrates D3's `select`, `selectAll`, and `join` functions to create the SVG container, while a tooltip element changes its text on mouseover. Interactive behavior includes console logging of a circle's name on click, illustrating D3 event handling.

Cchris.shimotake@gmail.com
82% match
Loading thumbnail…

Fork of Fork of Circles with D3

This example shows a collection of semi-transparent, colored circles rendered on a mint-green background using D3.js. The visualization uses D3's method-chaining and general update pattern to bind circle data—including coordinates, radius, and fill color—to SVG elements. The code demonstrates D3's `select`, `selectAll`, and `join` functions to create the SVG container, while a tooltip element changes its text on mouseover. Interactive behavior includes console logging of a circle's name on click, illustrating D3 event handling.

Cchris.shimotake@gmail.com
82% match