edX Learning Dashboard

1st Prize Winner for edX Learning Dashboard Challenge 2015 (Live Demo)

Overview

• Progress is a donut chart showing section-based progress of current student (in comparison to peers)
• Timeline is a line chart tracking a student's progress from the beginning to the end of the course, in comparison to his/her goal, which can either be getting a certificate (certificate line), completing all problems(100% line), or watching all video(100% line)
• Leaderboard is a bar chart showcasing the top performers
• Implicit cues rather than explicit verbal suggestions are used to guide and encourage students.
  • in Progress chart, a smooth colorful ring looks better than a gray rugged ring, and student can achieve a beautiful ring by making more and balanced efforts;
  • in Timeline chart, x-axis punchcard be a perfect green line if the user can spend 15+ minutes on the website everyday;
  • Leaderboard directly shows the behaviors that are praised.
• Visualization logics and data logics are separated. JS scripts contains minimal codes for data manipulation, and simply read and show all JSON data generated by csv2json.py.
• D3.js is the only dependency for visualizations

Style

• mimicking the native style as in EDX course page
• light, concise, straightforward, avoiding information overload
• meaningful animations (every animation serves a purpose)
• responsive design (though hover effects are limited on small touch screen)
• tested working on latest Firefox, Chrome, Safari and IE
  • the width of svg is a bit off in Safari, causing by a offsetWidth bug (possible to be fixed by JQuery).

About edX