X-Value Mouseover

100%

X-Value Mouseover

✓ Published0🌍 Public

Last edited Aug 22, 2018

Created on Aug 20, 2018

A line chart visualizes the closing price of a stock over time, sorted from December 2011 to May 2012. Moving the mouse over the chart displays a small circle and a text label showing the exact price at the nearest data point. The interaction uses `d3.mouse` and the x-scale’s `invert` method to map the cursor’s x-coordinate back to a date, then `d3.bisector` finds the closest data point. The visualization is rendered as an SVG using `d3.svg.line` for the path and `d3.svg.axis` for the axes, with price data loaded from a TSV file.

AI-generated description

A line chart with mouseover so that you can read the y-value based on the closest x-value. The x-value is found using d3.mouse and scale.invert. The y-value is then found by bisecting the data.

forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/3902569'>X-Value Mouseover</a>

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

X-Value Mouseover

A line chart of daily closing prices displays a tooltip on mouseover, revealing the exact price at the nearest data point. The visualization uses D3.js v3 with SVG rendering, reading data from an external TSV file. As the mouse moves over an overlay rectangle, d3.mouse and a time scale’s invert method convert screen coordinates to dates, while a d3.bisector identifies the closest entry. The focus circle and text update accordingly, showing the formatted currency value.

Mmbostock

89% match

Loading thumbnail…

X-Value Mouseover

A line chart plots daily closing prices over time. Users hover over the chart to display a tooltip showing the exact monetary value for the nearest data point. The visualization uses D3.js version 3, with a time-scaled x-axis and a linear y-axis. The code employs `d3.mouse` and `scale.invert` to translate the mouse position into an x-value, and `d3.bisector` to locate the closest date in the provided TSV data.

AAndresAnayaIsaza

89% match

Loading thumbnail…

X-Value Mouseover with Droplines

This example shows a line chart of stock closing prices over time, with an interactive mouseover that identifies the data point nearest the cursor’s x-position. Two dashed droplines extend from the selected point to the x- and y-axes, and the y-value is displayed as a currency label. The chart uses D3.js (version 3.5.5) with `d3.time.scale`, `d3.svg.axis`, and `d3.svg.line` for rendering. Mouse position is converted via `scale.invert`, and the closest data point is found using `d3.bisector`. The data is loaded from a tab-separated TSV file containing dates and closing prices.

TThanaporn-sk

88% match

Loading thumbnail…

D3 v4 X-Value Mouseover with Droplines

This example shows a line chart of daily closing prices, displaying a crosshair and a tooltip with the precise dollar value as the mouse moves over the plot. The visualization is built with D3 v4, using the `d3.line` generator to create the path and `d3.axisBottom` and `d3.axisLeft` for the axes. A transparent `rect` overlay captures mouse events, and a `d3.bisector` function finds the nearest data point to the cursor’s x-coordinate, triggering the droplines and value label. The data is loaded from a TSV file with a date and close price per row.

MMbrownshoes

83% match

Loading thumbnail…

MouseOverPrice

A line chart shows Apple's daily closing stock price over roughly a year, with an orange circle and a dollar-value label that follow the mouse cursor. The visualization uses D3 v3 with an SVG renderer, parsing tab-separated date and price data from a TSV file. A bisector finds the nearest data point to the mouse position, and a transparent overlay rectangle captures mouse events to update the focused position and text label.

BBAvlino

81% match

Loading thumbnail…

Favorite tooltip (complex version)

This interactive line chart displays a time series of stock closing prices, with a crosshair and tooltip that track the mouse to reveal the exact date and value at the nearest data point. The visualization, built with D3.js (version 3.5.17), renders the data from a CSV file as an SVG line chart. It uses D3’s time scale, linear scale, and axes, while the tooltip logic relies on a bisector to find the closest point and updates the position and text of SVG elements on mousemove events.

Dd3noob

80% match

Loading thumbnail…

Favorite tooltip (simple version)

This example shows a time-series line chart of stock closing prices, with a tooltip that highlights the nearest data point as the mouse moves across the chart. The chart uses D3.js version 3.5 to parse dates, scale the axes, and draw the line and axes as SVG elements. A hidden circle is repositioned using the `bisectDate` function and the `d3.mouse` coordinates, appearing only during mouseover. The data comes from a CSV file with date and close price columns, rendered with a steel-blue line and grey axes.

Dd3noob

78% match

Loading thumbnail…

X-Value Mouseover with Pan & Zoom

This interactive line chart displays the price of a commodity over time, allowing users to pan and zoom through the data. The visualization updates the x-axis and y-axis scales dynamically, while a mouseover reveals the exact price value at any point. Built with D3 v4, the example uses `d3.zoom()` and `d3.zoomTransform()` to handle the zoom and pan transformations, and `d3.bisector` for data lookup. The data is loaded from a CSV file with date-time and price columns.

TThanaporn-sk

78% match