Favorite tooltip (complex version) v6
This visualization displays a time series line chart of stock closing prices from late March to early May 2012, using SVG rendering with D3.js v6. It shows a sophisticated tooltip that tracks the mouse position along the x-axis, drawing dashed horizontal and vertical guide lines, a circle marker at the nearest data point, and displaying both the date and closing value. The tooltip uses the `d3.bisector` API to find the closest data point, `d3.pointer` for mouse coordinates, and the inverse x-scale to map the pixel position back to a date. The value and date labels are layered with white outlines to improve readability.
AI-generated descriptionThis is a follow on from the simple tooltip graph written with d3.js v6.
It extends a tooltip technique which I find particularly neat.
This graph is part of the code samples for the update to the book D3 Tips and Tricks to version 6 of d3.js.