Skip to main content
SimilarExport ZIP
100%

Fork of Clickable Circles

✓ Published0🌍 Public
RRashad Tyler
Last edited Jan 21, 2026
Created on Jan 21, 2026
Forked from 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.

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

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

Fork of Circles with D3

This example displays seven semi-transparent circles, each with a distinct color and radius, positioned at fixed coordinates on a soft green background using D3.js v7. The visualization constructs an SVG container sized to the full viewport and binds the static array of circle data to SVG circle elements via the `selectAll`/`data`/`join` pattern, setting attributes like `cx`, `cy`, `r`, and `fill` directly in the D3 selection. The code uses the `select` method to target the container div and imports from the D3 module, serving as a simple demonstration of data-driven SVG rendering without any interaction or animation.

Rrpkupfer@wpi.edu
88% match
Loading thumbnail…

Fork of Circles with D3

This example renders a set of seven translucent, colorful circles on a light green SVG background, each with a fixed position, radius, and hex color. The visualization, built with D3 v3, uses the `select`, `selectAll`, `data`, and `join` methods within an `index.js` module to bind an array of circle objects to SVG `<circle>` elements. It sets the `cx`, `cy`, `r`, `fill`, and `opacity` attributes directly, with a uniform opacity value of 0.708. The layout is static, with no interaction or animation, and the data is hardcoded in the script.

Rrishithagovini99@gmail.com
88% match
Loading thumbnail…

Fork of Circles

Seven colored circles of varying sizes and positions render as an SVG. The visualization uses D3 v5’s `select`, `selectAll`, and `join` to bind an array of circle objects, setting each circle’s `cx`, `cy`, `r`, `fill`, and a uniform opacity via `.attr`. Clicking any circle triggers an `alert` displaying the circle’s `name`, if defined, using a D3 event listener.

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

Fork of Circles with D3

This example demonstrates seven semi-transparent circles scattered across a light green background, each positioned with distinct coordinates, radii, and vibrant fill colors. The visualization uses D3.js version 7.8.5 to create and render circles as SVG elements. The code employs D3's data-join pattern, using `selectAll`, `data`, and `join` to bind an array of circle objects to SVG elements, with attributes like `cx`, `cy`, `r`, and `fill` set through chained methods.

Aabbasoveli@gmail.com
87% match
Loading thumbnail…

Fork of Circles with D3

This example demonstrates a collection of seven semi-transparent circles scattered across a light green background, each with a distinct neon color and varying radius. Built with D3.js v7, the visualization binds an array of circle data objects to SVG circle elements using `selectAll` and `join`. The circles’ positions, sizes, and fills are set dynamically through attribute functions, with a fixed opacity applied uniformly. The code also dynamically sizes the SVG container to match its parent element’s dimensions.

DDaniel Lewis
87% match