Skip to main content
100%

d3-annotation: Responsive Types and Hover

✓ Published0🌍 Public
Aalokkshukla
Last edited Aug 3, 2017
Created on Aug 3, 2017

This interactive line chart uses d3.annotation to add responsive callout labels to a time-series visualization of stock close prices. The annotations—three labeled badges marking specific dates—can dynamically change annotation type and support hover events. On mouseover, each annotation displays additional context (the close price and date) via appended text, which is removed on mouseout. A separate resize annotation lets users drag to change the chart’s width, demonstrating how annotations can be reconfigured responsively. The SVG chart is built with D3 v4, using a line path, axes, and d3-annotation’s callout elbow type.

AI-generated description

Responsive Types and Hover Example

Made with d3.annotation. An example showing how you can dynamically change the annotation type and add hover events.

forked from <a href='http://bl.ocks.org/susielu/'>susielu</a>'s block: <a href='http://bl.ocks.org/susielu/974e41473737320f8db5ae711ded8542'>d3-annotation: Responsive Types and Hover </a>

mit Licensed

Similar vizzes