100%

Mouse Follower Simple

✓ Published2🌍 Public

Last edited May 12, 2024

Created on May 12, 2024

This example demonstrates a simple interactive visualization where a circle follows the mouse cursor within an SVG container. The circle’s position is stored in the application state, and every mouse movement updates the state using immutable update patterns, spreading the previous state object and assigning new x and y coordinates. The code uses D3’s `select` and `pointer` APIs to handle the `mousemove` event, and a data join to render the SVG and circle elements. The circle is initialized at the center of the container before any mouse interaction occurs.

AI-generated description

A program that follows the mouse around and changes its color using immutable update patterns.

Challenge

Use this pattern to make something else respond to mouse events

MIT Licensed

Similar vizzes

Loading thumbnail…

Mouse Follower Simple

This example demonstrates a simple interactive visualization where a circle follows the mouse cursor across the screen. The circle is initially positioned at coordinates (50,50) and updates its position in real-time in response to mouse movements. The code uses the D3.js library (v7) to select the `#app` div, append an SVG element sized to the full window dimensions, and create a circle element with a radius of 50 pixels. The visualization listens for `mousemove` events on the SVG and uses the event's x and y coordinates to update the circle's `cx` and `cy` attributes, creating a direct and responsive tracking effect.

CCurran Kelleher

93% match

Loading thumbnail…

Mouse Follower

This example demonstrates a mouse-following circle that changes position with cursor movement and shifts to a random color on click. The visualization starts with a blue circle centered in the viewport, then uses d3’s `select`, `pointer`, and `join` methods to render an SVG and update its attributes. State changes follow immutable update patterns, spreading the previous state and overriding specific properties like `x`, `y`, and `color`. The code also relies on container dimensions and event listeners for `mousemove` and `click` interactions.

CCurran Kelleher

92% match

Loading thumbnail…

Mouse Follower Simple

A simple interactive visualization renders a circle that follows the mouse cursor. The circle grows in radius as the user moves the mouse faster, measured via the `event.movementX` and `event.movementY` properties, with its size capped at 100 pixels. The example uses D3 v7's selection and data join methods (`select`, `selectAll`, `join`) to bind SVG elements, updating position and radius on each `mousemove` event. The circle is styled with a transparent fill and a black stroke, demonstrating dynamic SVG updates with D3.

SSeekerzero

92% match

Loading thumbnail…

Mouse Follower

A circle tracks the cursor across a full-screen SVG canvas. Each mouse movement updates the circle’s center coordinates via a state object and a custom `setState` callback. The visualization uses d3.v7’s `select` API to bind SVG elements and handle `mousemove` events, while `join` synchronizes the circle’s `cx` and `cy` attributes. The canvas resizes to the browser window dimensions.

Jjjlaber

90% match

Loading thumbnail…

Mouse Follower Simple

This example shows a single circle following the mouse cursor as it moves across the browser window. The visualization uses D3 v7 to create an SVG canvas sized to the viewport and appends a circle element at an initial position. Through D3's event handling, the `mousemove` listener updates the circle's `cx` and `cy` attributes based on the cursor's coordinates, producing a direct and immediate tracking effect.

Jjjlaber

90% match

Loading thumbnail…

Mouse Follower

A circle follows the mouse pointer across the screen, updating its position in real time based on cursor movement. The visualization demonstrates unidirectional data flow with D3 v7 and React, where mouse events trigger state updates that re-render the circle’s coordinates. The code uses d3-selection `select` and `join` to bind SVG elements, with an initial state centered in the viewport. The React framework manages state through a `setState` callback, while the D3 `mousemove` event handler captures pointer positions.

CCurran Kelleher

90% match

Loading thumbnail…

Mouse Follower

This example demonstrates a simple interactive visualization where a circle follows the mouse cursor within an SVG canvas. It shows how React state can track pointer position and update visual elements in real-time. The code uses React’s `useState` and `useCallback` hooks to manage the mouse coordinates from the `onMouseMove` event, and renders a single circle element with dynamic `cx` and `cy` attributes. The visualization is built with React 16.9 and rendered as SVG, with the circle starting at the center of a 960×500 pixel viewport.

XXinting Yao

90% match

Loading thumbnail…

Mouse Follower

A circle follows the mouse cursor as it moves across an SVG canvas, updating its position in real time. The visualization uses React state via `useState` and `useCallback` to track mouse coordinates from the `onMouseMove` event, and renders the circle with SVG markup. The React DOM library mounts the component to the page, while the circle’s center is set to the current pointer location. This demonstrates a simple interactive pattern where user input directly drives visual output.

Ccaineosborne

90% match