Skip to main content
SimilarExport ZIP
100%

Mouse Follower

✓ Published0🌍 Public
IIan Johnson
Last edited Jul 8, 2020
Created on Jul 8, 2020

A circular marker follows the mouse cursor across an SVG canvas, while a path traces the complete route of its movement. The visualization demonstrates unidirectional data flow in React with D3.js v5, using React state and Hooks (`useState`, `useCallback`) to handle mouse events and trigger re-renders. The path is built by collecting `clientX` and `clientY` coordinates on each `onMouseMove` event, and a reset button clears the trace back to the current cursor position. The SVG is rendered directly via React, with D3 providing the `path` utility for constructing the line string.

AI-generated description

A program that follows your mouse with a circle.

Tutorials:

Extras:

  • As the circle is moved around the SVG, a Path is drawn that traces it's route (Thanks to Curran for the live help with this!)
  • Button added which removes the trace path and allows the user to re-draw it.

Uni-directional Data Flow Process:

  • -> RENDER
  • -> Perception & Cognition - User processes & understands what they see
  • -> Volition & Action - User wants to do something to change what they see
  • -> INTERACTION
  • -> Event Listener(s) are triggered for the particular event the user wants to change
  • -> Change State
  • -> RE-RENDER - VirtualDOM reconciliation - only updates what changed

Notes:

  1. initialMousePosition = object that puts the circle in the centre of the SVG (passed in below) (render).
  2. Create useState variable and function (mousePosition & setMousePosition). On the initial render, mousePosition = initialMousePosition.
  3. Mouse position initialises x and y co-ordinates.
  4. onMouseMove = interaction, initialised on first render, triggers function on state change (enables interaction).
  5. Changes the state of the circle based on the interaction (X & Y position). It extracts clientX & clientY from onMouseMove (many more look to be available) (interaction).
  6. Destructure to get each new coordinate.
  7. New state object defined and assigned to setMousePosition (see 9. for a better way).
  8. setMousePosition makes App re-render with the new object values as mousePosition.
  9. useCallback hook wrapped into handleMouseMove with a second argument as an array of the most recent dependencies. This means it doesn't reset the handleMouseMove as a new function each render. Only the first time it's rendered, so it's more efficient.
MIT Licensed

Similar vizzes

Loading thumbnail…

Mouse Follower

A circle follows the mouse cursor across an SVG canvas in this React-based visualization. The app tracks pointer coordinates using a React `onMouseMove` event handler and stores them in component state with the `useState` hook. Each mouse movement updates the circle’s `cx` and `cy` attributes, repositioning it instantly at the cursor’s location. The visualization uses React 16.9 and D3 v5 for rendering, with the SVG circle set to a fixed radius of 30 pixels. No data source is involved; the interaction is purely driven by user input.

MMartina Sladekova
92% match
Loading thumbnail…

Mouse Follower

A circle follows the mouse cursor across an SVG canvas, updating its position in real time based on pointer movement. The visualization demonstrates mouse-event handling and state-driven rendering with React, using the `useState` hook to store the cursor coordinates and `onMouseMove` to update them. ReactDOM renders an SVG circle whose `cx` and `cy` attributes are bound to the tracked position, with the viewport dimensions fixed at 960 by 500 pixels. No data source or external computation is involved; the example relies solely on React's declarative update cycle.

Aarorabaugh
92% match
Loading thumbnail…

Mouse Follower

A circle follows the mouse cursor across an SVG canvas. The visualization demonstrates React's state management with D3's event handling, using a `useState` hook to track cursor coordinates and a `useCallback` hook to efficiently update the circle's `cx` and `cy` attributes on every mouse move. The D3 v5 library renders the SVG element.

Nnkohdatavis
92% match
Loading thumbnail…

Mouse Follower

A circle follows the mouse cursor across an SVG canvas. The visualization demonstrates React's state management with D3's event handling, using a `useState` hook to track cursor coordinates and a `useCallback` hook to efficiently update the circle's `cx` and `cy` attributes on every mouse move. The D3 v5 library renders the SVG element.

Nnkohdatavis
92% match
Loading thumbnail…

Mouse Follower

A circle follows the mouse cursor as it moves across an SVG canvas, creating a simple interactive pointer-tracking effect. The visualization uses React state to store the cursor's coordinates and updates the circle's position through an `onMouseMove` event handler. Rendered with D3 v7 and React 18, the SVG circle has an aquamarine fill with a green stroke. The code relies on React's `useState` and `useCallback` hooks to manage and update the mouse position efficiently.

Aawidjaja777
92% match
Loading thumbnail…

Mouse Follower

An interactive SVG visualization renders a single circle that follows the mouse cursor across a 960-by-500 canvas. The React component tracks pointer movement via the `onMouseMove` event and updates the circle’s `cx` and `cy` attributes through `useState` and `useCallback`. Initially positioned at the canvas center, the circle moves smoothly with the cursor. The example demonstrates state-driven rendering in React 17 with D3 v7, using plain SVG elements rather than data joins or scales. No external data source is involved; the visualization purely reacts to user input.

LLove Wessman
92% match
Loading thumbnail…

Mouse Follower

A single circle follows the mouse cursor across an SVG canvas. The React component tracks pointer movement through the `onMouseMove` handler and updates the circle's `cx` and `cy` attributes in state. The visualization uses React `useState` and `useCallback` for state management, with the SVG rendered directly by React. No external data source is involved; the interaction relies purely on mouse event handling within the React and D3-powered environment.

VVaishnavi Muthukrishnan
92% match
Loading thumbnail…

Mouse Follower

A circle follows the mouse cursor across a 960-by-500 SVG canvas, updating its center position in real time. Built with React using the `useState` and `useCallback` hooks, the app listens for `onMouseMove` events on the SVG element and passes the cursor's `clientX`/`clientY` coordinates to the circle's `cx` and `cy` attributes. The visualization uses D3.js version 5 primarily for the SVG rendering within a React framework, with no external data source.

Eekmankaur
92% match