7

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?

  • I could display them as a bunch of independent line graphs, but after 12 weeks they will look absurdly cluttered. – user34348 Dec 3 '14 at 9:26
  • In that case you could divide it into groups: All time, Month, Week. In here there is rep chart that lets you zoom in. There are other ways too, like clicking a link on top of the chart will let you go deeper into the graph ...or something like that. You could look into services that offer some sort of graphical chart and perhaps chart scripts/plugins to see what they offer. For example: nvd3 – Joonas Dec 3 '14 at 10:11
  • 1
    This seems pretty straightforward to me. Maybe your friends can't read graphs. :) – Lauren-Reinstate-Monica-Ipsum Dec 3 '14 at 10:56
  • @LaurenIpsum I did consider that ;). – user34348 Dec 3 '14 at 11:00
2
+50

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.

3

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

  • Very nice answer, I will see what I can do with this. Thank you very much, I am sure I will ask something further on this. – user34348 Dec 3 '14 at 11:09
  • Out of curiosity, where did your example data come from? – user34348 Dec 3 '14 at 11:16
  • I just made it up :) – user56reinstatemonica8 Dec 3 '14 at 12:52
  • Oh, very nice then :) – user34348 Dec 3 '14 at 13:05
  • What software in? Excel? – user34348 Dec 3 '14 at 13:05
2

I'm going to separate my answer into several parts.

I. Type of reader

There are 3 types of people that uses graphs:

a) The people that can read any graph.

b) The ones that hardly can read a graph.

c) Those who are looking for a very specific info.

I won't care about the 1st kind. Any ugly graph will do.

For the type b you need a lot of effort, interactive graphs, several graphs showing different approaches (by day, by week, over all time, by day, by week) moving graphs, cartoons...

But the approach in most cases should be thinking that the user needs to see a very specific data.

I am assuming that you know what kind of data your reader is looking for.

In your graph, the most important thing is the overall hours of study in one week, and how you performed in the different weeks. If that is what you need, this type of graph is okay.

The rest of the data is not important in your graph.

II. The visual info

Okay, so as I'm assuming that you chose the right type of graph and approach, and because this is the graphic design site, I will analyze your graph.

Analysis of the image

Data displayed

1) Nobody on the planet reads the hours in terms of that many decimal points. "I studied 4.1582 hours... !!" Reduce the decimals to just 1.

Eliminate all the 0 that have no sense, by deleting them in your excell table.

2) If in the bars the days goes up (Monday on the bottom and Sunday on the top) the brain of the reader must jump between contradictory dimensions when reading at the color-day table: left to right are in the reality bottom to up. Put your color-day table in the same vertical dimension as the bars.

3) Don't repeat the same info. This title is the same as the chart title.

4) Don't repeat week, week, week, week, week...

Style

3-4) Make this titles easier to read, use a better font size. The objective of a graph is to see all the info at a glance.

5) The overall proportion and spacing of the chart (between columns) gives the sensation of being too much data. Make it more pleasant.

6) You can give some visual aids like this tiny lines, that connect Monday with Monday, etc.

7) Make the overall visual style more pleasant. The info can be the same, but if it is presented in a more interesting way, the observer will try to look in depth the info.

Aditional tips:

I could not find a way to put the total hours data on the top of the column. Probably it is usefull.

I didn't find the way to increase the size of the color squares next to the days. That would be easier to read.

0

i think better to display in Stacked Horizantal bar like this enter image description here edit with livegap Charts

  • Looks really good. Out of curiosity, are you a developer(for livegap)? – user34348 Mar 10 '15 at 11:04
  • yes, livegap charts (charts.livegap.com) & livegap editor (editor.livegap.com) is My web app – Omar Sedki Mar 10 '15 at 11:07
  • Very interesting, thanks, I will have a better look tomorrow – user34348 Mar 10 '15 at 11:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy