🌍 Public
Viewing a saved revision (read-only)
7a5d4553dc744c9397d082cd7c785c44
Clickable Circles with D3 and React
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