Papers
Topics
Authors
Recent
Gemini 2.5 Flash
Gemini 2.5 Flash
184 tokens/sec
GPT-4o
7 tokens/sec
Gemini 2.5 Pro Pro
45 tokens/sec
o3 Pro
4 tokens/sec
GPT-4.1 Pro
38 tokens/sec
DeepSeek R1 via Azure Pro
28 tokens/sec
2000 character limit reached

CrossCode: Multi-level Visualization of Program Execution (2304.03445v2)

Published 7 Apr 2023 in cs.HC

Abstract: Program visualizations help to form useful mental models of how programs work, and to reason and debug code. But these visualizations exist at a fixed level of abstraction, e.g., line-by-line. In contrast, programmers switch between many levels of abstraction when inspecting program behavior. Based on results from a formative study of hand-designed program visualizations, we designed CrossCode, a web-based program visualization system for JavaScript that leverages structural cues in syntax, control flow, and data flow to aggregate and navigate program execution across multiple levels of abstraction. In an exploratory qualitative study with experts, we found that CrossCode enabled participants to maintain a strong sense of place in program execution, was conducive to explaining program behavior, and helped track changes and updates to the program state.

Definition Search Book Streamline Icon: https://streamlinehq.com
References (53)
  1. Harold Abelson and Gerald J. Sussman. 1996. Structure and Interpretation of Computer Programs (2nd ed.). MIT Press, Cambridge, MA, USA.
  2. acornjs. 2013. Acorn. Retrieved February 13, 2023 from https://github.com/acornjs/acorn
  3. Design Principles for Visual Communication. Commun. ACM 54, 4 (apr 2011), 60–69. https://doi.org/10.1145/1924421.1924439
  4. Compilers: Principles, Techniques, and Tools (2nd Edition). Addison-Wesley Longman Publishing Co., Inc., USA.
  5. A Survey of Machine Learning for Big Code and Naturalness. ACM Comput. Surv. 51, 4, Article 81 (jul 2018), 37 pages. https://doi.org/10.1145/3212695
  6. Aivar Annamaa. 2015. Introducing Thonny, a Python IDE for Learning Programming. In Proceedings of the 15th Koli Calling Conference on Computing Education Research (Koli, Finland) (Koli Calling ’15). Association for Computing Machinery, New York, NY, USA, 117–121. https://doi.org/10.1145/2828959.2828969
  7. Ronald Baecker. 1998. Sorting out sorting: A case study of software visualization for teaching computer science. Software visualization: Programming as a multimedia experience 1 (1998), 369--381.
  8. Brilliant. 2011. Brilliant. Retrieved September 15, 2022 from https://brilliant.org/
  9. Ruven Brooks. 1983. Towards a theory of the comprehension of computer programs. International Journal of Man-Machine Studies 18, 6 (1983), 543--554. https://doi.org/10.1016/S0020-7373(83)80031-5
  10. Wikimedia Commons. 2004. Retrieved September 15, 2022 from https://commons.wikimedia.org/
  11. Introduction to Algorithms, Third Edition (3rd ed.). The MIT Press, Cambridge, MA, USA.
  12. The Role of Working Memory in Program Tracing. In Proceedings of the 2021 CHI Conference on Human Factors in Computing Systems (Yokohama, Japan) (CHI ’21). Association for Computing Machinery, New York, NY, USA, Article 56, 13 pages. https://doi.org/10.1145/3411764.3445257
  13. Debugger Canvas: Industrial Experience with the Code Bubbles Paradigm. In Proceedings of the 34th International Conference on Software Engineering (Zurich, Switzerland) (ICSE ’12). IEEE Press, Zurich, Switzerland, 1064–1073.
  14. Engage Against the Machine: Rise of the Notional Machines as Effective Pedagogical Devices. In Proceedings of the 2020 ACM Conference on Innovation and Technology in Computer Science Education (Trondheim, Norway) (ITiCSE ’20). Association for Computing Machinery, New York, NY, USA, 159–165. https://doi.org/10.1145/3341525.3387404
  15. Jonathan Edwards. 2007. No Ifs, Ands, or Buts: Uncovering the Simplicity of Conditionals. SIGPLAN Not. 42, 10 (oct 2007), 639–658. https://doi.org/10.1145/1297105.1297075
  16. Memview: a pedagogically-motivated visual debugger. Proceedings Frontiers in Education 35th Annual Conference (2005), S1J--11.
  17. Philip J. Guo. 2013. Online Python Tutor: Embeddable Web-Based Program Visualization for Cs Education. In Proceeding of the 44th ACM Technical Symposium on Computer Science Education (Denver, Colorado, USA) (SIGCSE ’13). Association for Computing Machinery, New York, NY, USA, 579–584. https://doi.org/10.1145/2445196.2445368
  18. C. Hundhausen and S. Douglas. 2000. SALSA and ALVIS: a language and system for constructing and presenting low fidelity algorithm visualizations. In Proceeding 2000 IEEE International Symposium on Visual Languages. 67--68. https://doi.org/10.1109/VL.2000.874355
  19. Christopher D. Hundhausen and Jonathan L. Brown. 2007. What You See Is What You Code: A "Live" Algorithm Development and Visualization Environment for Novice Learners. J. Vis. Lang. Comput. 18, 1 (feb 2007), 22–47. https://doi.org/10.1016/j.jvlc.2006.03.002
  20. A Meta-Study of Algorithm Visualization Effectiveness. Journal of Visual Languages & Computing 13, 3 (2002), 259--290. https://doi.org/10.1006/jvlc.2002.0237
  21. Hyeonsu Kang and Philip J. Guo. 2017. Omnicode: A Novice-Oriented Live Programming Environment with Always-On Run-Time Value Visualizations. In Proceedings of the 30th Annual ACM Symposium on User Interface Software and Technology (Québec City, QC, Canada) (UIST ’17). Association for Computing Machinery, New York, NY, USA, 737–745. https://doi.org/10.1145/3126594.3126632
  22. Amy J. Ko and Brad A. Myers. 2009. Finding Causes of Program Output with the Java Whyline. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems (Boston, MA, USA) (CHI ’09). Association for Computing Machinery, New York, NY, USA, 1569–1578. https://doi.org/10.1145/1518701.1518942
  23. Hiroki Kokubun. 2018. Tweakpane. Retrieved February 13, 2023 from https://cocopon.github.io/tweakpane/
  24. Thomas D. LaToza and Brad A. Myers. 2011. Visualizing call graphs. In 2011 IEEE Symposium on Visual Languages and Human-Centric Computing (VL/HCC). 117--124. https://doi.org/10.1109/VLHCC.2011.6070388
  25. Sorin Lerner. 2020. Projection Boxes: On-the-Fly Reconfigurable Visualization for Live Programming. In Proceedings of the 2020 CHI Conference on Human Factors in Computing Systems (Honolulu, HI, USA) (CHI ’20). Association for Computing Machinery, New York, NY, USA, 1–7. https://doi.org/10.1145/3313831.3376494
  26. Stanley Letovsky. 1987. Cognitive processes in program comprehension. Journal of Systems and Software 7, 4 (1987), 325--339. https://doi.org/10.1016/0164-1212(87)90032-X
  27. Relationships between Reading, Tracing and Writing Skills in Introductory Programming. In Proceedings of the Fourth International Workshop on Computing Education Research (Sydney, Australia) (ICER ’08). Association for Computing Machinery, New York, NY, USA, 101–112. https://doi.org/10.1145/1404520.1404531
  28. How Domain Experts Create Conceptual Diagrams and Implications for Tool Design. In Proceedings of the 2020 CHI Conference on Human Factors in Computing Systems (Honolulu, HI, USA) (CHI ’20). Association for Computing Machinery, New York, NY, USA, 1–14. https://doi.org/10.1145/3313831.3376253
  29. Bradley N Miller and David L Ranum. 2011. Problem solving with algorithms and data structures using python Second Edition. Franklin, Beedle & Associates Inc.
  30. Robert Nystrom. 2021. Crafting interpreters. Genever Benning.
  31. Nancy Pennington. 1987. Stimulus structures and mental representations in expert comprehension of computer programs. Cognitive Psychology 19, 3 (1987), 295--341. https://doi.org/10.1016/0010-0285(87)90007-7
  32. Reducible. 2019. Reducible. Retrieved September 15, 2022 from https://www.youtube.com/c/Reducible
  33. Steve Ruiz. 2020. Perfect Arrows. Retrieved February 13, 2023 from https://github.com/steveruizok/perfect-arrows
  34. Stuart Russell and Peter Norvig. 2009. Artificial Intelligence: A Modern Approach (3rd ed.). Prentice Hall Press, USA.
  35. Grant Sanderson. 2017. 3Blue1Brown. Retrieved September 15, 2022 from https://www.youtube.com/c/3blue1brown
  36. Jalangi: A Selective Record-Replay and Dynamic Analysis Framework for JavaScript. In Proceedings of the 2013 9th Joint Meeting on Foundations of Software Engineering (Saint Petersburg, Russia) (ESEC/FSE 2013). Association for Computing Machinery, New York, NY, USA, 488–498. https://doi.org/10.1145/2491411.2491447
  37. Algorithm Visualization: The State of the Field. ACM Trans. Comput. Educ. 10, 3, Article 9 (aug 2010), 22 pages. https://doi.org/10.1145/1821996.1821997
  38. OpenDSA: Beginning a Community Active-EBook Project. In Proceedings of the 11th Koli Calling International Conference on Computing Education Research (Koli, Finland) (Koli Calling ’11). Association for Computing Machinery, New York, NY, USA, 112–117. https://doi.org/10.1145/2094131.2094154
  39. The nature of code. D. Shiffman.
  40. B. Shneiderman. 1996. The eyes have it: a task by data type taxonomy for information visualizations. In Proceedings 1996 IEEE Symposium on Visual Languages. 336--343. https://doi.org/10.1109/VL.1996.545307
  41. Elliot Soloway and Kate Ehrlich. 1984. Empirical Studies of Programming Knowledge. IEEE Transactions on Software Engineering SE-10, 5 (1984), 595--609. https://doi.org/10.1109/TSE.1984.5010283
  42. Juha Sorva. 2013. Notional Machines and Introductory Programming Education. ACM Trans. Comput. Educ. 13, 2, Article 8 (jul 2013), 31 pages. https://doi.org/10.1145/2483710.2483713
  43. J.T. Stasko. 1990. Tango: a framework and system for algorithm animation. Computer 23, 9 (1990), 27--39. https://doi.org/10.1109/2.58216
  44. Cognitive design elements to support the construction of a mental model during software visualization. In Proceedings Fifth International Workshop on Program Comprehension. IWPC’97. 17--28. https://doi.org/10.1109/WPC.1997.601257
  45. A Top-Down Approach to Algorithm Animation. Techincal Report CMPT (1994), 94--05.
  46. Using Comics to Introduce and Reinforce Programming Concepts in CS1. In Proceedings of the 52nd ACM Technical Symposium on Computer Science Education (Virtual Event, USA) (SIGCSE ’21). Association for Computing Machinery, New York, NY, USA, 369–375. https://doi.org/10.1145/3408877.3432465
  47. Bret Victor. 2011. Ladder of Abstraction. Retrieved September 15, 2022 from http://worrydream.com/LadderOfAbstraction/
  48. Bret Victor. 2012. Inventing On Principle. Retrieved September 15, 2022 from https://vimeo.com/38272912
  49. vitejs. 2019. Vite. Retrieved February 13, 2023 from https://vitejs.dev/
  50. A. Von Mayrhauser and A.M. Vans. 1995. Program comprehension during software maintenance and evolution. Computer 28, 8 (1995), 44--55. https://doi.org/10.1109/2.402076
  51. WritLarge: Ink Unleashed by Unified Scope, Action, & Zoom. In Proceedings of the 2017 CHI Conference on Human Factors in Computing Systems (Denver, Colorado, USA) (CHI ’17). Association for Computing Machinery, New York, NY, USA, 3227–3240. https://doi.org/10.1145/3025453.3025664
  52. A Brief Survey of Program Slicing. SIGSOFT Softw. Eng. Notes 30, 2 (mar 2005), 1–36. https://doi.org/10.1145/1050849.1050865
  53. Jimkwan Yau. 2018. Sval. Retrieved February 13, 2023 from https://github.com/Siubaak/sval
Citations (9)
View on Semantic Scholar

Summary

We haven't generated a summary for this paper yet.

Ai Sparkles Streamline Icon: https://streamlinehq.com Summarize Now