trendingtechnology / react-annotation

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

react-annotation

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

Setup

Using NPM

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

npm i react-annotation -S

If you're new to using React, I suggest using create-react-app to start your project

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