Choose-your-own D3 labs for learning to adapt online code

Abstract

D3 is a popular library for implementing data visualizations, and is often taught in data visualization classes. However, D3 can be difficult to learn, and it can be especially challenging to make use of online examples, which often require changes to work in standalone JavaScript. We have previously taught D3 using guided tutorials, but found that students struggled to apply what they had learned to other visualization types or contexts. To address this, we introduced a new assignment type: choose-your-own labs. In each lab, students implemented a visualization technique from that week’s lecture. We provided a code sample and asked students to get the code sample working in the latest version of D3 as a standalone webpage, sometimes with a new dataset. This paper reflects on our experiences using this new assignment. Although students seemed to find the process of debugging real-world example D3 code to be tedious, they generally responded well to the assignment. We also observed that the quality and creativity of the final group projects in the class were improved from previous iterations of the course. We provide suggestions for educators who want to use a similar format in their courses, and provide our materials at https://osf.io/47vfy/?view_only=7e478a23e3e5414086569694279d38fe.