Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Moving Mouse

Public visualization

Viewing a saved revision (read-only)

f2e7097aadc34cd88fc752e6eb858f55

Moving Mouse

0 stars2🌍 Public
SSubhendu Karmakar
Last edited Jan 19, 2024
Created on Jan 19, 2024

A single red circle follows the mouse cursor across a full-screen SVG canvas, updating its position in real time with each mousemove event. Clicking anywhere randomly changes the circle's fill color by generating new RGB values. The visualization uses D3 v7's `select`, `join`, and event handling to bind the circle to the pointer coordinates, with state managed through a custom `setState` function that triggers re-renders. The SVG dimensions are set to match `window.innerWidth` and `window.innerHeight`, and the cursor is hidden via CSS.

AI-generated description

Demonstrates fundamental DOM manipulation using D3.js by making a smiley face whose eyebrows move.