xxxxxxxxxx<html><head> <title>d3 circle legend</title> <style type="text/css"> body { font: 10px sans-serif; } .legend { font-size: 12px; font-family: sans-serif; } .legend path, .legend line { fill: none; stroke: #000; shape-rendering: crispEdges; opacity: 1; } .circle-legend line { stroke: #000; shape-rendering: crispEdges; } .circle-legend circle { stroke: #ccc; stroke-dasharray: 4, 2; fill: none; } </style></head><body> <script src="//d3js.org/d3.v3.min.js"></script> <script src="circle-legend.js"></script> <script type="text/javascript"> var margin = {top: 20, right: 100, bottom: 20, left: 100}; var width = 940 - margin.left - margin.right, height = 600 - margin.top - margin.bottom; var svg = d3.select('body').append('svg') .attr('width', width + margin.left + margin.right) .attr('height', height + margin.top + margin.bottom); svg = svg.append('g') .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')'); var scale = d3.scale.sqrt() .domain([0, 1000000]) .range([0, 100]); // 1 scale.domain([0,1000000]); var formatSI = d3.format('s'); var formatCurrencySI = function(d) { return formatSI(d) + ' people'} var circleKey = circleLegend() .scale(scale) .tickValues([500000, 1000000, 1500000, 2000000]) .tickFormat(formatCurrencySI) .tickPadding(10) .orient("left"); //default svg.append('g') .attr('transform', 'translate(150, 300)') .call(circleKey);// 2// this behaves not as above scale.domain([500000, 1000000, 1500000, 2000000]); scale.range([25, 50, 75, 100]); var circleKey2 = circleLegend() .scale(scale) .tickValues([500000, 1000000, 1500000, 2000000]) .tickFormat(formatCurrencySI) .tickPadding(10) .orient("left"); //default svg.append('g') .attr('transform', 'translate(500, 300)') .call(circleKey2); </script></body></html> https://d3js.org/d3.v3.min.js