Bubble Chart - Bubble size strange behavior

[Cyril Trümpler]

Hello,

I encounter a strange behavior with bubble size in a bubble chart. 

Bubble size scale is not proportional with minimal value: (with / without override sizeAxis.minSize options)

    - a data entry with a value of 500 has a radius of 5 (sizeAxis.minSize default)

    - another data entry with a value of 530 has a radius of 17

    - last entry with a value of 550 has a radius of 22

The last two seems proportional.

You can play with the following dataset on playground:

['Name', 'Val1', 'IRR', 'Region', 'Size'],
['Fund I',    80.66,              1.67,      'North America',  500],
['Fund II',    80.66,              1.57,      'Asia',  530],
['Fund III',    79.84,              1.36,      'Europe',         550]

I should expect something like (fictive values here):

500 => 5

530 => 7

550 => 10

Is there a way to override this or this is a bug? 

Thanks

[Sergey Grabkovsky]

Hi, we don't linearly scale the radius, we linearly scale the area of the bubbles. I tested this with 5 values: 500, 525, 550, 575, and 600, with a sizeAxis from 10 to 20. The circles I got had the radii 10, 13, 16, 18, and 20, respectively. Here is how we figure out the radius of a bubble:

// Normalize the value

value = (value - minValue) / (maxValue - minValue)

// Convert the minimum radius to a minimum area value

// The formula to calculate the area of a circle is 2 * pi * r ^ 2

minArea = minRadius ^ 2 * 2 * pi

maxArea = maxRadius ^ 2 * 2 * pi

// Figure out the area of the bubble

bubbleArea = (maxArea - minArea) * value + minArea

// Convert the bubble area back to the radius

bubbleRadius = sqrt(bubbleArea / 2 / pi)

Here it is, worked out, for every one of my points (excluding the trivial min and max values):

value = (525 - 500) / (600 - 500) = 25 / 100  = 0.25

minArea = 10 ^ 2 * 2 * pi = 200 * pi

maxArea = 20 ^ 2 * 2 * pi = 800 * pi

bubbleArea = (800*pi - 200*pi) * 0.25 + 200*pi = (600*pi) * .25 + 200*pi = 150*pi + 200*pi = 350*pi

bubbleRadius = sqrt(350*pi / 2 / pi) = sqrt(175) = 13.23

value = (550 - 500) / (600 - 500) = 50 / 100 = 0.5

minArea = 10 ^ 2 * 2 * pi = 200 * pi

maxArea = 20 ^ 2 * 2 * pi = 800 * pi

bubbleArea = (800*pi - 200*pi) * 0.5 + 200*pi = (600*pi) * 0.5 + 200*pi = 300*pi + 200*pi = 500*pi
bubbleRadius = sqrt(500*pi / 2 / pi) = sqrt(250) = 15.81

value = (575 - 500) / (600 - 500) = 75 / 100 = 0.75

minArea = 10 ^ 2 * 2 * pi = 200 * pi

maxArea = 20 ^ 2 * 2 * pi = 800 * pi

bubbleArea = (800*pi - 200*pi) * 0.75 + 200*pi = (600*pi) * 0.75 + 200*pi = 450*pi + 200*pi = 650*pi
bubbleRadius = sqrt(650*pi / 2 / pi) = sqrt(325) = 18.03

Rounded, these sizes match up to the radii that were calculated for my bubble chart. I hope this helped you understand our logic a bit better.

- Sergey

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/groups/opt_out.

[Cyril Trümpler]

Thanks for your explanation

I conclude that bubble chart could not be used for my needs to show data in a proportional way. if i take only two values, one takes the minSize and the second maxSize even if their sizes are close (eg. 500 & 501)

Is there another chart to do that ?

[Sergey Grabkovsky]

I'm confused why this behavior doesn't satisfy your needs. Can't you just set your minSize and maxSize to control how it's scaled?

- Sergey

[asgallant]

You can set the sizeAxis.minValue/maxValue options to make the chart scale values the way you want, see example here: http://jsfiddle.net/asgallant/5G2UP/

[Cyril Trümpler]

Yes I can set minSize/maxSize or minValue/maxValue, but like this http://jsfiddle.net/ctrumple/LDJ2L/1/ (chart with three sizes 998, 999 & 1000) our visual interpretation of the chart is wrong due to the fact each bubble have a different area for close size.

It's all about interpretation.

Cyril Trümpler

--
You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/8WmEw77zmkk/unsubscribe.
To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.

[Sergey Grabkovsky]

Is this more the effect you're looking for? http://jsfiddle.net/LDJ2L/2/ 

- Sergey

--

You received this message because you are subscribed to the Google Groups "Google Visualization API" group.

To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.

[Cyril Trümpler]

it's look like good
let me check tomorrow with more data

minValue to zero has a specific behaviour?

thanks a lot for your time guys

[Sergey Grabkovsky]

No, it just behaves as if you had a datapoint that had a 0 value, which in turn changes how things are scaled (instead of mapping the range 998-1000, it maps the range 0-1000). It gives the chart a more 'absolute' feeling, since everything is scaled from zero, and not values that are taken from your chart. It is not the default, because to most people, seeing the delta between their bubbles is more important than seeing their bubbles on an absolute scale, note how all those bubbles look like they're pretty much the same size.

- Sergey

[Cyril Trümpler]

everything run fine

thanks again

Cyril Trümpler