Skip to main content
SimilarExport ZIP
100%

Fork of CV: Clickable Circles

✓ Published0🌍 Public
KKatharina Simma
Last edited Mar 18, 2026
Created on Mar 17, 2026

A React-powered visualization layers animated, clickable circles over a watery canvas background. SVG circles and labels bounce with CSS keyframe animations, while a Canvas-based WaterEffect class generates ripples that follow the moving circles and draws wavy background patterns. Clicking a circle selects it, turning it red and increasing its scale, using D3 selections for event handling and SVG updates.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of CV: Clickable Circles

This example shows a set of five circles arranged diagonally across an SVG canvas. Clicking a circle toggles its fill to white with a black stroke, while all others remain black, using React state to track the selected circle’s ID. The visualization is rendered with D3 v7, where select and join manage circle elements, and the click handler updates React state via a callback.

Jjustinenns@hotmail.com
86% match
Loading thumbnail…

Fork of CV: Clickable Circles

Five heart-shaped paths are rendered from static x/y coordinates stored in a data module. Clicking a heart selects it, changing its fill and stroke to a pink highlight via a React state callback. The visualization uses D3’s `select` and `join` to bind data to SVG `path` elements, while React manages the selected-circle state through a `useEffect` hook that re-renders the chart on every click.

KKareena
84% 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
82% 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
81% 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
81% match
Loading thumbnail…

CV: Responsive Clickable Circles

This example shows a set of five circles arranged diagonally across a responsive SVG canvas. Clicking any circle toggles its state, changing its fill from black to white and adding a thick black outline. The visualization uses React state to track the selected circle and D3 v7 scales to map fixed data coordinates to the container’s dynamic width and height. A ResizeObserver hook measures the container, triggering a re-render of the circles via D3’s select and join pattern.

CCurran Kelleher
81% 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
81% 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
80% match