"Graphing" one number within a large range
In short, I'm trying to make a bar (using GWT's wrapper for HTML5 canvas) that will show something reasonable for a given value, no matter what the value of the bottom and top of the chart actually are. I'm assuming the best approach is logarithmic, but I'm completely open to any other solution.
Assumptions:
Our "bar" vertical, measuring 200 pixels high, 35 pixels wide.
We're showing a "site" versus it's parent "region". The units are ones of power (e.g. kW, MW, GW).
The "region" has a range of 1 kW to 55.19 GW. The average value is 27.6 MW.
Approximately 95% of sites within the region are much closer to 1 W than 55 GW, but the top 5% skew the average significantly.
The
first site
has a value of12.67 MW
. Thesecond site
has a value开发者_开发问答 of192.21 kW
.
Obviously the second site wouldn't even register on a linear graph, while the first would register very low.
How can I make this bar more useful? For example, I'd like the top 5% of sites that skew the region's average to represent only a small portion (5%) of the total bar, while the other 95% should represent 95%.
The line in the lower area of the bar is the region average line, while the entire bar represents Minimum (bottom) to Maximum (top).
Current Java code using log10:
// BAR_GRAPH_WIDTH = 36, BAR_GRAPH_HEIGHT = 200
// regionNsp (MW): [min=0.0, max=55192.8, avg=27596.5]
// siteNsp (MW) = 187.18
DrawingArea canvas = new DrawingArea(BAR_GRAPH_WIDTH, BAR_GRAPH_HEIGHT);
Rectangle bgRect = new Rectangle(1, 0, BAR_GRAPH_WIDTH - 1, BAR_GRAPH_HEIGHT); // backgound bar
bgRect.setFillColor("white");
canvas.add(bgRect);
int graphSize = (int)(BAR_GRAPH_HEIGHT / Math.log10(regionNsp.getMax()));
int siteHeight = (int)Math.log10(siteNsp - regionNsp.getMin()) * graphSize;
Rectangle valueRect = new Rectangle(1, BAR_GRAPH_HEIGHT-siteHeight, 35, siteHeight);
valueRect.setFillColor("lightgreen");
canvas.add(valueRect);
Consider logarithmic scale with a break for extremely high values that are far beyond any others in the population. For an example of a break in the bars and axis, see: http://tomhopper.files.wordpress.com/2010/08/bar-chart-natural-axis-split1.png
I admit that I don't know much about GWT, so I'm answering on the basis of how would I show your values on a paper-and-pencil graph. That answer is that you've answered your own question - use logs. The range from 1000 to 55200000000 with an average around 27600000, after taking (common base 10) logs, becomes about 3 to 11, with the average around 7.4.
The caveat is that what you gain in "reasonableness" you do loose in perspective. Take the decibel scale, which is (common base 10) log based. The difference between an 80 decibel sound and an 85 decibel sound doesn't seem like a big change, except that the second is three times more energetic.
精彩评论