Approach to scale the size of investment with a wide extreme for visualization [closed]

Question

(I've posted this on StackOverflow--visualization--but got no response yet, so I'm trying to cross post here in the hope that more people with statistical and math knowledge can help make suggestion)

I am using a bubble chart to represent, the amount spent by members of a population on M1, M2 and M3 as follows:

Note: In the above figure, each row of axis represent individual member, and the size of the bubbles on a line represents the amount spent on M1,M2 and M3 respectively by that member. Also, please ignore the numbers showing up inside each bubble. That represents another metric not relevant to this question.

Currently, I'm using a logarithmic function (thanks to another StackOverflow post here) to scale the size of the bubbles. The function is like this:

    function scaledValue(value) {
        var minp = 0;
        var maxp = 100;

        var minv = Math.log(1000000);
        var maxv = Math.log(100000000);

        var scale = (maxv-minv) / (maxp-minp);

        return (Math.log(value)-minv) / scale + minp;
    }

Because I'm using the log scale, the size of some bubbles aren't quite proportionate to look at. For example, the bubble that represents $52m is not quite as big as it should be compared to $9.4m bubble. On the other hand, the bubbles for $3.1m vs. $9.4m look reasonable relative to each other.

One might ask, "Why are you using log scale then?!" The reason I use log scale is because the underlying spend numbers are quite spread out as follows:

min = $0
max = $272,000,000
avg = $4,000,000
stddev = $17,000,000
number of total data points = 1609

So when I used linear scale, the size of the bubbles goes out of whack (meaning some are too small to see; some are too big that they engulf the whole plot).

My question to more mathy folks here is what kind of scale will allow users to easily discern the relative size of the underlying values more accurately than logarithmic scale.

Answer 1

First off, since you are most likely specifying the radius or diameter of the bubble, you need to take the square root of the number first. A bubble with r=2 is four times as large as one with r=1. That alone will bring some things into scale.

But, if you them take a log, you are doing something arbitrary. Log scales work, for example, on line graphs, because then each unit (in inches or mm) represents the same percentage change everywhere on the graph (e.g., the graph y = x^2 is a straight line). Using a log just to rescale gives you bubbles that mean nothing to the observer.

Answer 2

Your range of values (within 100:1 ratio) is not so extreme that you can't use a natural scale on a single axis with a dot chart or bar chart.

Using area (such as your bubbles or a treemap), you can usually represent a greater range of values (say, 1000:1 ratio) in the same space since they use two dimensions to represent the values. However, comparisons are more difficult to judge.

For wider ranges, you may have to revert to some transformation like log or quantile. Those will distort the value interpretation but do preserve the relative rankings.

A log transformation would be natural if you cared more about multiplicative differences. That is, if the difference between 1 and 5 is equally important as the difference between 10 and 50, since they both differ by a multiple of 5.

Here's the data I used if anyone wants to experiment.

Task,Member,Amount
M1,1,2.1
M2,1,6.4
M3,1,3.1
M1,2,9.9
M2,2,52
M3,2,9.4
M1,3,2.8
M2,3,8
M3,3,0.6
M1,4,31.8
M2,4,23.7
M3,4,9.3