Skip to main content
100%

Favorite tooltip (complex version) v6

✓ Published0🌍 Public
Dd3noob
Last edited Sep 18, 2020
Created on Sep 18, 2020

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 description

This 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.

mit Licensed

Similar vizzes