Designing a Live Discussion Visualization for the Classroom

The course on Information Visualization at KU Leuven, taught by professor Erik Duval, has students choosing their own dataset and developing interesting information visualizations (see the course wiki if you wish to visit their blogs and check their work). As teacher assistant, I’ve decided to join the fun, and combine this with my own research.

My choice of dataset, which will come as no surprise, is Learning Analytics related. The goal is to involve the students as much as possible (hi students, hope you are reading this!), to help me create something useful for them (so the data will also have to come from them), while also presenting them with a real example of how we design, develop and evaluate our visualizations.

We’ve already been “tracking” some of the students’ work through a simple online spreadsheet they maintain themselves regarding time spent on activities. I presented a quick and dirty visualization hack, showing how these time entries per student can already give some simple insights. See the figure below, which shows clearly that the second activity required most of their time (in this case, learning D3.js). Quite a simple example of course, but more data such help us create better visualizations, right?

Quick D3.js hack to visualize the spreadsheet info: Activity ordered by time, from left to right. Circle size represents hours spent. Green = more than 5 hours. Totals are visualized at the right, with the pink line indicating average.

As always, it felt very Big Brother-ish to the students. The Quantified Self idea doesn’t translate well (or I’m really bad at explaining it!) when someone grading you is watching this closely to your data. We’ll look at anonymous visualizations some other time, but it’s important to note that students are scared their data will be misinterpreted. More effort, for example, doesn’t always lead to better results.

Typical setup in the classroom. 1 group presents their work, 3 groups + the professor provide feedback. For my first prototype, the two guys at the bottom are manually tracking group activity. A large display is positioned top right with a live visualisation.

So on to the idea I’ll be implementing this week. In the InfoVis class, each group of students (4 groups of each 3 students) is required to present their work to the class. Every group not presenting, including the professor/teacher assistant/… can ask questions and give feedback. Contribution to such a discussion is useful for everyone, and thus visualizing the amount of contribution by each group can be interesting. It might just help create a better balance between time spent talking by each group, which is a good thing (?). See the image below for a similar application, which has inspired us for this idea.

Bachour, K.; Kaplan, F.; Dillenbourg, P., “An Interactive Table for Supporting Participation Balance in Face-to-Face Collaborative Learning,” Learning Technologies, IEEE Transactions on , vol.3, no.3, pp.203,213, July-Sept. 2010

Students did see problems with visualizing the amounts. People would give feedback just… to give feedback! We could end up with a lot of mediocre, “filler” feedback (“That’s great”, “I like that”, “I totally agree”). Visualizing the amount of feedback says nothing about the quality, therefore a rating system could also be beneficial.

That raised another alarm bell. “Negative rating will make me feel as if my feedback isn’t appreciated”, a student reacted. It was suggested that positive feedback alone, similar to Facebook’s “like”, could be experienced less negatively. So that’s what we’ll go for!

I’ll spare you the details, but Node.js and Socket.IO are going to be my best friends to make all of this happen by next Monday. I’ll create an interface to manually log who is talking (if the entire thing makes sense after deployment, I can look into microphones or noise sensors…), I’ll give each group a “like” button, and focus the rest of my efforts making some (hopefully) interesting, oh and did I say live?, large display visualizations.

To give you an idea of what I have in mind, here are some sketches of a few examples I came up with… Comments much appreciated of course!

Distribution of time spent giving feedback, per group. Colors indicate rated feedback.

Interaction between groups, sequence of group feedback. Colors indicate feedback

Size of tree indicates amount of feedback by group. “Likes” are visualized by adding apples to the tree. Based on iTree (Nakahara J, Hisamatsu S, Yaegashi K, Yamauchi Y (2005) iTree: does the mobile phone encourage learners to be more involved in collaborative learning? In: Proceedings of the 2005 conference on computer support for collaborative learning: learning 2005: the next 10 years! (CSCL ‘05). International Society of the Learning Sciences, pp 470–478)

Size of group indicates ratings received. Lines between group X and Y indicate how many times group X gives feedback after group Y, and vice versa. Alternative, and probably better, would be to visualize who gives feedback to whom. Based on (Roberto Martinez Maldonado, Judy Kay, Kalina Yacef, and Beat Schwendimann. 2012. An interactive teacher’s dashboard for monitoring groups in a multi-tabletop learning environment. In Proceedings of the 11th international conference on Intelligent Tutoring Systems (ITS’12), Stefano A. Cerri, William J. Clancey, Giorgos Papadourakis, and Kitty Panourgia (Eds.). Springer-Verlag, Berlin, Heidelberg, 482–492.)

Similar to above, this time using arcs to visualize interactivity between groups. Based on (Nagel, T., Duval, E., Vande Moere, A., Kloeckl, K., Ratti, C.: Sankey Arcs — Visualizing edge weights in path graphs. Eurovis 2012, Vienna, Austria, 5–8 June 2012, Eurovis 2012, pp. 55–59, Eurographics Association)

A bit trickier to explain when not animated. The visualization adds a square for every 5 seconds talked. A new square is drawn in the direction of the group talking e.g. if group 3 only talks, a line of squares will be drawn in a 45 degree angle. Other groups’ activity will pull the new squares to their location e.g. left you see that after a while the professor starts talking, making the new squares move to the bottom. Like tug of war! Overlapping squares turn orange, and when overlapped even more green. In the left image, the green square means there was a lot of overlap between group 3 and the professor, meaning there was a nice balance between the two (lots of back and forward talk maybe). Group 1 and 2 didn’t participate at all though. In the right image, there is a nice balance between all 4 groups!