d3 | reusable circle legend
This example shows a reusable circle legend for bubble charts, displaying three concentric circles sized by a square-root scale to represent data values like 8%, 34%, and 89%. Each circle is paired with a dashed tick line and a text label, making the mapping from numeric value to area immediately readable. The code defines a `circleLegend` function that builds SVG elements via `d3.scaleSqrt`, `selection.append`, and chained data joins. Users configure the legend through methods like `.domain()`, `.range()`, and `.values()`, then call `.render()` to draw it, with all defaults adjustable for colors, padding, and suffixes.
AI-generated descriptionneeded a simple circle legend for a bubble chart that I could pass in values and a domain
to initiate pass in a d3 selection to the circleLegend function and your dataset domain and values:
var l = circleLegend(d3.select('svg g#legend'))
.domain([0, 100])) // the dataset min and max
.range( [0, 80]) // the circle area/size mapping
.values( [8, 34, 89]) // pass in values (e.g. min,mean/median & max)
// optional
.width(500) // it centers to this
.height( 500) // it centers to this
.suffix('') // ability to pass in a suffix e.g. '%'
.circleColor( '#888') // stroke of the circles
.textPadding(40) // left padding on text
.textColor( '#454545') // the fill for text
// and render it
l.render()
note: the number of values you pass in will correlate to the number of circles
forked from <a href='http://bl.ocks.org/eesur/'>eesur</a>'s block: <a href='http://bl.ocks.org/eesur/7b63401950344f2dca1025d09cc7386d'>d3 | reusable circle legend</a>
forked from <a href='http://bl.ocks.org/EndNight95/'>EndNight95</a>'s block: <a href='http://bl.ocks.org/EndNight95/93ce5445e3fba94c0f78979a21289693'>d3 | reusable circle legend</a>