How do Observable Users Decompose D3 Code? A Qualitative Study

TL;DR

This study qualitatively analyzes how Observable users organize D3 visualization code, revealing a preference for component-level decomposition and highlighting differences from formal grammars like the Grammar of Graphics.

Contribution

It identifies three levels of code decomposition in user practices and compares them with theoretical models, informing better toolkit support and AI assistance.

Findings

Users prefer component-level code decomposition.

Grammar of Graphics covers basic but not complex visualizations.

User practices differ from formal visualization grammars.

Abstract

Many toolkit developers seek to streamline the visualization programming process through structured support such as prescribed templates and example galleries. However, few projects examine how users organize their own visualization programs and how their coding choices may deviate from the intents of toolkit developers, impacting visualization prototyping and design. Further, is it possible to infer users' reasoning indirectly through their code, even when users copy code from other sources? We explore this question through a qualitative analysis of 715 D3 programs on Observable. We identify three levels of program organization based on how users decompose their code into smaller blocks: Program-, Chart-, and Component-Level code decomposition, with a strong preference for Component-Level reasoning. In a series of interviews, we corroborate that these levels reflect how Observable users reason about visualization programs. We compare common user-made components with those theorized in the Grammar of Graphics to assess overlap in user and toolkit developer reasoning. We find that, while the Grammar of Graphics covers basic visualizations well, it falls short in describing complex visualization types, especially those with animation, interaction, and parameterization components. Our findings highlight how user practices differ from formal grammars and reinforce ongoing efforts to rethink visualization toolkit support, including augmenting learning tools and AI assistants to better reflect real-world coding strategies.