CODEWITHSUNDEEP
d3.jsscaledc.jsbubble-chart
mrtc
mrtc

Reputation: 163

dc.bubbleChart dynamic bubble radius on filter

I have a bubble chart which I put the bubbles on a svg world map to view my sales proportion.

I get bubble radius value from a function which calculates total sales of products.

And I set d3.scaleLinear min-max values proportional to min-max value of total sales. 

caChart.width(1000)
                        .height(1000)
                        .dimension(countryDim)
                        .group(countryBubble)
                        .radiusValueAccessor(function (p) {
                            return (Math.floor((p.value.Sales_sum / 2.5)));
                        })
                        .r(d3.scaleLinear().domain([28, 10000000]))
                        .maxBubbleRelativeSize(0.18)
                        .minRadius(2.5)
                        .minRadiusWithLabel(10)
                        .colors(d3.schemeSpectral[9])
                        .colorDomain([500, 700000])
                        .colorAccessor(function (p) {
                            return (Math.floor((p.value.Sales_sum)));
                        })

Everthing works perfectly but If i make a filter on lets say "PRODUCT A" and can't understand to which country it has been sold the most because bubble radius gets so small .

Can i make a dynamic bubble radius which it will not be affected by any filter. So even if it is filtered the most sold country bubble radius will be the same as if there was no filter ?

Maybe some change on d3.scaleLinear makes it work?

Hope i made it clear . Thanks

Upvotes: 1

Views: 211

Answers (1)

Gordon
Gordon

Reputation: 20120

It sounds like you are looking for bubbleChart.elasticRadius.

Turn on or off the elastic bubble radius feature, or return the value of the flag. If this feature is turned on, then bubble radii will be automatically rescaled to fit the chart better.

Specifically, every time the chart is drawn, this will set the domain of the radius scale to the minimum and maximum bubble sizes found in the chart.

So the largest and the smallest bubbles should remain the same size. It will be hard to tell absolute numbers, but the relative proportion of sales should be clear.

Enable the elastic radius like this:

chart.elasticRadius(true)

Upvotes: 1

Related Questions