laufhannes/d3-annotation

Use d3-annotation with built-in annotation types, or extend it to make custom annotations. It is made for d3-v4 in SVG.

d3-annotation

Full documentation: http://d3-annotation.susielu.com

Setup

Include the file directly

You must include the d3 library before including the annotation file. Then you can add the compiled js file to your website

• Unminified
• Minified

Using CDN

You can add the latest version of d3-annotation hosted on cdnjs.

Using NPM

You can add d3-annotation as a node module by running

npm i d3-svg-annotation -S

Feedback

I would love to hear from you about any additional features that would be useful, please say hi on twitter @DataToViz.

Prior art

• Andrew Mollica, d3-ring-note D3 plugin for placing circle and text annotation, and HTML Annotation

• Scatterplot with d3-annotate, by Chris Polis, example using d3-annotate

• Rickshaw has an annotation tool

• Benn Stancil has an annotation example for a line chart

• Adam Pearce has arc-arrows and swoopy drag

• Micah Stubbs has a nice VR chart based on swoopy drag

• Scott Logic evokes “line annotation” in a graph (different concept).

• Seven Features You’ll Want In Your Next Charting Tool shows how the NYT does annotations

• John Burn-Murdoch example with adding/removing and repositioning annotations