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

Maryam Hedayati*, Matthew Kay

*Corresponding author for this work

Research output: Chapter in Book/Report/Conference proceedingConference contribution

Abstract

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.

Original languageEnglish (US)
Title of host publicationProceedings - 2023 IEEE VIS Workshop on Visualization Education, Literacy, and Activities, EduVis 2023
PublisherInstitute of Electrical and Electronics Engineers Inc.
Pages49-54
Number of pages6
ISBN (Electronic)9798350330304
DOIs
StatePublished - 2023
Event1st IEEE VIS Workshop on Visualization Education, Literacy, and Activities, EduVis 2023 - Hybrid, Melbourne, Australia
Duration: Oct 22 2023Oct 23 2023

Publication series

NameProceedings - 2023 IEEE VIS Workshop on Visualization Education, Literacy, and Activities, EduVis 2023

Conference

Conference1st IEEE VIS Workshop on Visualization Education, Literacy, and Activities, EduVis 2023
Country/TerritoryAustralia
CityHybrid, Melbourne
Period10/22/2310/23/23

Keywords

  • data visualization
  • teaching
  • visualization implementation

ASJC Scopus subject areas

  • Education
  • Computer Graphics and Computer-Aided Design
  • Media Technology

Fingerprint

Dive into the research topics of ''Choose-your-own' D3 labs for learning to adapt online code'. Together they form a unique fingerprint.

Cite this