Skip to content
A reusable d3 legend component.
Branch: master
Clone or download
Latest commit 13de453 Mar 31, 2018
Type Name Latest commit message Commit time
Failed to load latest commit information.
docs update docs Mar 31, 2018
test misspelling Nov 14, 2017
Gruntfile.js updating documentation Aug 8, 2016
LICENSE Update LICENSE Mar 22, 2017 fix typo Mar 31, 2017
d3-legend-min-amd.js Add amd file for require.js-dependent applications Mar 7, 2016
d3-legend.js fix threshold labels using custom formatter Mar 31, 2018
index.js fix import statement for npm Dec 8, 2016
indexRollup.js fix threshold labels using custom formatter Mar 31, 2018
package.json 2.25.6 Mar 31, 2018
rollup.config.js adding rollup Aug 10, 2016


Full documentation:

Looking for compatibility with d3 v3?

  • 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

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


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:

  • 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.

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 ="#svg-color-quant");

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

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

var colorLegend = d3.legendColor()


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

You can’t perform that action at this time.