3

We've got an application where we want to show parts-of-a-whole data in a table with multiple rows. The current table design has a small number of rows (4-8). Each contains text and numbers plus a pie chart.

The pie chart can have up to 8 sections, representing the fraction of the last 20 minutes that this row has been in any of 8 possible states. (If a state didn't occur, we don't show that slice).

Most users don't need to know the exact numbers, but want to get an overall sense of "usually in good state X" or "wow, spending too much time in bad state Y". For users that want precision, there is a rich tooltip that shows the details.

One of these states is 'good' (and is green); the other seven are different varieties of 'bad', some of which are "bad but if you wait it'll get better" and some are "bad and there's nothing you can do about it". Too much of a few of them indicates "bad and you need to get an administrator to help you."

pie_example

I'm looking for alternatives to the pie chart. It doesn't work for narrow slices (users tend to overlook them), and with 8 colors, users are often confused about what each of them means.

Constraints:

  • Changing the format of the table itself is not an option, i.e., these things should still be in rows.
  • This is web-based, so we have access to graph-making widgets, but other recommendations are welcome.
  • Animation / flashing things == bad.
  • Screen real estate is at a premium; we don't want to get any taller. We do have a small amount of flexibility sideways, perhaps 3-4x as wide if it really added value.
  • This is part of a complicated dashboard, so we want to avoid complete information overload, but users are willing to put up with some complexity to have good situational awareness.

What is a good way to present this data?

2
  • 3
    The alternatives for data visualization are more related to the type of data that you want to represent than to the space or technology constraints so it could be helpful if you give us information about it. Sep 28, 2012 at 15:14
  • @mciarrocchi, it's a set of states that the line can be in; I added more detail to the question. Sep 28, 2012 at 16:00

2 Answers 2

2

If you be willing to trade-off "parts-of-a-whole" against seeing narrow "slices", you could use vertical bar plots with a logarithmic scale.

This is how such a diagram might look like (instead of small stacked boxes representing the individual items, also usual bars can be used):

bar chart example

I think this representation also provides further advantages:

  • You could order the bars according the severity (or applying some form of semantic grouping).
  • It becomes easier to compare different entries because the bar of a particular state has a fixed position - it is not only color that discerns the states.
  • You may add column headings, at least for groups of states.
1
  • I'm going to accept this, though I'll likely use some variation of it (e.g., I only have a few pixels of height to work with) as at least it's a new direction. Oct 2, 2012 at 13:28
5

I think a better way would be a stacked bar graph. It would be one bar so the row height wouldn't matter, and it would be split up into colors the same way.

Each color should take up whatever % of the bar, and they should be arranged in order so that the smaller ones are on one side and the larger ones towards the other.

You should add a hover state (like you have in your example) showing the percentages and labels for each piece on info shown. One good technique, if your data is arranged this way, is to color code "bad" things red and "good" things green so it's even more clear when scanning the table.

2
  • Why do you recommend sorting by size rather than in a fixed order? (I'm curious about your thoughts, not pushing one over the other.) Sep 28, 2012 at 16:01
  • 1
    I think if it's going to be in a tight space, then ordering by size is easier to scan. That would be a great thing to test though, seeing both side by side.
    – Mike G.
    Sep 28, 2012 at 16:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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