Better way to display three pieces of data on one graph for a website


Note the oldest answer was referring to my graph prior to this last edit. It was a great answer, please don't discount it due to my edit.

I want to display how much study I have done, and how many pages I have completed throughout the week, broken up by day, and I have done so as shown below: enter image description here

I have had people tell me that they can't understand the graphs, but I have no idea how else I can display them.

How can I display these more clearly?

2/3/2015 6:28:00 AM

Accepted Answer

Well I took a stab at this with Illustrator and I did it by hand, not knowing how to automate this process. I just looked at the pages per day and per week, and arrived at this chart:

pages per day per week

Basically a mini-chart showing the progress for each day of the week overlaid on top of a bar indicating the total pages for the week.

I started to visualize the hours in a similar fashion, using a complete circle for 1 hour and a half-circle for a half hour of study.

Possibly put the hours of study per day above the bar for the page, keeping the same color-coding or not. You'd have to play with that and see what looked best. There is also room to place small numbers on top of each bar.

2/3/2015 10:24:00 PM

First, diagnosing the reasons why it's confusing:

  • Your different messages are competing with each other. First the viewer notices that Week 1 was much more productive than Week 2 - this is the most eye-catching message. Then they realise this isn't very meaningful, since there were more days in week 1 than week 2.
  • Then they look at individual days, and the ordering gets confusing. Most "over time" data graphics have days evenly spaced and in order. Here, you need to look several colours up on the key before you figure out that days mostly go top to bottom, and then it's confusing that week 2 seems different (Saturday, Sunday, Friday? Why do the weeks start at different days?)
  • Then there's the high amount of eye-bouncing between the key and the chart to check any particular day.

So probably, in the ideal solution, it'll be:

  • easy and intuitive to follow progress over time,
  • easy to spot days which are productive and days which are less so
  • easy to see in which weeks the bulk of the work was done, without this being too distorted by days that haven't happened yet or days when no work would be done for some reason

A really good technique for cases with lots of mini-sets of fairly simple data is a grid of small charts all on the same scale. This is sometimes called "small multiples". Each one works independently, and you can easily scan over the whole set to see patterns and overall trends.

Here's a very simple quick example (needs a title) where you can quickly see:

  • They increased their work rate in the last two weeks of the project,
  • They start most weeks well then lose focus before working hard to catch up on Friday
  • They were away for much of Week 4 but worked hard on the weekend to catch up

enter image description here

I'd favour filled areas to lines for this so you can get an easy, intuitive grasp of the volume done each week.

Columns also work - slightly clearer and easier to look up specific days, but has slightly less of an intuitive sense of volume and direction, and looks busier at first glance.

enter image description here