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

Written by Mila

See Also

d3 events tips

Small tip for selecting the active element for events

Default Projection Paramameters

What are the default projection params in d3.js

Promises error

Small tip when you hit a async error

shorthand functions

Small tip for writing less boilerplate

Updating your chart in d3.js

How v5 helps clean up your updating code