How do Observable Users Decompose D3 Code? A Qualitative Study (2405.14341v4)

Abstract: Many toolkit developers seek to streamline the visualization programming process for their users through structured support such as prescribed templates and example galleries. However, few projects examine how users organize their own visualization programs, how their coding choices may deviate from the intents of toolkit developers, and how these differences may impact visualization prototyping and design. Further, is it possible to infer users' reasoning indirectly through their code, even when users copy code from other sources? Understanding these patterns can reveal opportunities to align toolkit design with actual user behavior, improving usability and supporting more flexible workflows. 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 suggest opportunities for rethinking visualization toolkit support, including augmenting learning tools and AI assistants to better reflect real-world coding strategies.