Skip to main content
100%

d3 | reusable circle legend

✓ Published0🌍 Public
EEndNight95
Last edited Jun 14, 2018
Created on Jun 14, 2018

This example demonstrates a reusable circle legend for bubble charts, using nested concentric circles to represent proportional values such as 8%, 34%, and 89%. The legend renders in SVG via d3 v4, with `d3.scaleSqrt()` mapping the domain to circle radii, and includes dashed guide lines and text labels for each value. The code exposes a configurable API for setting domain, range, values, dimensions, colors, and suffixes, making the legend adaptable to different datasets.

AI-generated description

needed 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>

mit Licensed

Similar vizzes