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

Local Setup and Build

This project uses yarn, make sure that is set up prior to installing and building. To test out the library and run the docs locally, clone the repo and then run:

yarn install

Then run the start command to have a process watch for changes and build the docs site:

yarn start

If you want to make a production build of the docs run:

yarn build
//this includes the yarn run prebuild command below

If you want to make a production build of just the components and the bundle.js that can be used as a codepen import run:

yarn prebuild

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