How do Observable Users Decompose D3 Code? A Qualitative Study

2024-05-23

AI Summary

This study investigates how developers select code organization strategies for complex visualization libraries (e.g., D3) based on comprehension and reuse needs, and how such choices affect cognitive processes in visualization design. Method: Drawing on a corpus of 715 publicly available Observable notebooks and in-depth developer interviews, we apply thematic coding, comparative case analysis, and qualitative synthesis to systematically examine code structure practices. Contribution/Results: We propose the first systematic three-level decomposition model for D3 code—comprising *program*, *chart*, and *component* layers—and empirically identify a reuse-driven “fine-granularity evolution” pattern in code organization. The resulting interpretable, cognitively grounded framework informs user-centered design of visualization programming assistants: it enables more intuitive, developer-aligned intelligent code recommendation strategies and establishes *cognitive alignment* as a novel research direction for visualization code recommendation.

Technology Category

• Data Mining & Knowledge Management: Data Visualization & Summarization
• Computer Vision: 3D Computer Vision
• Knowledge Representation and Reasoning: Geometric, Spatial, and Temporal Reasoning

Application Category

• Web Mining and Content Analysis: Web data visualization
• Graph Algorithms and Modeling for the Web: Foundation models and LLMs for Web-related graphs
• User Modeling, Personalization and Recommendation: Practical large-scale studies of user experience

Abstract

Code templates simplify the visualization programming process, especially when using complex toolkits such as D3. While many projects emphasize template creation, few investigate why users prefer one code organization strategy over another, and whether these choices influence how users reason about corresponding visualization designs. In response, we qualitatively analyze 715 D3 programs published on Observable. We identify three distinct levels of D3 code organization-program, chart, and component-which reflect how users leverage program decomposition to reason about D3 visualizations. Furthermore, we explore how users repurpose prior examples, revealing a tendency to shift towards finer-grained code organization (e.g., from program to component) during repurposing. Interviews with D3 users corroborate our findings and clarify why they may prefer certain code organization strategies across different project contexts. Given these findings, we propose strategies for creating more intuitive D3 code recommendations based on users' preferences and outline future research opportunities for visualization code assistants.

Problem

• Code Organization
• Visualization Tools
• User Preferences

Innovation

• D3 Visualization
• Code Organization
• Personalized Code Recommendation