Skip to main content
SimilarExport ZIP
100%

Hovers

✓ Published0🌍 Public
JJingxuan Yang
Last edited Feb 13, 2024
Created on Feb 13, 2024
Forked from Responsive Axes

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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Axes with Hover

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.

CCurran Kelleher
79% match
Loading thumbnail…

Add Interaction OR Iterate Your Work

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.

JJingxuan Yang
78% match
Loading thumbnail…

Bar Chart with Basic Hover

The chart displays the top 10 houses by living area in square feet, sorted descending using D3's `descending` comparator. When a user hovers over a bar, it turns black while others gray, implemented via D3's `on('mouseenter')` and `on('mouseleave')` events that update the state. Using `observeResize` for responsive dimensions and `scaleBand`/`scaleLinear` from D3, the data comes from the `@RenoBlitz/dataset01` source with `sqft_living` as the plotted column.

JJingxuan Yang
75% match
Loading thumbnail…

Add Interaction OR Iterate Your Work

This example shows a scatter plot of King County house prices from the kc_house_data CSV, plotting living area in square feet against the number of bedrooms. Hovering over the plot draws crosshair lines that track the mouse position, with the chart updating via a state-based pattern in D3 v7. The visualization uses `scaleLinear` axes from the `@RenoBlitz/responsive-axes` library, along with `selectAll` and `data` joins for rendering circles and lines. The entry point imports `select` from D3 and custom modules, while `observeResize` handles responsive dimensions. The dataset is imported from `@RenoBlitz/dataset01`.

JJingxuan Yang
73% 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
73% match
Loading thumbnail…

Add Interaction OR Iterate Your Work

This scatter plot visualizes the relationship between the number of bedrooms and living area square footage in the kc_house_data dataset. The visualization uses d3.scaleLinear for both axes and d3.extent to compute the y-domain from the data. Interactive elements track the mouse position using d3.pointer, drawing hover lines across the plot to highlight coordinates. The code imports shared visualization utilities from @curran for axis rendering and resize observation, while circles are rendered with fixed radius and opacity.

JJingxuan Yang
72% 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
72% 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
72% match