# d3-svg-legend

> A legend component for d3. Given a d3.scale it can create either a color legend, size legend, or symbol legend.

Latest version **2.25.6** (published 2018-03-31) · Apache-2.0 license · 0 weekly downloads

## Install

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

## 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.25.6 |
| Published | 2018-03-31 |
| First published | 2015-07-12 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 7 |
| Unpacked size | 782.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 723 |
| Author | Susie Lu |
| Maintainers | susielu |
| Keywords | d3, d3-module, legend |

## Links

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

## Dependencies (7)

- [d3-array](https://npm.io/package/d3-array.md) 1.0.1
- [d3-scale](https://npm.io/package/d3-scale.md) 1.0.3
- [d3-format](https://npm.io/package/d3-format.md) 1.0.2
- [d3-dispatch](https://npm.io/package/d3-dispatch.md) 1.0.1
- [d3-selection](https://npm.io/package/d3-selection.md) 1.0.2
- [d3-transition](https://npm.io/package/d3-transition.md) 1.0.3
- [@types/d3-selection](https://npm.io/package/@types/d3-selection.md) 1.0.10

## 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.25.6 (latest) — 2018-03-31
- 2.25.5 — 2018-02-07
- 2.25.4 — 2018-01-05
- 2.25.3 — 2017-12-10
- 2.25.2 — 2017-12-10
- 2.25.1 — 2017-12-05
- 2.25.0 — 2017-11-17
- 2.24.1 — 2017-05-15
- 2.24.0 — 2017-03-31
- 2.23.0 — 2017-03-31
- 2.22.0 — 2017-03-10
- 2.21.0 — 2017-01-23
- 2.19.0 — 2016-12-08
- 1.13.0 — 2016-11-21
- 2.18.0 — 2016-11-20
- … 27 more at https://npm.io/package/d3-svg-legend/versions

## README

# d3-legend

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

## Looking for compatibility with d3 v3?
- You can see the code for the d3 legend that works with d3 v3 in the [v3 branch](https://github.com/susielu/d3-legend/tree/v3)
- [Documentation](http://d3-legend-v3.susielu.com) for the v3 version of the legend

## d3-legend v4 updates (npm version 2.0.0 and higher)
- Flattened naming for accessing functions
    - d3.legend.color => d3.legendColor
    - d3.legend.size => d3.legendSize
    - d3.legend.symbol => d3.legendSymbol
- NPM package no longer binds to global d3, is now just an object with the three legend functions

## Usage

### Using just the minified file

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

- d3-legend.min.js
- d3-legend.js (Human readable version)

### Using CDN

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

### Using npm

You can add the d3 legend as a node module by running:

`npm i d3-svg-legend -S`

To use the version compatible with d3v3 run:
`npm i d3-svg-legend@1.x -S`

Using the import syntax `import legend from 'd3-svg-legend'` gives access to the three legend types as an object. You can also import them independently for example `import { legendColor } from 'd3-svg-legend'`

```
var svg = d3.select("#svg-color-quant");

var quantize = d3.scaleQuantize()
    .domain([ 0, 0.15 ])
    .range(d3.range(9).map(function(i) { return "q" + i + "-9"; }));

svg.append("g")
  .attr("class", "legendQuant")
  .attr("transform", "translate(20,20)");

var colorLegend = d3.legendColor()
    .labelFormat(d3.format(".2f"))
    .useClass(true)
    .scale(quantize);

svg.select(".legendQuant")
  .call(colorLegend);

```

## 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).

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