How do Observable Users Decompose D3 Code? An Exploratory Study
About
Welcome to our Decomposing D3 project!
While D3 is famous for its power to create flexible, interactive visualizations, it’s notoriously difficult to learn. In this work, we explore users’ understanding of D3 using an important gauge of code comprehension in CS education: code decomposition. We qualitatively analyzed 560 D3 programs published on Observable and analyzed D3 users’ code decomposition strategies. Based on our findings, we suggest strategies for generating more intuitive D3 code recommendations using decomposition preferences and highlight new research opportunities for visualization code assistants.
Team
Melissa Lin, undergrad researcher, Carnegie Mellon University
Heer Patel, undergrad researcher, University of Washington
Medina Lamkin, PhD student, University of Washington
Yuanjie (Tukey) Tu, PhD, University of Washington
Hanna Bako, PhD Candidate, University of Maryland
Soham Raut, undergrad researcher, University of Washington
Leilani Battle, PhD, University of Washington
Highlights
We present a robust dataset of 560 Observable notebooks representing 22 distinct visualization types written using D3.
We report on a comprehensive analysis of how Observable users organize their D3 visualization code, including their code decomposition and code inheritance strategies
We conduct an interview study with 7 Observable users regarding how they organize their D3 code.
We discuss future implications regarding the creation of supportive learning and visualization prototyping tools for D3, including AI code generation.
Main takeaways
Layered decomposition was the most preferred strategy, regardless of visualization type. Layered decomposition was also preferred regardless of whether users created examples from scratch or copied code from existing sources.
When Observable users inherit a non-Layered decomposition strategy, they often change it to Layered decomposition. In contrast, users never changed from Layered to All-in-One or Function Calling decomposition, reiterating their preference for Layered Decomposition.
For Layered decomposition, users’ mental models of D3 code (i.e., preferred layer types) seem to align with the model proposed in Wickham’s Layered Grammar of Graphics.
When copying from existing D3 examples, users are making deliberate decisions regarding which visualization designs and coding strategies they choose to adopt.
Users choose decomposition strategies to improve their current and future visualization programming workflows such as by making debugging easier and facilitating code reuse.
Future directions
Our corpus examples were all collected from the Observable platform, representing a subset of D3 users. We will expand our corpus examples to platforms such as Github.