X-Value Mouseover with Pan & Zoom

100%

X-Value Mouseover with Pan & Zoom

✓ Published0🌍 Public

Last edited Mar 10, 2017

Created on Mar 10, 2017

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.

AI-generated description

Built with blockbuilder.org

d3 V4 extension to X-Value mouseover found <a href="https://bl.ocks.org/mbostock/3902569">here</a>.

Achieved by accessing zoom transform properties x, y and k in mousemove() and zoomed() function.

Happy to offer assistance in reproductions, tweet me at @LynchThomas

forked from <a href='http://bl.ocks.org/twlynch/'>twlynch</a>'s block: <a href='http://bl.ocks.org/twlynch/d51ed36f59356b70aa8eb410f761af1f'>X-Value Mouseover with Pan & Zoom</a>

forked from <a href='http://bl.ocks.org/lorenzopub/'>lorenzopub</a>'s block: <a href='http://bl.ocks.org/lorenzopub/013c0c41f9ffab4d27f860127f79c5f5'>X-Value Mouseover with Pan & Zoom</a>

none Licensed

Similar vizzes

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

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

78% match

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

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

76% match

Loading thumbnail…

Zoom to Domain

This example shows a time-series area chart of S&P 500 monthly closing prices from 2000 to 2010, rendered as a smooth monotone curve in SVG. Upon loading, the chart automatically animates a programmatic zoom into the year 2003 using d3.zoom and d3.zoomIdentity, scaling the x-axis to highlight that specific domain. After the intro transition, users can pan and zoom manually, with the area path and x-axis updating in real time via the zoom event’s rescaleX method. The data comes from a CSV file, and the visualization uses D3 v4’s d3.area, d3.axisBottom, and d3.timeParse APIs.

TThanaporn-sk

74% match

Loading thumbnail…

Understanding the zoom on d3.js

This example demonstrates interactive zooming and panning on a time-series area chart of S&P 500 monthly closing prices. The visualization uses d3.zoom with scale and translate extents to constrain navigation, updating the area path and x-axis via the transform’s `rescaleX` method during the `zoom` event. Animated intro zoom transitions from January 2003 to January 2004. Data comes from a local CSV file, rendered as an SVG area with `d3.area` and `curveMonotoneX`.

11andrey3

73% match

Loading thumbnail…

Zoom + Pan

A D3.js line chart with grid-like axes supports interactive panning and zooming, controlled by dragging and mouse-wheel gestures. The view resets via a button, triggering a smooth animated transition back to the default domain using `d3.behavior.zoom`, `d3.scale.linear`, and `d3.transition().tween`. The SVG rendering showcases the axis updates, while the button click remaps the scales programmatically and rebinds them to the zoom behavior.

FFrissAnalytics

72% match

Loading thumbnail…

Line Plot with menu

This interactive line plot shows how commodity prices change over time, with a dropdown menu letting users switch between different price columns from the dataset. The visualization uses D3 v5 with a modular component approach, where a reusable `dropdownMenu` function handles the selection interface and a `scatterPlot` component manages the SVG rendering. The code applies `d3.scaleTime` for the x-axis, `d3.scaleLinear` for the y-axis, and a `d3.line` generator with `curveBasis` to create smooth paths. Transitions animate the line update when the user selects a new column, while axis ticks include gridlines for readability.

WW9183907

72% match