D3 Examples - legend

xxxxxxxxxx
 
<!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>
​
    