Skip to main content
SimilarExport ZIP
100%

Axes with Hover

✓ Published4🌍 Public
CCurran Kelleher
Last edited Feb 9, 2024
Created on Feb 9, 2024
Forked from Responsive Axes

This example displays a scatter plot with labeled axes and a hover interaction. Moving the cursor over the inner rectangle draws black crosshair lines from the pointer to the x- and y-axes, dynamically revealing the mouse coordinates. The visualization uses D3's scaleLinear for mapping data, axisBottom and axisLeft for tick marks, and a ResizeObserver for responsive sizing. Hover events are captured via d3.pointer, updating state to drive the lines. The example is a static 100x100 data range with no external dataset.

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.
MIT Licensed

Similar vizzes

Loading thumbnail…

Axes with Hover and labels

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.

MMaarten Snels
90% match
Loading thumbnail…

Corey's Axes with Hover

This example shows a scatter plot with labeled X and Y axes, where hovering over the inner plotting area triggers two red crosshair lines that track the mouse pointer. The visualization uses D3.js v7 with custom modular functions for drawing axes, axis labels, and hover interactions. The code employs `d3.scaleLinear` for scaling, `d3.axisBottom` and `d3.axisLeft` for ticks, and a `ResizeObserver` to make the chart responsive. The hover state is managed via `setState`, with pointer coordinates captured through D3's `pointer` event method.

Ccoreyfnolan@gmail.com
88% match
Loading thumbnail…

Fork of Axes with Hover and labels

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.

Rrichard.adamson@hotmail.com
87% match
Loading thumbnail…

Fork of Axes with Hover and labels

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.

Rrichard.adamson@hotmail.com
87% match
Loading thumbnail…

Fork of Axes with Hover and labels

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.

Rrichard.adamson@hotmail.com
87% match
Loading thumbnail…

Fork of Axes with Hover

This visualization demonstrates hover interaction on a chart with labeled axes. Moving the cursor inside the gray plot area draws black crosshair lines from the pointer to the x and y axes, using the D3 `pointer` event and state management. The plot uses `d3.scaleLinear` for both axes, with `axisBottom` and `axisLeft` rendering ticks. The code relies on D3’s select/join pattern to update the SVG elements dynamically as the mouse position changes.

Oownerofthesoul0000@gmail.com
87% match
Loading thumbnail…

Hovers

A hoverable scatterplot maps bedroom count to living area square footage, with each point rendered as a semi-transparent circle against a light gray plot background. As the pointer moves over the chart, the code updates the state with the current cursor coordinates and draws two black crosshair lines extending from the hover point to the axes. The visualization uses D3 7.8.5 with a ResizeObserver to adapt the SVG to the container dimensions, and it applies linear scales for positioning.

JJingxuan Yang
79% match
Loading thumbnail…

MouseOver

This example demonstrates interactive mouse events on an SVG scatterplot built with D3 v3. Circles change color to orange and grow in radius on mouseover, then revert on mouseout. Clicking the background converts pixel coordinates to data values using inverted linear scales, adds a new point to the dataset, and appends a new circle. The code uses `d3.scale.linear`, `d3.svg.axis`, and `.on("mouseover")` handlers to manage the visual feedback and dynamic data updates.

BBAvlino
77% match