D3 Data Loading...

100%

D3 Data Loading...

✓ Published0🌍 Public

Last edited Jan 19, 2024

Created on Jan 19, 2024

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.

AI-generated description

MIT Licensed

Similar vizzes

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

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

87% match

Loading thumbnail…

Color Changing Mouse Follower

A circle follows the mouse cursor across the canvas, and a click randomly changes its fill color. The visualization demonstrates a unidirectional data flow pattern using D3 v7, where mouse events update a state object which then triggers a re-render of the SVG. It uses D3's `select` and `.join` operations to efficiently create and update the circle element, while the rendering logic resides in a separate `viz.js` module. The circle's position and color are driven entirely by the state managed through a custom `setState` function.

LLauren

83% match

Loading thumbnail…

Mouse Follower

This example demonstrates a single semi-transparent circle that follows the mouse cursor across a light green background, changing color randomly with each click. The visualization uses D3’s `mousemove` event and `d3.pointer` to update the circle’s position, while a `click` event triggers a random hex color assignment. The circle’s coordinates and fill are stored in a state object, and D3’s data join (`selectAll`/`join`) binds this state to the SVG circle element. The rendering approach relies on direct SVG manipulation via D3, with no external data source—purely interactive and state-driven.

SSubhendu Karmakar

83% match

Loading thumbnail…

Mouse Follower that Changes Color

A D3.js v7 circle of radius 50 follows the mouse cursor, changing its fill color to a random RGB value each time the user clicks. The visualization demonstrates unidirectional data flow from mouse events through a state object that stores the current x, y, and color coordinates. Built with D3's `select` and `join` APIs, it renders an SVG inside the `#app` container, updating the circle's `cx`, `cy`, and `fill` attributes on every state change.

CCurran Kelleher

83% match

Loading thumbnail…

Mouse Follower That Changes Color

A circle follows the mouse cursor across a full-screen SVG canvas, changing its fill color to a random RGB value on each click. The visualization demonstrates unidirectional data flow with a state object managed by `setState`, while D3 v7 selections and the `join` pattern handle SVG rendering. Mouse position events trigger state updates through `svg.on('mousemove')`, and color changes use `svg.on('click')` with random `rgb()` generation. The example uses d3.select and d3's data join to bind single elements.

Jjjlaber

82% match

Loading thumbnail…

Make something, move and click mouse

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.

QQingyang Wang Profolio

82% match

Loading thumbnail…

d3

This example demonstrates a single red circle with a green stroke, centered inside a 500-by-500 SVG canvas. The code uses D3 v6 to select the SVG element, append a circle, and set its radius, position, and fill and stroke colors via attribute methods. The visualization anchors the circle using fixed pixel coordinates, while the body text is styled with a 13-em font size for a bold, minimal layout.

Ggyanendra verma

82% match