Make something, move and click mouse

100%

Make something, move and click mouse

✓ Published0🌍 Public

Last edited Jan 14, 2023

Created on Jan 14, 2023

A small circle follows the mouse as it moves across an SVG canvas. Clicking the mouse drops a larger, randomly colored circle at the click position, with colors selected from a fixed palette of blue, red, yellow, green, and pink. The example uses D3.js v7 selection and event handling methods, including `svg.on('mousemove')` and `svg.on('click')`, to update circle attributes such as `cx`, `cy`, `r`, and `fill`. The SVG is sized to the full browser window.

AI-generated description

A circle that follows the mouse. When click the mouse, a random color, bigger circle will appear on the current position

MIT Licensed

Similar vizzes

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

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

84% match

Loading thumbnail…

D3 Data Loading...

This example creates a single red circle within an SVG canvas that dynamically tracks the mouse position, using mousemove events to update its center coordinates. Clicking anywhere on the canvas triggers a random RGB color change, altering the circle’s fill. The visualization utilizes d3.select and the join method to efficiently create and update the SVG and circle elements, while managing a state object that stores the current x, y coordinates and color. The viewport dimensions are set to match the browser window size.

SSubhendu Karmakar

82% match

Loading thumbnail…

Moving circle

A moving circle follows the mouse cursor across an SVG canvas, changing to a random RGB color with each click. The visualization uses D3's data join pattern, binding arrays of null values to create and update a single circle and svg element on every state change. Mouse and click event listeners call a setState function that updates the circle's x and y coordinates to the cursor position or assigns a new randomly generated color.

SSubhendu Karmakar

81% match

Loading thumbnail…

Fork of Mouse Follower edited

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.

KKhatera Alizada

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

81% match

Loading thumbnail…

Mouse click

Three circles, bound to the array `[50,40,60]`, render in steel blue on an SVG canvas. Hovering turns a circle red, and clicking turns it black, while a zoom behavior attached via `d3.behavior.zoom` allows panning and scaling the entire group with the mouse wheel or drag. The example demonstrates basic event handling and zoomable SVG rendering using D3 v3, with the data hardcoded in the script.

IIgathi

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

80% match