How do Observable Users Decompose D3 Code? An Exploratory Study

Users often struggle to program visualizations using complex toolkits like D3. Before we can design effective code assistants to support them, we must first understand how D3 users reason about their code. In this work, we explore users' understanding of D3 using an important gauge of code comprehension in CS education: code decomposition. We qualitatively analyze 560 D3 programs published on Observable and identify three distinct strategies to decomposing D3 programs: segmenting code into layers of functionality, keeping everything all in one cell, or creating reusable visualization functions. We also observe how users inherit decomposition methods from copied examples and reorganize copied code to suit their needs. We corroborate our findings for decomposition preferences through interviews with D3 and Observable users. 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. All supplemental materials are available at https://osf.io/sudb8/?view_only=302fc5c8d397412aac35c6e094ae7dd6.