The Shapes of Abstraction in Data Structure Diagrams

要旨

Tools to inspect runtime state, like print statements and debuggers, are an essential part of programming. Yet, a major limitation is that they present data at a fixed, low level of abstraction which can overload the user with irrelevant details. In contrast, human drawings of data structures use many illustrative visual abstractions to show the most useful information. We attempt to bridge the gap by surveying 80 programmer-produced diagrams to develop a mechanical approach for capturing visual abstraction, termed abstraction moves. An abstraction move selects data objects of interest, and then revisualizes, simplifies, or annotates them. We implement these moves as a diagramming language for JavaScript code, named Chisel, and show that it can effectively reproduce 78 out of the 80 surveyed diagrams. In a preliminary study with four CS educators, we evaluate its usage and discover potential contexts of use. Our approach of mechanically moving between levels of abstraction in data displays opens the doors to new tools and workflows in programming education and software development.

受賞
Honorable Mention
著者
Devamardeep Hayatpur
University of California, San Diego, La Jolla, California, United States
Brian Hempel
University of California San Deigo, San Diego, California, United States
Richard Lin
University of California, Los Angeles, Los Angeles, California, United States
Haijun Xia
University of California, San Diego, San Diego, California, United States
DOI

10.1145/3706598.3713723

論文URL

https://dl.acm.org/doi/10.1145/3706598.3713723

動画

会議: CHI 2025

The ACM CHI Conference on Human Factors in Computing Systems (https://chi2025.acm.org/)

セッション: Programming and Software Use

G401
7 件の発表
2025-04-30 20:10:00
2025-04-30 21:40:00
日本語まとめ
読み込み中…