Mouse Follower (Make Something)

100%

Mouse Follower (Make Something)

✓ Published0🌍 Public

Last edited Jan 16, 2023

Created on Jan 16, 2023

A rectangle moves in opposition to the mouse's cursor, its position derived from the inverted coordinates of the pointer within the viewport. Clicking resets the rectangle to the mouse's location by swapping the axes. Built with D3 v7 and the `select` API, the visualization uses `svg.on('mousemove')` and `svg.on('click')` handlers to update state, which then drives the rectangle's `x` and `y` attributes, styled with an orange fill and purple stroke.

AI-generated description

A rectangle that does the opposite of the mouse's movements using unidirectional data flow. When you click, it brings the rectangle back to the mouse.

What I used for help/inspiration:

To change to rectangle: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/rect

To change color of rectangle: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/style

MIT Licensed

Similar vizzes

Loading thumbnail…

Mouse Follower

A violet square with a dashed magenta border follows the mouse cursor across a full-screen SVG canvas. The visualization responds to every mouse movement event, continuously updating the square’s x and y coordinates to center it on the pointer. Built with D3 v7, it uses the `d3.select` and `svg.append` APIs to create and manipulate the rectangle, while the `svg.on('mousemove', ...)` handler updates the rect’s position attributes. The square measures 50 by 50 pixels and is positioned relative to the viewport dimensions set from `window.innerWidth` and `window.innerHeight`.

IIshaChid76

86% match

Loading thumbnail…

Mouse Follower

A red square tracks the mouse across a full-screen SVG canvas. The visualization demonstrates unidirectional data flow using D3 v7's `select` and `join` pattern. A `mousemove` event on the SVG invokes a `setState` callback, which updates the state object with cursor coordinates and triggers a re-render, repositioning the 25×25-pixel rectangle. The `viz` function binds the state to the square's `x` and `y` attributes.

Kkratikashetty1102@gmail.com

84% 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

84% 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

83% match

Loading thumbnail…

Fork of Mouse Follower Simple Make Something Francesca Sajedi

A green circle and red rectangle respond to the mouse. As the cursor moves, the circle repositions to the cursor's coordinates while the rectangle's width and height scale to match those same x and y values. The visualization uses the D3.js select and append methods to create SVG elements, binding a mousemove event to update the shape attributes dynamically. The SVG canvas fills the entire browser window.

Ffsajedi22

83% match

Loading thumbnail…

Mouse Follower

A small, randomly colored circle follows the mouse cursor across a full-screen SVG canvas, changing to a new random color with every mouse movement. Built with D3, the code uses `select` to append an SVG element sized to the window, a `circle` element for the follower, and the SVG `on('mousemove')` event to update the circle's `cx`, `cy`, and `fill` attributes. No data source is used; the visualization is purely interactive, with the color generated via a custom `getRandomColor` function.

Ssrividyap03

83% match

Loading thumbnail…

Mouse Follower

A yellow circle follows the mouse cursor across an SVG canvas, updating its position in real time as the pointer moves. Built with React and D3 v7, the visualization uses a stateful `mousePosition` variable updated via an `onMouseMove` event handler on an SVG element, rendering the circle with D3's SVG primitives.

JJosh Zalcman

83% match

Loading thumbnail…

Mouse Follower

A circle follows the mouse cursor across a full-window SVG canvas. Clicking anywhere randomly changes the circle's fill color. The visualization uses D3 v7 selection and join operations to declaratively manage the SVG and circle elements, with state tracking cursor position and color. Documentation is provided via an embedded YouTube video.

MMark D. Clements

83% match