Data visualization: go with conventional format or a different format?

Question

I'm dealing with a graph to help managers quickly determine the workload of various team member. The industry term for this is a "Resource Allocation Graph"

This is commonly shown in a calendar grid with one cell per person per day. It uses traffic light colors or shades to indicate workload. The darker the cell, the more work a team member has for the day. Red is typically used when too much work is assigned for the day.

e.g.

Problem with using colors is that our eyes are not very good at discerning relative differences between shades. E.g. when you say people were assigned too much work, just how much extra work are we talking about? If it's just a half hour overtime, this may be acceptable. But not if it's 5+ hours.

The top graph solves this problem by showing user numbers within the cell. This means users have to pause from the scanning to focus to interpret that number. Not ideal.

---

I'm looking at an alternate way of representing this information using a line/area graph.

Overages are shown as area in red. Available hours are shown in blue.

However, this is a very unconventional graph. I worry people may not understand what is being shown.

Question: What is a better approach? The conventional heatmap graph or the alternative line/area graph? Or something else?

This graph is used regularly. The managers tend to review resourcing at least once a week, if not more frequently.

Edit: This is a forecasting tool. Managers want to use this to determine if work needs to be reassigned to another team member or who has the capacity to take on more work.

Answer 1

I agree with you that third one is too counter-intuitive, it took me a while to read it and understand the notation.

And I agree shades are hard to tell apart, especially when they denote such small things as hours.

I dislike the idea of traffic light, because they show green as some load and yellow as zero load, and while it's reasonable, it conflicts with the intuitive recognition, I think (when green == good, yellow == medium, red == bad).

So one of the things that could work is a combination of good chunks from all three options (comments below).

• Not shades of color but a bar-chart.
• Bar-chart is aligned to the bottom of the cell, not to the median (that median-aligned chart is really hard to read).
• There are three shades for color-coding: blue for work hours, orange for stack ≥ 100%, grey for available time (blue is associated with business and grey also means empty, so it's a fitting connotation here; orange stands for a non-aggressive kind of alert).
• Since people can be booked for more than 100% and precise overtime amount matters, values are needed — I don't think there is a way to avoid them here (other than hiding them in the tooltip that appears on hover).
• I've added a "general availability" icon (on the left of the username) to show how available this person is on average of displayed time (and how prone are they to work overtime etc).

Answer 2

Maybe a combination of the initial color-coded resource allocation graph, and then a small spark line next to the allocation percentage. I think you could effectively combine the original chart with your less conventional chart, and most users could grasp the concept fairly quickly.

An easy library to work with is this one, though there are many alternatives. http://omnipotent.net/jquery.sparkline/#s-about

Answer 3

5 shades of color is the rule of thumb for comparative value assessments [1]. So I recommend you use your shades not to be linear with your values, but to represent "states" of the load, like "under-capacity" "approaching capacity" "at capacity" "over-capacity". You most likely want to maximize for quick glances, which I would imagine need to convey who is most likely to have time (under capacity) and who is over capacity. So I would make sure that those states are salient.

You could also show how much people are over or under the current average load, setting the baseline of your visualization not to "0" but the current average for the team, or the average for that person, or 50%, etc.

[1] Nathalie Henry Riche, Bongshin Lee and Catherine Plaisant. Understanding Interactive Legends: a Comparative Study with Standard Widgets. In Proceedings of IEEE Eurovis 2010 (Computer Graphics Forum) , 29(3), pp 1193-1202, May 2010.