X-Value Mouseover

100%

X-Value Mouseover

✓ Published0🌍 Public

Last edited Feb 4, 2017

Created on Feb 4, 2017

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.

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

93% 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

85% 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

79% 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

79% 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

77% match

Loading thumbnail…

Simple d3.js tooltips

A line chart plots stock closing prices over time, with a tooltip that reveals the exact date and price when hovering over a data point. The visualization uses d3.js to render SVG circles for each data point and a path for the line, reading time-series data from a CSV file. The tooltip is implemented using an HTML div that appears via d3 transitions on mouseover and mouseout events, positioning itself near the cursor using `d3.event.pageX` and `d3.event.pageY`. The chart axes employ `d3.svg.axis` with time and linear scales.

Dd3noob

76% match

Loading thumbnail…

Favorite tooltip (complex version) v5

This example shows a line chart of stock closing prices over time, with an interactive tooltip that follows the mouse cursor. As the user moves over the chart, a dashed crosshair and a highlighted data point appear, along with text displaying the exact date and closing value. Built with D3.js v5, the visualization uses SVG rendering and relies on `d3.line`, `d3.scaleTime`, `d3.bisector`, and `d3.mouse` to compute and display the nearest data point from the provided CSV data.

Dd3noob

76% match

Loading thumbnail…

Favorite tooltip (simple version) v5

This line chart displays a time series of daily closing values from a CSV file, with a tooltip that follows the mouse to reveal the nearest data point. Built with D3 v5 as an SVG visualization, it uses `d3.line`, `d3.scaleTime`, and `d3.scaleLinear` to render axes and the path. A transparent overlay rectangle captures mouse movements, and a `d3.bisector` finds the closest date to position a highlighted circle, which appears on mouseover and hides on mouseout.

Dd3noob

75% match