Skip to main content
SimilarExport ZIP
100%

Fork of Clickable Circles

✓ Published0🌍 Public
BBHUMIKA CHUNDU
Last edited Oct 17, 2025
Created on Oct 17, 2025
Forked from 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.

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

Fork of Circles with D3

Seven translucent circles of varied sizes and neon colors float on a pale green background. Using the D3.v7 `select` API, the visualization joins SVG circles to an array of position, radius, and fill data, setting each circle's circumference attributes and a uniform 0.7 opacity. The fixed full-viewport container resizes the drawing with the browser window.

Sskasliwal@wpi.edu
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
86% 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
86% match