1

Description:

Hello, web developer here! I have been tasked to show scores for a online course that people have purchased. So I built a line graph that went up and down based on the score (naturally). The demo data had 30-40 lessons so the single graph was decent. Recently they added many more modules (40-50) with a total of 90+ lessons. There is a possibility of even more lessons added in the future.

Each lesson has a score, number of attempts it took and date completed. I want to be able to have the user hover/click over the score and view the attempts and date.

Also, I want to have the user to be able view data corresponding to EACH lesson, so a line graph that has increments of 10 would NOT work.

Question:

How can I best show a user score, attempts and date completed for 90+ lessons?

My research thus far:

enter image description here

enter image description here

  • Do you have to show for all 90? – Mervin Johnsingh Jun 27 '17 at 19:07
  • Bubble/point size for number of attempts, color shade for dates? Then x, y goes lesson, score. Don't make the user think too much, you could also split information in more than 1 graph. – Fernando Jun 27 '17 at 19:44
  • @MervinJohnsingh Yeah, not at once, but is some way the user has to access it. – Phil Jun 27 '17 at 19:55
  • @Fernando I was thinking that. Breaking each grave into 40s - it is a short term solution, but could work. You think a accordion style would for each graph increment? – Phil Jun 27 '17 at 19:56
  • You could display a good default, then add some filters like 'See last week' or 'Show last 10'. It's better to ask for some clicks than to present a cumbersome design, people like clicking simple stufff. – Fernando Jun 27 '17 at 20:08
1

From Edward Tufte on down, designers of Visual Data Display has agreed, it's as much about what you leave out as what you put in. Countless tests in human cognition and perceptual psychology have shown that people can't retain large amounts of categorical data in short-term memory, so they'll be much happier if you don't ask them to. In this case, the right data points are the top 10 ones the product's users tell you they are looking for. If you don't know what these top 10 things might be, it's because like most of us, you're not psychic and you don't know exactly what people want until you listen to them tell their stories. So if you want to do this right, there's a certain amount of 'people work' involved.

You're not going to be throwing away the other 80 data points. You'll want to make them accessible from the "top ten" chart but you don't want to flood people with info they have to wade their way through.
Good luck!

1

...user score, attempts and date completed for 90+ lessons

Not using the same chart type and absolutely not using a line chart.

You may use a bar/column chart to show score and attempts (and nicely highlight a correlation, if any and if they're interested in this aspect). One example from http://www.xydata.co.uk:

http://www.xydata.co.uk/wp-content/uploads/2016/03/Bar-chart.png

Do not use a line chart because correlation date/score and date/attempts is very weak (and you can't have both date and module/lesson on the same axis).

Note that this type of data is also a good candidate for an heat-map:

http://blog.catchpoint.com/wp-content/uploads/2012/07/etsy-heatmap-1024x370.png

You may omit column labels (image from http://curtisharris.weebly.com/blog):

http://curtisharris.weebly.com/uploads/3/9/8/7/39876769/3898400.png?523

It's similar to commit frequency graph used by GitHub, for example.


For date the a first attempt may use a calendar or a timeline.


There are, of course, other charts you may use (and even more combinations of them) but you should first present data and then ask yourself which facts you want to highlight.

0

This functioning could be a nice solution for your ever-growing lessons.

https://ecomfe.github.io/echarts-examples/public/editor.html?c=boxplot-multi

Rotate it (with imagination) 90 degrees clockwise,
then replace experiments with lessons,
add time to horizontal axis,
score in the vertical axis (per lesson),
and some more work for curves.

Your Answer

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

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