Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Add Interaction OR Iterate Your Work

Public visualization

Viewing a saved revision (read-only)

7c135d31b31f458e8d95e923b2c7b4d6

Add Interaction OR Iterate Your Work

0 stars0🌍 Public
JJingxuan Yang
Last edited Feb 13, 2024
Created on Feb 13, 2024
Forked from Axes with Hover

This interactive scatterplot shows the relationship between number of bedrooms and living area (sqft) for homes in a dataset. Hovering over the plot draws crosshair lines from the cursor to the chart’s margins, while the current mouse coordinates are tracked in state. The visualization uses D3’s `pointer` event handling and `ResizeObserver` to adapt to container size, with axes rendered via `axisBottom` and `axisLeft` from D3. The code structure emphasizes modular, iterable components for axes, labels, and rendering.

AI-generated description

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

Challenge

  • Show the hovered numbers in place of tick marks on the axes themselves.