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.


enter image description here

enter image description here

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.

enter image description here

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.

  • 2
    I know this is probably out of scope for your project, but I'd question the premise and the data itself. These 'work allocation' models are often fraught with way too many assumptions, inaccurate data, and complete lack of context.
    – DA01
    Oct 22, 2015 at 19:53
  • @DA01 I know exactly what you mean. There are so many different ways of calculating these things and you need to set things up right to get meaningful value out of it. Unfortunately it's a "feature" on our customer's buying checklist. We're looking for a "this is how we recommend it be done" MVP solution and not worrying about the rest of it.
    – nightning
    Oct 22, 2015 at 21:30

3 Answers 3


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).

enter image description here

  • 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).
  • The bar graphs look like a good way showing current work and you can distinctly scan the amount of available time across the row. What are your thoughts of extending the height of the orange bars to show the actual amount, so you can scan the overages as well?
    – nightning
    Oct 22, 2015 at 21:36
  • Good question. If we make height of the cell 100%, then no — overtime will overlap with the top row cells == mess with legibility and that would imply that overtime is a null-sum game, so your overtime somehow affects the load of a person on top of you in the list. If the height of the cell is relative and responses to the max overtime value, it's possible, but then it would imply that any new max is a new norm and if someone stays say 15 hours at work because of a release, suddenly all perfectly normal 100% loads of everybody else are drastically deflated. Can be bad for morale. :-)
    – Zoe K
    Oct 23, 2015 at 8:32

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.

enter image description here

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

  • I'm a bit confused as to what you mean by combining the two. I'm familiar with spark lines. Are you suggesting I use the color block as a background and then overlaying the line on top? Can you elaborate?
    – nightning
    Oct 22, 2015 at 19:45
  • An overlay could be one solution, though I suppose I was alluding to just placing the sparkline to the right of the allocation percentage, in the same cell. A cleaner solution may be displaying the allocation percentage, then fade it to the sparkline on mouse over, though some users would need to be informed of that Oct 22, 2015 at 19:49
  • I see. I'm not sure that will work well for my case. I'm hoping for a solution where the user can just scan and see the overall patterns. Because on mouse over, there'll be additional info that needs to be displayed. I'm also trying to keep with the timeline continuum and so putting to the right will interrupt flow of time. I'll try overlaying it and see how that looks though.
    – nightning
    Oct 22, 2015 at 20:17
  • 1
    Understandable. I do like the second graph more, since it is much more representative of what the percentages represent. You could possibly use the second graph, and overlay the colors from the first graph on their respective days. That may make it easy for users used to the original RAG to understand a different format. Oct 22, 2015 at 20:22

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.

  • Appreciate the tip about using 5 shades of color. That's good to know for heat maps. Not sure we can apply this for our current use case though, since we're a product used by many different teams. Each team may have different preference for the different cutoff points. I'd rather not put in a control to adjust the levels if I don't have to. Users would also like to see exact values (e.g. 5h) instead of averages because they're using it to determine if the user can take on more work that day or not as oppose to a more reflect end of the month summary of how busy were people in the past bit.
    – nightning
    Oct 22, 2015 at 22:50

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.