D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
li01012
Full window
Github gist
legend
reusable legend
<!DOCTYPE html> <meta charset="utf-8"> <title>legend</title> <style> body { font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; } </style> <body> <script src="https://d3js.org/d3.v4.min.js"></script> <script src="d3.legend.js"></script> <script> var margin = {top: 50, right: 50, bottom: 50, left: 50}, width = 960 - margin.left - margin.right, height = 500 - margin.bottom - margin.top; var colors = d3.scaleOrdinal() .domain( ["A", "B", "C", "D"] ) .range(["#fe9929", "#ec7014", "#cc4c02", "#8c2d04"]); var legend = d3.legend() .translate([ width / 4 , height / 4 ]) .colors(colors) .cb(function() { console.log("Done!"); }); d3.select("body").append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")") .call(legend); </script>
https://d3js.org/d3.v4.min.js