Function to scale circles by area

[Scott Murray]

In reviewing this discussing on visualizing data values with circles...

https://groups.google.com/d/topic/d3-js/ImdUrzVyfyo/discussion

...I have been wondering about the cleanest way to map values to the area of a circle.

First, the math. In effect, the datum value will become the area, but of course SVG circle sizes are specific with a radius "r" value. So, to get from area to radius, we use:

r = sqrt( area / π )

In this thread:

https://groups.google.com/d/topic/d3-js/s7HwxUx2OQ8/discussion

...Mike suggests using a sqrt scale, like so:

> Generally by using a d3.scale.sqrt, and by setting the lower bound of
> the domain and range to 0. For example:
>
> var r = d3.scale.sqrt()
> .domain([0, 5000])
> .range([0, 20]);


But does this really account for π, or is it not needed in this context? My instinct (which may be wrong!) is to define that sqrt scale, but then divide by π before passing in the value, as in:

scale( value / Math.PI );

What do you think?

Thanks,
Scott

[Mike Bostock]

Multiplying by a constant factor (such as 1/π) has no effect on the
proportionality of the relationship between data and area. For
example, if you view a visualization from farther away, all the
circles get smaller, but the proportionality stays the same.
Mathematically:

sqrt(area / π) = sqrt(area) * sqrt(1 / π)
sqrt(1 / π) = 0.5641895835477...

So as long as you use Math.sqrt or d3.scale.sqrt, the encoding is
accurate; you generally don't need the π.

Mike

[Scott Murray]

Perfect, thanks, Mike.

Scott

[Curran]

This is an awesome discussion.

I made am example that sizes cities such that each filled in pixel represents 50,000 people - World City Explorer - http://bl.ocks.org/curran/752b97cef3f880a813ab

Now I'm curious how to solve the related problem of overlapping circles..

Best,

Curran

On Wednesday, June 13, 2012 at 12:28:09 PM UTC-7, Scott Murray wrote:

Perfect, thanks, Mike.

        Scott