Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Axes with Hover and labels

Public visualization

Viewing a saved revision (read-only)

8b9e539844734cd889ea24f05f5afb97

Axes with Hover and labels

3 stars4🌍 Public
MMaarten Snels
Last edited Feb 19, 2024
Created on Feb 10, 2024
Forked from Axes with Hover

This example demonstrates interactive axes with crosshair guides that track the mouse cursor. As the pointer moves over the plot area, dashed lines extend from the cursor to the axes, accompanied by numeric value labels that display the current x and y coordinates. The visualization uses D3's `scaleLinear` for coordinate mapping and `axisBottom`/`axisLeft` for rendering ticks. Crosshair lines and value labels are dynamically joined to the SVG via the D3 `join` operation, updating on every mouse movement event.

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