https://github.com/susielu/d3-legend

A reusable d3 legend component.
https://github.com/susielu/d3-legend

d3 d3-legend d3-module legend

Last synced: 6 days ago
JSON representation

A reusable d3 legend component.

• Host: GitHub
• URL: https://github.com/susielu/d3-legend
• Owner: susielu
• License: apache-2.0
• Created: 2015-06-10T20:19:36.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2024-07-22T21:03:02.000Z (5 months ago)
• Last Synced: 2024-11-29T10:30:46.227Z (13 days ago)
• Topics: d3, d3-legend, d3-module, legend
• Language: JavaScript
• Homepage: http://d3-legend.susielu.com/
• Size: 2.34 MB
• Stars: 726
• Watchers: 19
• Forks: 104
• Open Issues: 14
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-d3 - d3-legend - Legend helper (Utils)
• awesome-d3 - d3-legend - Legend helper (Utils)
• awesome-d3 - d3-legend - Legend helper (Utils)

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 [email protected] -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);

```

## Local development

This project uses npm and grunt, you will also need to run `npm install -g grunt-cli` for the scripts and watch commands to work.

## Feedback

This library is in maintence mode, and I do not plan on adding any additional features.