Skip to main content
100%

offsetX / offsetY

✓ Published0🌍 Public
AAjayyy
Last edited Aug 31, 2018
Created on Aug 31, 2018

This example demonstrates how to precisely track the mouse position relative to an HTML element’s content area, accounting for borders, padding, and scroll offsets. A red circle with a smaller black center follows the cursor inside a child div, while the numeric offsets appear in an otherwise empty parent container. The code uses D3's event handling for `mousemove` and `getBoundingClientRect`, combined with `clientLeft`, `clientTop`, and `pageXOffset`/`pageYOffset`, to convert page coordinates into element-local coordinates. The visualization relies solely on D3.js version 2.7.4 and plain DOM styling.

AI-generated description

forked from <a href='http://bl.ocks.org/jasondavies/'>jasondavies</a>'s block: <a href='http://bl.ocks.org/jasondavies/1854606'>offsetX / offsetY</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Mouse Follower

A static SVG circle initially sits at the center of a 960×500 viewport, but its position is updated in real time through React’s `onMouseMove` event handler. The `handleMouseMove` function logs the cursor’s `clientX` and `clientY` coordinates to the console as the mouse moves across the container. Rendered with React 16.9 and D3 v7, the example demonstrates a minimal interactive pattern where the circle’s location could be tied to mouse input, though the code currently only captures and reports the coordinates.

Ttatpiras
66% match
Loading thumbnail…

Capturing Mousemove

Three div elements display their current mouse coordinates as a visual feedback for dragging. Clicking and holding any div initiates a drag state, where the text inside updates to show the mouse position relative to that specific div’s top-left corner; releasing the mouse clears the active state. The example uses `d3.select` to attach `mousedown` handlers to the divs, and dynamically registers `mousemove` and `mouseup` listeners on the `window` object only while a drag is in progress. It uses `d3.event.preventDefault()` to stop text selection, `d3.mouse` to compute relative coordinates, and `.classed` for styling changes.

Mmbostock
65% match
Loading thumbnail…

Mouse Interaction

A yellow circle with a black border sits at the center of an SVG canvas. The example demonstrates mouse interaction by logging the cursor's coordinates to the console on every mouse movement over the SVG element. Built with React and D3.js (v5), the SVG circle is rendered declaratively, and the `onMouseMove` event handler captures the `clientX` and `clientY` properties from the event object. The code uses `ReactDOM` to render the component into the root element, with D3's `arc` function imported but not currently applied.

Iillyyo
65% match
Loading thumbnail…

mouse tracker

A blank SVG canvas logs mouse coordinates to the console as the pointer moves. The React `onMouseMove` handler captures `clientX` and `clientY` from the event, demonstrating a minimal event-driven interaction. The SVG element is rendered by ReactDOM into a full-screen viewport with hidden scrollbars. No visual elements are drawn; the example focuses solely on tracking pointer position through the browser’s event system.

JJack Elsey
64% match
Loading thumbnail…

Mouse Follower

A circular SVG mark follows the mouse cursor across a 960×500 canvas, displaying its current position in real time. The React application tracks `clientX` and `clientY` coordinates from the `onMouseMove` event and updates the circle’s `cx` and `cy` attributes accordingly. It uses React's `useState` and `useCallback` hooks, with D3 v5 loaded for potential use, while rendering through ReactDOM. The circle is styled with a cyan fill and black stroke, centered at the pointer’s location.

GGUTHUBBERM
64% match
Loading thumbnail…

Mouse Follower co -ord console

This example shows a simple SVG circle centered in a 960 by 500 viewport, with a console that logs the mouse’s coordinates whenever the cursor moves over the graphic. The circle itself does not move; instead, the demonstration focuses on capturing pointer position. Built with React 16.9, the app uses an `onMouseMove` event handler on the `<svg>` element to extract `clientX` and `clientY` values and print them to the browser’s dev console. The rendering relies on React’s virtual DOM and SVG elements, with no additional data sources.

Jjeffmesie
64% match
Loading thumbnail…

Mouse Follower

A red circle follows the mouse cursor across an SVG canvas, responding in real time to pointer movement. Built with React, the component tracks cursor coordinates via the `onMouseMove` event and uses `useState` to update the circle's position. The visualization renders using React-DOM and D3 v7, with the circle's `cx` and `cy` attributes bound to the current mouse position. No data source is involved; the example demonstrates reactive, event-driven rendering in a React and D3 integration.

Ssahildesignzz@gmail.com
64% match
Loading thumbnail…

Mouse Follwer 1

A single gray circle follows the mouse cursor across the full screen, responding instantly to every movement. The visualization uses D3 v7's selection and event handling, attaching a `mousemove` listener to the SVG element. On each event, the code updates the circle's `cx` and `cy` attributes with the cursor's coordinates, logging the position to the console. The SVG fills the entire browser window via `window.innerWidth` and `window.innerHeight`, with the body reset to no margin and hidden overflow.

RRichard Hu
63% match