Home

Awesome

d3-legend

Full documentation: http://d3-legend.susielu.com

Looking for compatibility with d3 v3?

d3-legend v4 updates (npm version 2.0.0 and higher)

Usage

Using just the minified file

You must include the d3 library before including the legend file. Then you can simply add the compiled js file to your website:

Using CDN

You can also add the latest version of d3-legend hosted on cdnjs.

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);

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.