TY - GEN
T1 - 'Choose-your-own' D3 labs for learning to adapt online code
AU - Hedayati, Maryam
AU - Kay, Matthew
N1 - Publisher Copyright:
© 2023 IEEE.
PY - 2023
Y1 - 2023
N2 - D3 is a popular library for implementing data visualizations, and is often taught in data visualization classes due to its flexibility, expressivity, and the ubiquity of online D3 example code implementing a variety of visualization techniques. However, D3 can be difficult to learn for novices, and it can be especially challenging to make use of online examples, as many of them are either written in previous, incompatible versions of D3, or are written in Observable notebooks, which often require changes to work in standalone JavaScript. We have previously taught D3 to students using guided tutorials, but found that students struggled to apply what they had learned to other visualization types or contexts, and when given the choice of toolkit in final group projects, often opted not to use D3, limiting the expressiveness of those projects. To address this, we introduced a new assignment type: choose-your-own labs. In each of these labs, students were tasked with implementing a visualization technique from that week's lecture. We provided a suggested code sample, deliberately choosing code samples in older versions of D3 and/or in Observable notebooks, and asked students to get the code sample working in the latest version of D3 as a standalone webpage. Depending on the complexity of updating the code, we sometimes also asked students to adapt the code sample to work with a different dataset. This paper reflects on our experiences using this new assignment. Although students seemed to find the process of updating and debugging real-world example D3 code to be tedious, they generally responded well to the assignment, and were excited to get more exposure to D3. We also observed that the quality and creativity of the final group projects in the class were noticeably improved from previous iterations of the course: more groups used D3 instead of easier-to-use but less-expressive tools (like Tableau), and the variety of visualization types and sophistication of interactions implemented was much improved. 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.
AB - D3 is a popular library for implementing data visualizations, and is often taught in data visualization classes due to its flexibility, expressivity, and the ubiquity of online D3 example code implementing a variety of visualization techniques. However, D3 can be difficult to learn for novices, and it can be especially challenging to make use of online examples, as many of them are either written in previous, incompatible versions of D3, or are written in Observable notebooks, which often require changes to work in standalone JavaScript. We have previously taught D3 to students using guided tutorials, but found that students struggled to apply what they had learned to other visualization types or contexts, and when given the choice of toolkit in final group projects, often opted not to use D3, limiting the expressiveness of those projects. To address this, we introduced a new assignment type: choose-your-own labs. In each of these labs, students were tasked with implementing a visualization technique from that week's lecture. We provided a suggested code sample, deliberately choosing code samples in older versions of D3 and/or in Observable notebooks, and asked students to get the code sample working in the latest version of D3 as a standalone webpage. Depending on the complexity of updating the code, we sometimes also asked students to adapt the code sample to work with a different dataset. This paper reflects on our experiences using this new assignment. Although students seemed to find the process of updating and debugging real-world example D3 code to be tedious, they generally responded well to the assignment, and were excited to get more exposure to D3. We also observed that the quality and creativity of the final group projects in the class were noticeably improved from previous iterations of the course: more groups used D3 instead of easier-to-use but less-expressive tools (like Tableau), and the variety of visualization types and sophistication of interactions implemented was much improved. 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.
KW - data visualization
KW - teaching
KW - visualization implementation
UR - http://www.scopus.com/inward/record.url?scp=85182338189&partnerID=8YFLogxK
UR - http://www.scopus.com/inward/citedby.url?scp=85182338189&partnerID=8YFLogxK
U2 - 10.1109/EduVis60792.2023.00014
DO - 10.1109/EduVis60792.2023.00014
M3 - Conference contribution
AN - SCOPUS:85182338189
T3 - Proceedings - 2023 IEEE VIS Workshop on Visualization Education, Literacy, and Activities, EduVis 2023
SP - 49
EP - 54
BT - Proceedings - 2023 IEEE VIS Workshop on Visualization Education, Literacy, and Activities, EduVis 2023
PB - Institute of Electrical and Electronics Engineers Inc.
T2 - 1st IEEE VIS Workshop on Visualization Education, Literacy, and Activities, EduVis 2023
Y2 - 22 October 2023 through 23 October 2023
ER -