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

• You can see the code for the d3 legend that works with d3 v3 in the v3 branch
• Documentation for the v3 version of the legend

• 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

You must include the d3 library 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)

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

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 = legendColor()
    .labelFormat(d3.format(".2f"))
    .useClass(true)
    .scale(quantize);

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

I would love to hear from you about any additional features that would be useful, please say hi on twitter @DataToViz.