Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Interactive circle

Public visualization

Viewing a saved revision (read-only)

9aa4f6c0d01445928bc5ddc0ee28172e

Interactive circle

0 stars0🌍 Public
Ttim10133222
Last edited Jan 1, 2023
Created on Jan 1, 2023
Forked from HTML Starter

This example shows how a user’s pointer position directly controls the placement of a single circle within an SVG canvas. As the mouse moves over the full-width, full-height SVG, the circle centers itself exactly at the cursor’s client coordinates. Built with React (using the `useState` and `useCallback` hooks) and D3 v7 for rendering, the app updates the circle’s `cx` and `cy` attributes through React state changes triggered by the `onMouseMove` event. The visualization demonstrates a simple, responsive interaction pattern without external data sources.

AI-generated description