[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"detail-sidebar-cat-0-en-105":3,"doc-seo-657591-105":59,"doc-detail-657591-en":130},{"code":4,"msg":5,"data":6},0,"success",[7,13,18,23,28,33,38,43,48,51,55],{"id":8,"doc_module":4,"doc_module_name":9,"category_name":10,"show_sort_weight":11,"slug":12},1,"Document","Story & Novel",90,"story-novel",{"id":14,"doc_module":4,"doc_module_name":9,"category_name":15,"show_sort_weight":16,"slug":17},2,"Literature",80,"literature",{"id":19,"doc_module":4,"doc_module_name":9,"category_name":20,"show_sort_weight":21,"slug":22},4,"Exam",70,"exam",{"id":24,"doc_module":4,"doc_module_name":9,"category_name":25,"show_sort_weight":26,"slug":27},5,"Comic",60,"comic",{"id":29,"doc_module":4,"doc_module_name":9,"category_name":30,"show_sort_weight":31,"slug":32},6,"Technology",50,"technology",{"id":34,"doc_module":4,"doc_module_name":9,"category_name":35,"show_sort_weight":36,"slug":37},7,"Healthcare",40,"healthcare",{"id":39,"doc_module":4,"doc_module_name":9,"category_name":40,"show_sort_weight":41,"slug":42},8,"Research & Report",30,"research-report",{"id":44,"doc_module":4,"doc_module_name":9,"category_name":45,"show_sort_weight":46,"slug":47},9,"Religion & Spirituality",20,"religion-spirituality",{"id":46,"doc_module":4,"doc_module_name":9,"category_name":49,"show_sort_weight":46,"slug":50},"World Cup","world-cup",{"id":52,"doc_module":4,"doc_module_name":9,"category_name":53,"show_sort_weight":52,"slug":54},10,"Lifestyle","lifestyle",{"id":56,"doc_module":4,"doc_module_name":9,"category_name":57,"show_sort_weight":24,"slug":58},19,"General","general",{"code":4,"msg":60,"data":61},"ok",{"site_id":62,"language":63,"slug":64,"title":65,"keywords":66,"description":67,"schema_data":68,"social_meta":123,"head_meta":125,"extra_data":127,"updated_unix":129},105,"en","how-do-observable-users-decompose-d3-code-a-qualitative-study","How Do Observable Users Decompose D3 Code - A Qualitative Study","","Many toolkit developers aim to streamline visualization coding using templates and example galleries, yet little research explains how users structure their own D3 programs or how their code diverges from toolkit intentions. This study examines whether reasoning can be inferred from code, including when users copy sources. A qualitative analysis of 715 D3 programs on Observable identifies three decomposition levels and interview evidence supporting component-level reasoning. Comparisons with the Grammar of Graphics show gaps for animations, interactions, and parameterization.",{"@graph":69,"@context":122},[70,84,105],{"@type":71,"itemListElement":72},"BreadcrumbList",[73,77,79,82],{"item":74,"name":75,"@type":76,"position":8},"https://docshare.wps.com","Home","ListItem",{"item":78,"name":9,"@type":76,"position":14},"https://docshare.wps.com/document/",{"item":80,"name":40,"@type":76,"position":81},"https://docshare.wps.com/document/research-report/",3,{"item":83,"name":65,"@type":76,"position":19},"https://docshare.wps.com/document/how-do-observable-users-decompose-d3-code-a-qualitative-study/657591/",{"url":83,"name":65,"@type":85,"image":86,"author":91,"headline":65,"publisher":94,"fileFormat":97,"inLanguage":63,"description":67,"dateModified":98,"datePublished":99,"encodingFormat":97,"isAccessibleForFree":100,"interactionStatistic":101},"DigitalDocument",{"url":87,"@type":88,"width":89,"height":90},"https://docshare.wps.com/thumbnails/how-do-observable-users-decompose-d3-code-a-qualitative-study/657591.png","ImageObject",300,407,{"name":92,"@type":93},"hdkawk","Person",{"url":74,"name":95,"@type":96},"DocShare","Organization","application/pdf","2026-10-29","2026-10-26",true,{"@type":102,"interactionType":103,"userInteractionCount":8},"InteractionCounter",{"@type":104},"ViewAction",{"@type":106,"mainEntity":107},"FAQPage",[108,114,118],{"name":109,"@type":110,"acceptedAnswer":111},"What are the three levels of code decomposition identified in the study?","Question",{"text":112,"@type":113},"The study identifies Program-Level, Chart-Level, and Component-Level decomposition, with users showing a strong preference for Component-Level reasoning.","Answer",{"name":115,"@type":110,"acceptedAnswer":116},"How does the paper handle the question of inferring users’ reasoning from code?",{"text":117,"@type":113},"It uses qualitative analysis of 715 D3 programs on Observable and interview evidence to interpret how users organize code, including cases where users copy from other sources.",{"name":119,"@type":110,"acceptedAnswer":120},"How do the findings compare user components to the Grammar of Graphics?",{"text":121,"@type":113},"There is strong overlap for common chart types, but coverage decreases for complex visualizations such as streamgraphs, and components involving interaction, parameterization, and other complexity fall outside the Grammar of Graphics.","https://schema.org",{"og:url":83,"og:type":124,"og:title":65,"og:site_name":95,"og:description":67},"article",{"robots":126,"canonical":83},"index,follow",{"doc_id":128,"site_id":62},657591,1792984274,{"code":4,"msg":5,"data":131},{"doc_id":128,"user_id":132,"nickname":92,"user_avatar":133,"doc_module":4,"category_id":39,"category_name":40,"doc_title":65,"doc_description":67,"doc_content":134,"file_id":135,"file_url":136,"file_type":137,"file_size":138,"view_count":8,"is_deleted":4,"is_public":8,"is_downloadable":8,"audit_status":8,"page_count":24,"language":139,"language_code":63,"site_id":62,"html_lang":63,"table_of_contents":140,"faqs":141,"seo_title":142,"seo_description":67,"update_tm":129,"read_time":143},3985747859855,"https://ap-avatar.wpscdn.com/davatar_276721f389ce27ea32af1340a28f341c","How Do Observable Users Decompose D3 Code? A Qualitative Study  \nMelissa Lin* † Carnegie Mellon University  \nHeer Patel* ‡  \nUniversity of Washington  \nMedina Lamkin ‡ University of Washington  \nHannah Bako § University of Maryland  \nLeilani Battle ‡  \nUniversity of Washington  \narXiv :2405 . 1434 1v 5 [ cs .HC] 4 Jul 2025  \nABSTRACT  \nMany 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 usermade 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.  \nIndex Terms: Visualization toolkits, Code reuse.  \n1 INTRODUCTION  \nFrom designing bespoke visualizations in D3 [8] to orchestrating multi-chart interactions in Vega-Lite [28], visualization programming is a valuable skill for the data science workforce [26] . However, users may struggle to write their own customized programs [4], even when adapting existing examples [6], making it challenging to adopt more expressive toolkits like D3 [27] . One popular solution is to generate code templates [18] that users can populate with data variables [1, 12] . However, templates do not necessarily reflect how users themselves may reason about their own code [4] . Broadly, we observe relatively few research projects investigating how visualization toolkit users organize their code, or how these choices impact code comprehension and reuse [6, 21] . We focus on D3 given its popularity and complexity [4, 6, 12] .  \nIn response, we analyze how D3 users organize visualization code to understand what code structures these users find intuitive. We apply qualitative methods to investigate an established measurement of code comprehension : code decomposition [9, 24, 29] . The  \n*Both authors contributed equally to this research †[e-mail: mylin@andrew.cmu.edu](e-mail: mylin@andrew.cmu.edu)  \n‡e-mail: [heerpate, mlamkin, leibatt]@[cs.washington.edu](cs.washington.edu)  \n§ e-mail: [hbako@umd.edu](hbako@umd.edu)  \nabstraction and pattern-matching skills necessary for code decomposition make it a critical pillar of computational thinking that helps to distinguish novice programmers from experts [29, 34] . Further, practicing program decomposition helps students develop metacognitive awareness, and researchers have analyzed decomposition strategies to observe students’ mental models of code in the classroom [9] . With visualization languages, users must reason about their code and visualization designs simultaneously [4, 6, 21], suggesting that decomposition strategies could be analyzed to gain insight into users’ mental models of visualization programs. Through this analysis, we can establish frameworks fo","cbCaisDGGcnhocGQ","https://ap.wps.com/l/cbCaisDGGcnhocGQ","pdf",265221,"English","# Abstract\n# 1 Introduction\n## Research questions and approach\n## Contributions and key findings","[{\"question\":\"What are the three levels of code decomposition identified in the study?\",\"answer\":\"The study identifies Program-Level, Chart-Level, and Component-Level decomposition, with users showing a strong preference for Component-Level reasoning.\"},{\"question\":\"How does the paper handle the question of inferring users’ reasoning from code?\",\"answer\":\"It uses qualitative analysis of 715 D3 programs on Observable and interview evidence to interpret how users organize code, including cases where users copy from other sources.\"},{\"question\":\"How do the findings compare user components to the Grammar of Graphics?\",\"answer\":\"There is strong overlap for common chart types, but coverage decreases for complex visualizations such as streamgraphs, and components involving interaction, parameterization, and other complexity fall outside the Grammar of Graphics.\"}]","How Do Observable Users Decompose D3 Code - A Qualitative Study | PDF",13]