Fork of CV: Clickable Circles

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.

92% match

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.

90% match

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

87% match

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

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.

Fork of CV: Clickable Circles

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.

KKatharina Simma

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

Fork of Fork of Circles with D3

This visualization presents a set of colored circles overlaid on vertical bars, with clickable circles that highlight their selection with a black stroke. Data consists of 14 items with x, y, radius, and fill color properties. The code uses React hooks to manage the selected circle's ID and D3 v7's `select` and `join` methods to bind data and render SVG elements. Clicking a circle triggers `setSelectedId`, causing a re-render that updates the stroke attribute on the selected circle.