{"version":"1.0","type":"rich","title":"offsetX / offsetY","description":"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.","provider_name":"VizHub AI Studio","provider_url":"https://next.vizhub.com","html":"<iframe src=\"https://next.vizhub.com/viz/gist-2e9f487aa456e8676e6d49744366d704?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"1\"></iframe>","width":960,"height":500,"cache_age":3600}