Courseware Traversal Visualization

For Hackathon 4, Miles Steele and Renzo Lucioni prototyped a method of visualizing student paths through edX courseware. We came up with the following interactive graph displaying randomly generated data.

You can find the code in its GitHub repository, and you can also view a live demo.

In both screenshots shown below, curves above the horizontal axis indicate forward movement through the courseware (e.g., advancing to the next lecture). Similarly, curves below the horizontal axis indicate backwards movement through the courseware (e.g., going back to review). Neither of these graphs actually have an explicit horizontal axis. What appears to be a horizontal axis is composed of student paths which visit each component of the courseware in order.

In the colored graph pictured below, the thickness of each line represents how many students followed the path indicated by that line. Mousing over a line will make it black and more opaque.

In this grayscale graph, each line represents the path of a single student. Mousing over a line will make it red and more opaque.