SVG pointer accuracy and binned calendar heatmap

[gillkyle]

Problem

Responsive width charts inside a fixed-height card, flex/grid shrinking, or weird padding can make the SVG and CSS viewports mismatch.

Pointer hit-testing mapped browser coordinates from the SVG element's full bounding box directly into chart coordinates. When the CSS viewport and SVG viewBox have different aspect ratios, the default preserveAspectRatio="xMidYMid meet" centers the rendered scene with letterboxed space around it. Treating that empty space as chart space shifts hover and focus selection—by nearly one calendar row in this example.

Fix

Use the SVG screen matrix instead of assuming the bounding box matches the painted scene:

scenePoint = getScreenCTM().inverse() × clientPoint

getScreenCTM() describes the complete scene-to-viewport transform, including scale, centering, CSS/SVG transforms, and letterboxing. Applying its inverse returns the pointer to the correct scene coordinate. The existing bounds calculation remains as a fallback for incomplete DOM environments.

This is the established approach used by D3 pointer, D3's implementation, and Airbnb visx localPointGeneric. See also MDN on preserveAspectRatio and getScreenCTM().

Example

Adds Token use calendar heatmap, a responsive interaction case that also demonstrates binTimeX daily token/session aggregation, explicit UTC bins, transform lineage, calendar layout, keyboard focus, and a mark-anchored portal tooltip.

You can see in this little recording how my cursor tracks the row below it because there's like ~13px of space above and below the container due to the SVG viewBox stuff.

CleanShot.2026-07-31.at.21.21.54.mp4

Verification

typecheck, 654 tests, package/catalog/docs checks, bundle check, and browser verification at 320/640/960px widths all pass.

[coderabbitai]

Important

Review skipped

Draft detected.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: d3db3285-960e-4567-a0b8-7ab07a2ff092

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}