A reusable d3 legend component.
APACHE-2.0 License
Full documentation: http://d3-legend.susielu.com
You must include the d3 library before including the legend file. Then you can simply add the compiled js file to your website:
You can also add the 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 = d3.legendColor()
.labelFormat(d3.format(".2f"))
.useClass(true)
.scale(quantize);
svg.select(".legendQuant")
.call(colorLegend);
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.
This library is in maintence mode, and I do not plan on adding any additional features.