# d3-svg-annotation

> Full documentation: [http://d3-annotation.susielu.com](http://d3-annotation.susielu.com)

Latest version **2.5.1** (published 2019-10-28) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install d3-svg-annotation
pnpm add d3-svg-annotation
yarn add d3-svg-annotation
bun add d3-svg-annotation
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.5.1 |
| Published | 2019-10-28 |
| First published | 2016-10-25 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 5 |
| Unpacked size | 941 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 762 |
| Maintainers | susielu |
| Keywords | d3, d3-module, annotation |

## Links

- npm: https://www.npmjs.com/package/d3-svg-annotation
- Repository: https://github.com/susielu/d3-annotation
- Homepage: http://d3-annotation.susielu.com
- Issues: https://github.com/susielu/d3-annotation/issues
- npm.io page: https://npm.io/package/d3-svg-annotation

## Dependencies (5)

- [d3-drag](https://npm.io/package/d3-drag.md) 1.2.3
- [d3-shape](https://npm.io/package/d3-shape.md) 1.0.4
- [d3-dispatch](https://npm.io/package/d3-dispatch.md) 1.0.2
- [d3-selection](https://npm.io/package/d3-selection.md) 1.4.0
- [d3-transition](https://npm.io/package/d3-transition.md) 1.0.3

## Alternatives

- [d3-force-3d](https://npm.io/package/d3-force-3d.md) — 1.0M weekly downloads
- [ng2-charts](https://npm.io/package/ng2-charts.md) — 486.8K weekly downloads
- [@arcgis/core](https://npm.io/package/@arcgis/core.md) — 257.8K weekly downloads
- [react-sparklines](https://npm.io/package/react-sparklines.md) — 249.3K weekly downloads
- [react-native-gifted-charts](https://npm.io/package/react-native-gifted-charts.md) — 182.3K weekly downloads

## Recent versions

- 2.5.1 (latest) — 2019-10-28
- 2.5.0 — 2019-04-07
- 2.4.0 — 2019-03-24
- 2.3.2 — 2019-03-24
- 2.3.1 — 2018-09-21
- 2.3.0 — 2018-06-28
- 2.2.5 — 2018-04-16
- 2.2.4 — 2018-04-04
- 2.2.3 — 2018-04-03
- 2.2.2 — 2018-03-31
- 2.2.1 — 2018-03-31
- 2.2.0 — 2018-02-15
- 2.1.0 — 2017-10-09
- 2.0.0 — 2017-08-03
- 1.18.1 — 2017-07-18
- … 21 more at https://npm.io/package/d3-svg-annotation/versions

## README

# d3-annotation

Full documentation: [http://d3-annotation.susielu.com](http://d3-annotation.susielu.com)

## Setup 
### Include the file directly

You must include the [d3 library](http://d3js.org/) before including the annotation file. Then you can add the compiled js file to your website

- [Unminified](https://github.com/susielu/d3-annotation/blob/master/d3-annotation.js)
- [Minified](https://github.com/susielu/d3-annotation/blob/master/d3-annotation.min.js)

### Using CDN

You can add the latest version of [d3-annotation hosted on cdnjs](https://cdnjs.com/libraries/d3-annotation).

### Using NPM

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

```bash
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](https://www.twitter.com/DataToViz).

## Prior art

- [Andrew Mollica](https://bl.ocks.org/armollica/67f3cf7bf08a02d95d48dc9f0c91f26c), [d3-ring-note](https://github.com/armollica/d3-ring-note) D3 plugin for placing circle and text annotation, and [HTML Annotation](http://bl.ocks.org/armollica/78894d0b3cbd46d8d8d19d135c6ca34d)

- [Scatterplot with d3-annotate](https://bl.ocks.org/cmpolis/f9805a98b8a455aaccb56e5ee59964f8), by Chris Polis, example using [d3-annotate](https://github.com/cmpolis/d3-annotate)

- [Rickshaw](http://code.shutterstock.com/rickshaw/) has an annotation tool

- [Benn Stancil](https://modeanalytics.com/benn/reports/21ebfb6b6138) has an annotation example for a line chart

- [Adam Pearce](http://blockbuilder.org/1wheel/68073eeba4d19c454a8c25fcd6e9e68a) has arc-arrows and [swoopy drag](http://1wheel.github.io/swoopy-drag/)

- [Micah Stubbs](http://bl.ocks.org/micahstubbs/fa129089b7989975e96b166077f74de4#annotations.json) has a nice VR chart based on swoopy drag 

- [Scott Logic](http://blog.scottlogic.com/2014/08/26/two-line-components-for-d3-charts.html) evokes “line annotation” in a graph (different concept).

- [Seven Features You’ll Want In Your Next Charting Tool](http://vis4.net/blog/posts/seven-features-youll-wantin-your-next-charting-tool/) shows how the NYT does annotations

- [John Burn-Murdoch](https://bl.ocks.org/johnburnmurdoch/bcdb4e85c7523a2b0e64961f0d227154) example with adding/removing and repositioning annotations

---
_Source: https://npm.io/package/d3-svg-annotation · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._