first_assignment

100%

first_assignment

✓ Published0🌍 Public

Last edited Jan 17, 2023

Created on Jan 17, 2023

This example shows a black outlined circle that tracks the mouse across the screen, growing larger when the user moves the cursor faster. It uses `d3.select` and `selection.on('mousemove')` to capture pointer coordinates and movement deltas, then calculates a radius based on the movement speed, capping it at 100 pixels. The visualization renders in an SVG that dynamically resizes to the window dimensions via `window.innerWidth` and `window.innerHeight`. The state updates through a custom `setState` function that triggers a re-render through the `viz` function.

AI-generated description

A mouse finder which the circle will enlarge when the user moves the mouse faster.

MIT Licensed

Similar vizzes

Loading thumbnail…

Mouse Follower

A single black circle follows the cursor across a full-screen SVG canvas, updating its position in real time. The visualization demonstrates a minimal state-driven D3 render loop, where a `mousemove` event listener calls a `setState` function to update the pointer coordinates. The `viz` function uses a data join to create and update the circle element, with `d3.select` handling the SVG selection and attribute updates for the x and y positions. The example relies on D3 v7 and a custom render pattern that re-renders the entire visualization on each state change.

MMinwoo Pak

78% match

Loading thumbnail…

Moving Mouse

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.

SSubhendu Karmakar

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

76% match

Loading thumbnail…

mouse follower

A single black circle on an SVG canvas tracks the user's mouse cursor in real time, creating a simple interactive visual. The example demonstrates state management in React, using the `useState` and `useCallback` hooks to update the circle's `cx` and `cy` attributes on every `mousemove` event. Rendered with SVG elements, the circle is positioned via React's `onMouseMove` handler, while D3 v5 and React 16 are loaded externally. No data source is involved; the visualization purely reacts to pointer movement within the 960 by 500 pixel viewport.

Nnexus1058

76% match

Loading thumbnail…

Make something

This example demonstrates a simple interactive visualization where a circle follows the mouse cursor across the screen, using a unidirectional data flow pattern. The code uses d3-selection’s `select` and `selectAll` with data joins to create and update an SVG element. Mouse movement events trigger a `setState` function that updates an immutable state object with the cursor’s `x` and `y` coordinates, which then re-renders the circle’s `cx` and `cy` attributes. The rendered circle has a fixed radius of 50 pixels, and the SVG fills the entire viewport.

QQingyang Wang Profolio

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

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

76% match

Loading thumbnail…

Circle Trail

A white circle follows the mouse cursor across a purple background, leaving a trail of its previous positions. The visualization uses d3-selection’s `select` and `selectAll` with a `.join()` pattern to append or update a single circle element on each `mousemove` event. The circle’s coordinates are stored in a state object and updated via a `setState` callback, while `window.innerWidth` and `window.innerHeight` set the SVG size. This demonstrates a simple, event-driven rendering loop with D3 v7.

Jjjlaber

76% match