Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

I am working on some routines for a client application to visualize data in a 3d bar chart style. The data consists mostly of smaller values with only a few large values. For example:

6,942,535,341
23,598
19,203
58,201

So, the problem is that the large values pretty much makes the visualization useless. Does anyone have any suggestions on how to display this data … OR … perhaps a suggestion on how to massage the data to make it more visually appealing?

share|improve this question
23  
Obligatory - xkcd.com/1162 –  AJ Henderson Mar 15 '13 at 13:25
2  
@AJHenderson How are you able to recall the xkcd comics when it is time to add one in? There are thousands of them in the archive! –  JFW Mar 15 '13 at 18:28
3  
@JFW - I make a habit of memorizing useless trivia and search by title. –  AJ Henderson Mar 15 '13 at 19:49
    
@AJHenderson: pitty you didn't make it a real answer. That way, the xkcd could simply have been embedded... –  André May 7 '13 at 14:01
add comment

8 Answers

up vote 39 down vote accepted

For anyone mathematically inclined, the answer is to use a log scale.

For non-mathematical people, you may be better off showing a break in the chart and then the extreme value.

enter image description here

share|improve this answer
2  
That is what I was looking for. –  onedeadgod Mar 15 '13 at 13:56
10  
Log scale :) xkcd.com/1162 –  icc97 Mar 19 '13 at 21:45
5  
As much as I hate to downvote, I really don't think the 'non-mathematical' option is a good solution. It's more misleading than helpful, as the mind's got a pretty powerful inclination to compare the bars without taking the axis break into consideration. In such a situation, a simple table of numbers might be better, as you'll instantly see that some values are much wider than others. –  Mal Ross Mar 20 '13 at 21:29
1  
@MalRoss it isn't always about comparing all the values with each other. Sometimes it's more about visualising the relationships between a lower group and a higher group. And in terms of reading charts vs. tables, charts give a much quicker overview, and so are often preferred in business. –  JohnGB Mar 20 '13 at 22:08
1  
I hate logarithmic scale. But the separations are a good idea. They are usually slanted. Newspapers use them commonly. That's what we have on maps too, when we include on a map a far-away island. –  Nicolas Barbulesco Mar 26 '13 at 15:33
show 2 more comments

You could use logarithmic axes. This allows you to compactly visualize wide ranging variables.

To illustrate, here is a very simple logarithmic visualization:

6 942 535 341
       23 598 
      419 203 
        8 201
            3

The length of each datum represented as a number is (roughly) log_10 of that number. So just printing the numbers in a monospaced font will give you a kind of automatic bar chart.

share|improve this answer
1  
The monospaced font tip is great! –  Stephen Mar 17 '13 at 11:38
3  
Thank you. I think I got it from Tufte's The visual display of quantative information. –  Peter Mar 17 '13 at 20:02
add comment

John GB's solution is aesthetically pleasing, but scientific fields generally discourage scale breaks like those shown (and are often cliche examples of misleading graphics). Cleveland (1984) suggests to use a full scale break, making a separate panel, to further visually distinguish between the values.

enter image description here

Jon Peltier has a similar example using multi-panels, but has a gradient effect for the bars going into the second higher value panel.

Scale breaks IMO are probably not as bad as everyone seems to make them, but here is a simple alternative if someone is giving you a problem with it (in addition to the other fine answers already)!

share|improve this answer
add comment

Logarithmic scales are probably the best bet, though they still end up throwing off the true vastness of the difference. It really depends on what needs to be conveyed by the way that the information is displayed. If the vastness of the difference is of key importance then simply graphing the small number as a very small line may still be appropriate.

share|improve this answer
add comment

Get one more dimension ! Represent the values as areas. Squares or discs. Like on the anamorphic maps.

Then, if you still need more to represent your values, make cubes, or balls ! :-) 

Edit:

They use this technique in the Billion Dollar Gram.

Graph comparing large quantities of money

share|improve this answer
add comment

I think of two possible approaches:

1- Use areas. Like, a small square dot against a big rectangle area. The advantage of this approach is that the areas are proportional to the square of the measure.

2- Allow zooming. Draw the columns in scale and let the user zoom in until the small values are visible, or zoom out until the big value fits into the window.

share|improve this answer
add comment

Well, I was struggling with this problem. I don't recommend to use log scale, first not all users will understand this scale, second one, if you have values that are close the difference between them won't be noticeable on the graph.

I recommend two solutions:

  1. break graphs: but we need to remember to change the scale, scale must be adjusted not to the biggest value, but to the rest smaller values, for the user it's more important to see even subtle differences between smaller values, also bigger bar are easier to be clikced

enter image description here

  1. spheres - also good solution, spehers shouldn't be proportional, cause if they are, smaller values won't be displayed - they will be so small that only one biggest value would be noticeable

enter image description here

share|improve this answer
add comment

I like the idea of using spherical objects where applicable. The larger areas can clearly hold several times more area while keeping the smaller areas visible.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.