Bubble Map Radius Tip for d3.js

If you create bubble maps in d3.js and you use a circle SVG element be sure to use the right scale for your radius.
Since we can only change the radius of a circle we need to use the squareroot scale to scale the area rather than the radius.

var sqrtScale = d3.scaleSqrt()
.domain(\[0, 100\])
.range(\[0, 20\]);

Read more about the specifics on Robert Kosara’s blog

See Also