Fork of Mouse Follower edited

100%

Fork of Mouse Follower edited

✓ Published1🌍 Public

Last edited Jan 15, 2023

Created on Jan 11, 2023

A circle, rectangle, and text label all follow the mouse cursor across the screen, while a separate set of draggable circles is rendered using D3's data join and drag behavior. Clicking anywhere on the SVG appends a new circle with a random radius from the `d3.range` array, colored via `d3.schemePastel1`. The code uses D3 v7 selections and event handlers (`svg.on("mousemove")`) to update SVG attributes (`cx`, `cy`, `x`, `y`) in real time, with `d3.drag()` enabling interactive circle repositioning.

AI-generated description

A circle that follows the mouse.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Mouse Follower Simple

A circle follows the mouse across a full-screen SVG, shifting to a random color from a predefined palette on every movement. The example uses D3 v7's selection methods, including `svg.on('mousemove')` for event handling and `circle.attr` to update position. An initial `getColor()` function picks randomly from an array of seven colors, while CSS hides page margins and overflow. The visualization demonstrates basic interactive SVG rendering with D3's data-binding approach.

MMartha Cash

89% match

Loading thumbnail…

Fork of Fork of Fork of Mouse Follower Simple

A single gray circle follows the mouse cursor across a full-screen SVG canvas, creating a direct and immediate visual link between pointer movement and graphical output. The example uses d3-selection to append an SVG circle and attach a `mousemove` event listener to the SVG element, updating the circle’s `cx` and `cy` attributes with the event’s x and y coordinates. Rendered in a browser via a minimal HTML page, it demonstrates fundamental D3 v7 selection, event handling, and attribute manipulation.

Ssrividyap03

88% match

Loading thumbnail…

Fork of Fork of Mouse Follower Simple

A single gray circle follows the mouse cursor across an SVG canvas that fills the browser window. The demonstration shows how D3 v7 event handling can drive direct attribute updates on SVG elements. The code appends an SVG and circle using d3.select and selection.append, then listens for mousemove events on the SVG, updating the circle’s cx and cy coordinates from the event’s x and y properties. No external data source is used; the visualization relies purely on user interaction with the rendered vector graphic.

Ssrividyap03

88% match

Loading thumbnail…

Fork of Mouse Follower Simple

A single circle follows the mouse pointer across a full-screen SVG. The example demonstrates basic D3 event handling and shape manipulation, using a selection created with `d3.select` and attribute updates on the `mousemove` event. The circle’s `cx` and `cy` coordinates are directly set to the event’s `x` and `y` values, with no animation or interpolation. The SVG canvas is sized to the browser window via `window.innerWidth` and `window.innerHeight`, and the CSS hides page margins and scrollbars.

Ssrividyap03

87% match

Loading thumbnail…

Fork of Fork of Mouse Follower edited2

A blue rectangle and a text label reading "Follow Mouse" both track the cursor across an SVG canvas that fills the viewport. The page listens to mouse movement events and updates the x and y coordinates of both elements in real time. Built with D3 v7, the example uses selection methods like `append`, `attr`, and `on` to create and move the shapes. The SVG is sized to the browser window, and CSS hides page margins to maximize the tracking area.

KKhatera Alizada

87% match

Loading thumbnail…

Fork of Mouse Follower Simple - Alvegorova

A white circle follows the mouse cursor across a solid blue-gray background. The example uses D3 v7 to select the `#app` container, append an SVG canvas sized to the browser window, and create a single circle element. A `mousemove` event listener updates the circle’s `cx` and `cy` attributes with the event coordinates, providing direct, real-time feedback. The visualization is rendered entirely through SVG, with styling applied via an external CSS file.

AAlena Egorova

87% match

Loading thumbnail…

Fork of Mouse Follower

A circle follows the mouse pointer, changing to a random color and opacity with each movement. The visualization uses unidirectional data flow, where a state object is updated on mouse events and passed to a rendering function. Built with D3.js v7, it uses `select` to manage an SVG and circle element, while custom `randColor` and `randOpacity` functions generate random values.

SSpencer McAvey

86% match

Loading thumbnail…

Fork of Mouse Follower

A circle follows the mouse cursor across an SVG canvas, with its position updating in real time as the pointer moves. The visualization uses React state and a `handleMouseMove` callback to track the cursor’s clientX and clientY coordinates, rendering the circle via SVG circle elements. Both React and D3 v5 are loaded from CDNs, with ReactDOM managing the component lifecycle. The circle starts at the canvas center and responds immediately to every mouse movement, demonstrating a simple interactive pattern built with the React hooks `useState` and `useCallback`.

Kkan qiu

86% match