1

I'm currently working with a dataset that consists of numbers ranging from 0-255, but that's heavily skewed towards the 70-100 range. Anything below 70 is considered low and anything above ~110 is considered high. It's extremely rare to see a number over 150.

Now, this data needs to be displayed in sets of 6, preferably as bars extending left to right. The exact numbers are to the right of the data. Here's a quick example (colors subject to change):

An example of one set of data.

The goal is to show the user each of the six stats and to help them quickly understand if that stat is good, bad, or mediocre.

The issue is that I don't know the best way to size the bars. Right now, I'm doing a linear relationship between them (bar length = value * scalar). But either the large values overflow the container, or the medium values look pitifully small (which gives the wrong impression).

The strategies I've seen for displaying skewed data online, like using breakpoints or displaying the data logarithmically, don't work particularly well here. I'd also like to avoid a grid if I can (although using one wouldn't be the end of the world).

I've considered something like, the first 30 points have a .75x multiplier, then the next 100 points have a 1x multiplier, then anything over that has a .5x multiplier... but I don't know if that'd feel unintuitive when the user can tell the graph doesn't line up with the numbers.

Any help is appreciated!

2 Answers 2

1

From the user's point of view, being the most important the immediate visualization of the relationship between data, I see several confusing elements in the example graph:

  1. The final data is all in the same column (on the right), each of them being different results, this is quite confusing since the bars should be a visual addition to the data and in this case, it's the other way around, or at least there is no relationship between them.
  2. There is no reference on the graph to what the minimum and maximum values ​​are, something that should be visually immediate in the first instance.
  3. The questionable colors are mainly in relation to the background, blue and yellow are complementary, the result is visual vibration and they are not tested for users with color blindness.
  4. Formally, too much emphasis on gutters instead of data bars.
  5. Much more important than respecting the start-end of the result with respect to the start-end values ​​(0-255) I think is showing the comparison of the existing data.

Studying the way of representing these five points, I believe not only do you solve a large part of the graph but even half of the explanation of the question is unnecessary.

enter image description here

1
  • I appreciate the help! However, I actually have a few issues with this. The start and end values of the graphs aren't actually that important, nor are the relationships between the stats on a specific display. The main goal is to help the user quickly guage how high each stat is. I also still need to figure out how long each bar needs to be.
    – Nate Kite
    Commented Aug 6, 2022 at 15:28
0

Anything below 70 is considered low and anything above ~110 is considered high.

...the first 30 points have a .75x multiplier...then anything over that has a .5x multiplier...

That sounds like a spectrum.

A bar graph depicts a set of data points in relationship to each other.

A spectrum depicts an single data point compared to a bipolar range of values.

Start with a depiction of the spectrum with the danger zones at each end, color each zone relative to its level of danger, and plot the data point along that line:

spectrum

The goal is to show the user each of the six stats and to help them quickly understand if that stat is good, bad, or mediocre.

A glance at the spectrum chart above quickly communicates which areas need attention.

 

...the first 30 points have a .75x multiplier...then anything over that has a .5x multiplier...

...unintuitive when the user can tell the graph doesn't line up with the numbers.

Use color rather than distorting the data to communicate intensity. Color coding and gradating each end of the spectrum according to intensity makes it easier to for the user to perceive intensity than it would using a multiplier and skewing the plotting points.

Your Answer

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

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