Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Clickable Circles with D3 and React

Public visualization

Viewing a saved revision (read-only)

adf0449dc87a47a5a088caa3b6fff609

Clickable Circles with D3 and React

0 stars4🌍 Public
223100098@lums.edu.pk
Last edited Oct 8, 2025
Created on Oct 8, 2025

A grid of pastel-colored circles, each positioned by explicit pixel coordinates from a static data array, fills the visualization. React manages the application state while D3's `select` and `join` methods render the SVG `<circle>` elements. Hovering a circle triggers a `mouseover` event that calls `setSelectedId`, updating React state and re-running the D3 selection to draw a black stroke around the active circle, while `mouseout` clears the highlight.

AI-generated description