Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Fork of Axes with Hover and labels

Public visualization

Fork of Axes with Hover and labels

0 stars0🌍 Public
Rrichard.adamson@hotmail.com
Last edited Feb 16, 2024
Created on Feb 16, 2024

This interactive chart displays a simple empty plot with labeled X and Y axes, rendered using D3 version 7. As the user moves the mouse over the inner gray rectangle, dashed crosshair lines extend from the cursor position to both axes, with small solid tick marks and numeric labels showing the current coordinate values. The implementation uses D3's `scaleLinear` for axis mapping, `axisBottom` and `axisLeft` for the axes, and the `pointer` method to track mouse position. A `ResizeObserver` monitors the container size, and hover state updates trigger redraws of the crosshair lines and value labels.

AI-generated description

Adding a hover effect to the inner rectangle to extend lines from the cursor to the axes.

Challenge

  • challange exepted, but i like the axis as they are and there is room enough at right and upper margins

Comments

Sign in to join the discussion.

MIT Licensed