Include formula for `sizeref` in bubble charts

[chriddyp]

sizeref is a tough one and it's hard to guess it correctly.

In the chart editor, we use this formula to compute a reasonably sized sizeref:

desired_maximum_marker_size = 40 # at most, the marker will be 40px in diameter
marker = dict(
    sizeref = 2 * max(your_list_of_size_values) / (desired_maximum_marker_size**2),
    sizemode = 'area'
)

We also expose the sizemin property in cases points are too small to see.

I recommend that we update the "Scaling the Size of Bubble Charts" example to use this formula

I just explained this to a Dash user here: https://community.plot.ly/t/scatter-plot-size-from-x-and-y-difference/4749/2?u=chriddyp

cc @cldougl @bcdunbar @Kully

• [x] https://plot.ly/python/bubble-charts/
• [x] https://plot.ly/python/bubble-maps/
• [x] https://plot.ly/r/bubble-charts/
• [x] https://plot.ly/javascript/bubble-charts/

[Andries-Smit]

Looks like the formula is not right, the following did work for me

var size = [ 4, 6, 8, 10 ];
var largestSize = 40;
var sizeref = Math.max(...size) / largestSize ;

Tough we ended up calculating it back to size of rendered graph, so it shows nice for mobile and for desktop. Hight and width ar e calculated by the browser.

var size = [ 4, 6, 8, 10 ];
var height = 800;
var width = 300;
var percentageAuto = 10;
var hwAverage = (height + width) / 2;
var tenP = hwAverage / percentageAuto;
var sizeref = Math.max(...size) / tenP;

[Kully]

Looks like the formula is not right, the following did work for me

That is not the correct formula. You should be squaring largestSize and multiplying Math.max(...size) by 2.

@Andries-Smit

[pdfabbro]

"You should be squaring largestSize and multiplying Math.max(...size) by 2." - why though? Let's say your max value is 20,000. Based on your formula, the sizeRef for your max value would be 40000 / 1600 = 25 (assuming largest size of 40). Then let's say you have a value of 500, its sizeRef would be 1000 / 1600 = .625. Based on the documentation we want the number to be less than 1 for bigger circles, and greater than 1 for smaller circles. So a value of 500 would produce a bigger circle than a value of 20000? To me the formula is wrong and the way sizeRef works is counterintuitive. I would think a bigger value would produce a bigger circle and therefore a bigger sizeRef value should produce a bigger circle.

[nicolaskruchten]

To me the formula is wrong and the way sizeRef works is counterintuitive

I agree that sizeref is counterintuitive. It denotes the data value which should be rendered as size 1 (which is interpreted based on sizemode). This is why a smaller sizeRef yields a bigger circle: e.g. for a data value of 10, sizeref=10 would yield a circle of size 1, but sizeref=1 would yield a circle of size 10. The squaring is required if sizemode=area for obvious reasons.

[pdfabbro]

So I think you're saying that sizeref is the value by which all values are divided in order to normalize their size which would mean if you have values of [5, 10, 20] and a sizeref of 10, that the first circle would be half the size of the 2nd one, which would be half the size of the third one? That would make sense, but still doesn't make sense to me in terms of the whole less than 1 for bigger circles and greater than 1 for smaller circles. Also, my math degree is failing me - what are the "obvious reasons?". I don't see where any of that formula comes from to be honest.

[nicolaskruchten]

if you have values of [5, 10, 20] and a sizeref of 10, that the first circle would be half the size of the 2nd one, which would be half the size of the third one?

The relative sizes of the circles will always be the same. The absolute sizes are controlled by sizeref. If you set sizeref to 10, then the middle circle will be of size 1 (i.e. it will have a diameter of 1px if sizemode=diameter).

Also, my math degree is failing me - what are the "obvious reasons?". I don't see where any of that formula comes from to be honest.

Sorry, this comes from the fact that area is proportional to diameter squared. In the original statement, it had desired_maximum_marker_size as a diameter, but sizemode set to area, hence the power of two in the equation.

[pdfabbro]

Also, the documentation on the following page needs upating:

https://plot.ly/javascript/bubble-charts/

If you look at trace 2, the text value is saying that sixref (sould be sizeref) is set to 0.2, but in the example it's actually set to 2. Also, the comment says "setting 'sizeref' to lower than 1 decreases the rendered size", but it should say either "increases the rendered size" or since they actually set it to 2, it should say "setting 'sizeref' to greater than 1 decreases the rendered size". I have a feeling whoever created it had the same assumption/confusion and updated the code to 2, but not the comments or text. Also, the size value of the text attribute is wrong in every trace.

[nicolaskruchten]

Also, the documentation on the following page needs updating: https://plot.ly/javascript/bubble-charts/

Yes, that's definitely true!

[pdfabbro]

Sorry, this comes from the fact that area is proportional to diameter squared. In the original statement, it had desired_maximum_marker_size as a diameter, but sizemode set to area, hence the power of two in the equation.

I figured it had to do with the fact that Area = pie * r ^ 2, but I'm still not fully following where the numerator or denominator come from in this equation. Anyway, I'll take your word for it :).

Thanks for the responses!

[Luis-2030]

Hello

I am using plotly in r studio

I created a scatter plot where the size of markers is determined by a continuous variable (min. value: 45000 and max. value: 1666000). The markers look proportional to the values but I would like to make them larger for presentation purposes. I have not be able to make SIzeref work for me. Any help with setting up the right code?