DSA Logic Visualizer: An Interactive 3D Platform for Data Structures and Algorithm Visualization

DSA Logic Visualizer: An Interactive 3D Platform for Data Structures and Algorithm Visualization

Dr. S. B. Chaudhari

Project Guide Computer Department JSPMs JSCOE Pune, India

Sahil Chand Shaikh

Computer Department JSPMs JSCOE Pune, India

Pathan Aamer Khan

Computer Department JSPMs JSCOE Pune, India

Inamdar Amaan Ashpak

Computer Department JSPMs JSCOE Pune, India

Kurmi Yashraj Dayanath

Computer Department JSPMs JSCOE Pune, India

Abstract – Understanding Data Structures and Algorithms (DSA) is a fundamental component of a well-rounded education in the eld of computer science. Nevertheless, conventional static teaching methodologies often fall short in effectively conveying the dynamic and sequential characteristics inherent in algo- rithmic processes. In response to this challenge, this paper presents the DSA Logic Visualizer, an innovative interactive web- based platform designed to provide real-time, three-dimensional visualizations of JavaScript code that users submit, illustrating how it interacts with various common data structures.

The architecture of this system comprises a Next.js frontend, a Node.js backend equipped with a sandboxed execution engine, and a three-dimensional rendering layer powered by React Three Fiber. The backend employs Abstract Syntax Tree (AST) transformation techniques to automatically integrate trace instru- mentation into user-submitted code. This functionality enables a detailed, step-by-step demonstration of operations performed on a variety of data structures, including Arrays, Linked Lists, Trees, Graphs, Stacks, and Queues, as well as various Sorting and Searching Algorithms.

Evaluation results reveal signicant improvements in compre- hension speed, error detection capability, and overall levels of student engagement when compared with traditional educational approaches. The platform effectively addresses a critical gap in DSA pedagogy by transforming abstract algorithmic concepts into engaging and intuitive visual experiences that enhance learning outcomes.

Index TermsData Structures, Algorithm Visualization, Ab- stract Syntax Tree, React Three Fiber, Sandboxed Execution, 3D Visualization, Computer Science Education, Next.js, Node.js

1. Introduction

   Data Structures and Algorithms (DSA) form the essential foundation of software engineering and computer science education on a global scale. However, the abstract and dy- namic nature of these concepts poses signicant pedagogical challenges. Students frequently nd themselves needing to mentally visualize complex operations such as tree rotations, graph traversals, and recursive sorting, which are notoriously difcult to understand without appropriate visual support.

   Traditional teaching methodologies rely heavily on static diagrams, pseudocode demonstrations, and two-dimensional

   representations. Although these methods serve as useful intro- ductory tools, they often fail to effectively convey the temporal and spatial dynamics inherent in algorithm execution. As a result, a considerable gap exists between a students theoretical understanding and practical implementation skills, leading to inadequate performance in algorithmic problem-solving tasks. The DSA Logic Visualizer seeks to bridge this gap by pro- viding an interactive three-dimensional platform that enables users to input or paste their own JavaScript implementations and observe code execution in real time through animated, step-by-step visualizations. Unlike existing tools that are lim- ited to predened algorithms, the proposed platform supports arbitrary user code through an Abstract Syntax Tree (AST)- based trace injection mechanism, making it extensible and

   applicable to a broad range of DSA topics.

   This paper makes the following major contributions:

   • A comprehensive full-stack architecture that facilitates secure and real-time code execution together with trace generation.

   • A declarative three-dimensional visualization engine that encompasses seven primary categories of Data Structures and Algorithms.

   • A LoopGuard mechanism specically designed to pre- vent the exploitation of innite loops during sandboxed execution.

   • An empirical evaluation demonstrating improved learning outcomes and enhanced student engagement.

2. Related Work

   1. Static and Predened Algorithm Visualizers

      Numerous tools have been developed to tackle the chal- lenges associated with Data Structures and Algorithms (DSA) visualization. One notable example is VisuAlgo [2], developed at the National University of Singapore. The platform provides a wide variety of pre-built animations covering numerous algo- rithms and data structures; however, it does not support user- generated code, thereby limiting its exibility for personalized learning experiences.

      Similarly, the Data Structure Visualizations project devel- oped at the University of San Francisco [1] offers inter- active demonstrations for trees, graphs, sorting algorithms, searching algorithms, stacks, and queues. Nevertheless, these visualizations are restricted to predened examples and do not accommodate arbitrary user implementations.

   2. Code Execution Tracing Tools

      Among the various tools available for code visualization, execution tracing systems have become particularly popular. Existing approaches focus primarily on presenting execution states in textual or tabular forms. Comparative studies on algorithm visualization have highlighted the limitations of such approaches in representing spatial relationships present in complex data structures [4].

      To address these shortcomings, the DSA Logic Visual- izer integrates execution tracing with a fully spatial three- dimensional rendering layer, thereby providing a richer and more intuitive understanding of algorithm behavior.

   3. Active Learning and Visualization Effectiveness

      Research conducted by Ben-Bassat et al. [5] and Becker and Beacham [6] demonstrated that algorithm animation and visualization signicantly improve student performance when learners actively engage with the learning process rather than merely observing passively.

      The DSA Logic Visualizer is designed around this educa- tional principle, enabling learners to write their own code and immediately observe the consequences of their logic within a dynamic three-dimensional environment. Such an approach promotes deeper understanding and improved retention of algorithmic concepts.

   4. 3D Visualization in Education

      Three-dimensional visualization techniques have been widely explored in scientic disciplines where spatial un- derstanding is essential. Foundational work by Hibbard et al. [9] and information visualization frameworks proposed by Chi [10] established the importance of graphical representa- tions for enhancing comprehension.

      However, the application of three-dimensional visualization techniques to Data Structures and Algorithms remains rela- tively unexplored. The present work represents one of the early efforts to employ React Three Fiber and Three.js for interactive algorithm visualization in computer science education.

3. Research Contribution and Novelty

   Positioning

   Existing research indicates that predened visualization systems provide only limited customizability [1], [2], wereas execution tracing tools often lack adequate spatial representa- tions for complex structures [4]. Furthermore, active learner engagement has been shown to signicantly enhance educa- tional outcomes [5], [6]. Three-dimensional visualization tech- niques have also demonstrated their effectiveness in improving spatial understanding across STEM disciplines [9], [10], yet

   such techniques remain largely absent from tools specically designed for Data Structures and Algorithms.

   The DSA Logic Visualizer introduces a novel integration of several important components:

   1. An Abstract Syntax Tree (AST)-based automatic trace injection mechanism capable of supporting arbitrary user code.

   2. A sandboxed execution backend that enforces timeout mechanisms and incorporates loop protection to ensure secure execution.

   3. A declarative three-dimensional scene model that maps runtime trace events directly to components within the spatial visualizer.

   4. A spring-based interpolation mechanism that enables smooth and physically realistic transitions between al- gorithmic states.

   By combining secure execution, runtime tracing, and inter- active three-dimensional visualization within a unied frame- work, the proposed platform provides a more engaging and intuitive learning environment for Data Structures and Algo- rithms.

4. Methodology

   This work presents the DSA Logic Visualizer, a compre- hensive full-stack web platform designed to process user- submitted JavaScript code and generate animated, step-by-step three-dimensional visualizations of data structure operations. The overall processing workow is organized into sequential modules whose interactions are illustrated in Fig. 1.

   1. System Architecture Overview

      The platform follows a three-tier architecture consisting of a Frontend Client (/client), a Backend Execution Server (/server), and a 3D Rendering Engine (/renderer-3d). Each component is implemented as an independent module and communicates through clearly dened REST interfaces.

      Fig. 1. System Architecture of the DSA Logic Visualizer showing frontend, backend, and visualization pipeline.

   2. End-to-End System Pipeline

      The complete processing workow begins when a user sub- mits JavaScript code through the frontend interface. The code is transmitted to the backend execution server, where Abstract Syntax Tree transformation and instrumentation are performed

      TABLE I

      DSA Type to 3D Visualizer Mapping

      Data Type Component 3D Representation

      before secure execution within the sandbox environment. The

      Array / Typed Array

      ArrayVisualizer Labeled cuboid row

      generated trace information is subsequently forwarded to the three-dimensional renderer for interactive visualization.

   3. AST-Based Trace Injection

      Linked List Binary Tree

      Graph (Adjacency List) Stack

      Queue

      LinkedListVisualizer TreeVisualizer GraphVisualizer StackVisualizer QueueVisualizer

      Nodes with arrows Hierarchical graph Force-directed layout Vertical cuboid stack Horizontal lane

      The primary innovation of the DSA Logic Visualizer lies in its ability to visualize arbitrary user code without requiring manual instrumentation. By utilizing Babels @babel/parser and @babel/traverse modules, the

      Sort / Search AlgoVisualizer

      F. Playback Engine

      Animated comparisons

      ASTTransformer performs a depth-rst traversal of the users Abstract Syntax Tree and identies target nodes based on their type, including AssignmentExpression, VariableDeclarator, CallExpression, and BinaryExpression nodes.

      For every identied node, a trace(label,value) call

      is inserted as a sibling statement. These trace calls are dy- namically bound during runtime to a collector function that appends structured snapshot objects containing timestamps, labels, variable names, and serialized values to a global trace array.

      Formally, for a program P consisting of n statements,

      P = {s1, s2,…, sn}

      the transformed program becomes

      P t = {s1, 1, s2, 2,…, sn, n}

      where

      i = trace(labeli, statei)

      captures the runtime state immediately following the exe- cution of statement si.

   4. Sandbox and Loop Guard

      The Sandbox module executes instrumented code inside a Node.js virtual machine environment while enforcing a strict timeout limit of ve seconds. External modules, le system access, and network communication are prohibited to ensure secure execution.

      The LoopGuard mechanism inserts iteration counters at the beginning of loop bodies. Whenever the number of iterations exceeds a congurable threshold of 10,000, execution is ter- minated and a detailed error message is returned to the client. This approach effectively prevents denial-of-service attacks caused by innite loops.

   5. Visualization Mapping

   Each trace snapshot contains a type hint derived from the runtime value. The renderer utilizes this information to determine the appropriate visualizer component. Table I summarizes the mapping between data structures and their corresponding three-dimensional representations.

   The playback engine maintains a cursor index correspond- ing to the current position within the trace array. Navigation controls such as Play, Pause, Next, Previous, and Speed modify the cursor index, causing React to update the scene with the corresponding snapshot.

   Smooth transitions between states are achieved using spring animations provided by react-spring. The interpolation function is given by

   x(t)= xprev + (xnext xprev)f (t)

   where f (t) denotes a critically damped spring function. This formulation produces smooth and physically realistic transitions between algorithmic states.

   G. Hyperparameter Conguration

   All execution, sandbox, and rendering parameters were maintained with consistent default values across the exper- imental environments. Table ?? presents the core system conguration parameters.

5. Implementation Details

   1. Frontend Client (/client)

      The frontend architecture is implemented using Next.js 14 (App Router), a React-based framework that supports server- side rendering and le-based routing. The code editor interface utilizes Monaco Editor, providing syntax highlighting and auto-completion capabilities. State management is handled using Zustand v4, which enables lightweight and reactive updates across components. To avoid server-side rendering conicts associated with WebGL, the three-dimensional ren- derer is loaded dynamically.

   2. Backend Execution Server (/server)

      The backend infrastructure is developed using Node.js and Express 4, strengthened by Helmet middleware and per-IP rate limiting to ensure secure operation. The execution pipeline consists of three major stages:

      1. AST Transformation: The ASTTransformer parses and instruments user code using Babel 7, injecting trace calls to capture runtime information.

      2. Loop Guard: The LoopGuard mechanism inserts it- eration counters into loops to detect excessive execution and prevent innite loops.

      3. Sandboxed Execution: The transformed code is exe- cuted inside a Node.js virtual machine environment with timeout restrictions and a limited global scope, ensuring safe execution.

         The generated trace array is serialized into JSON format and transmitted to the frontend for visualization.

   3. 3D Rendering Engine (/renderer-3d)

   The visualization engine is built using React Three Fiber (R3F) v8, which acts as a React renderer for Thee.js. Each Data Structure and Algorithm category is implemented as a declarative component within the visualization layer.

   Scene management, including camera positioning, lighting, and environmental effects, is coordinated through dedicated scene modules. Smooth transitions between successive execu- tion states are achieved using spring-based interpolation tech- niques, resulting in realistic and visually appealing animations. The renderer provides interactive camera controls that allow users to rotate, zoom, and inspect structures from multiple viewpoints. This capability enables learners to understand the spatial relationships among nodes and enhances the inter-

   pretability of algorithm execution.

   The modular design of the rendering engine allows addi- tional data structures and algorithms to be integrated without modifying the underlying architecture, thereby improving scal- ability and maintainability.

6. Results

   This section presents the performance metrics of the system and the outcomes of the user study conducted for the DSA Logic Visualizer, which was evaluated with undergraduate Computer Engineering students at JSPMs JSCOE, Pune.

   1. User Study Setup

      A controlled user study was conducted involving 40 un- dergraduate Computer Engineering students. The participants were divided into two groups of twenty students each. The control group utilized traditional learning methods based on textbook diagrams and lecture slides, whereas the experimental group employed the DSA Logic Visualizer.

      Both groups studied the following algorithms:

      • Bubble Sort

      • Binary Search

      • Binary Tree Insertion

      • Linked List Reversal

      • Breadth-First Search (BFS)

   2. Comprehension Speed

      Students belonging to the experimental group required an average of 8.4 minutes to understand each algorithm, whereas students in the control group required 14.2 minutes. This corresponds to an improvement of approximately 40.8% in comprehension speed.

   3. Error Identication Rate

      When presented with buggy code samples, students using the visualizer achieved an average error identication rate of 82%, compared with 61% for the control group. This represents an improvement of 21 percentage points, which can be attributed to the ability to inspect intermediate execution states and directly visualize incorrect state transitions.

   4. System Performance Metrics

      Backend performance was evaluated under concurrent load conditions using Apache JMeter. The obtained results are summarized in Table ??.

      Fig. 2. Runtime visualization of Binary Search demonstrating synchronized code execution, 3D rendering, and trace logging in the DSA Logic Visualizer.

   5. Student Satisfaction

      Post-study questionnaires based on a ve-point Likert scale revealed a mean satisfaction score of 4.3/5. Approximately 90% of the participants agreed that three-dimensional visual- ization simplied the understanding of abstract concepts, while 85% expressed a preference for using the platform in future DSA courses.

   6. Key Observations

   1. Improved Comprehension Speed: The observed 40.8% reduction in comprehension time conrms that real-time, step-by-step three-dimensional execution tracing reduces the cognitive effort required to understand algorithmic behavior.

   2. Higher Error Detection Capability: Visual inspection of intermediate states proved more effective than mental simulation, leading to a 21 percentage-point increase in error identication accuracy.

   3. Strong User Engagement: High satisfaction scores and strong user preference indicate that the platform promotes learner engagement and motivation.

   4. Reliable Performance: Response times below 500 ms for up to 50 concurrent users, together with robust timeout and loop protection mechanisms, demonstrate the stability and reliability of the proposed system.

7. Limitations and Future Work

   Although the platform demonstrates strong performance and promising educational benets, several limitations remain. The ASTTransformer currently lacks the capability to process all JavaScript constructs effectively. In particular, complex patterns such as generator functions, async/await chains, and destructuring assignments require additional traversal rules to ensure complete instrumentation.

   Furthermore, the force-directed graph layout may experi- ence convergence instability when applied to large graphs, particularly those containing more than fty nodes. This observation highlights the need for further investigation into deterministic layout algorithms, such as Sugiyama-style hier- archical layouts, to improve stability and readability.

   At present, the implementation is limited to JavaScript. Extending support to Python and Java would signicantly enhance the applicability of the platform in educational en- vironments that teach Data Structures and Algorithms using multiple programming languages.

   Moreover, the existing three-dimensional renderer requires a desktop browser with WebGL 2.0 support. Consequently, the introduction of a lightweight two-dimensional fallback mode for mobile devices remains an important objective.

   Future work will focus on the following directions:

   • Incorporating multi-language support for Python and Java.

   • Enabling collaborative real-time editing through WebSocket-based communication.

   • Developing a mobile-compatible two-dimensional render- ing mode.

   • Conducting formal classroom integration studies to eval- uate long-term retention and learning outcomes.

   • Extending support to additional data structures and algo- rithm categories.

8. Conclusion

This paper presents the DSA Logic Visualizer, an interactive web-based platform for three-dimensional visualization of data structures and algorithms through user-submitted code. The system architecture, consisting of a Next.js frontend, a Node.js sandboxed execution backend, and a React Three Fiber ren- dering engine, demonstrates the feasibility of integrating real- time code execution, Abstract Syntax Tree (AST)-based trace injection, and interactive three-dimensional animation into a unied and effective educational platform.

Experimental evaluation revealed that the proposed system signicantly improves learning outcomes, achieving a 40.8% reduction in comprehension time, a 21 percentage-point im- provement in error identication accuracy, and an average student satisfaction score of 4.3 out of 5 when compared with conventional teaching approaches.

The platform proves particularly benecial for visual learn- ers and for concepts that possess strong spatial characteristics, including tree traversals, graph exploration, and recursive algo- rithms. By transforming abstract computational processes into

intuitive and interactive visual experiences, the DSA Logic Visualizer contributes to the growing body of evidence sup- porting active and visualization-driven learning methodologies in computer science education.

Furthermore, the modular architecture of the platform en- ables straightforward extension to additional programming lan- guages, data structures, and collaborative capabilities, making it a practical and scalable solution for modern Data Structures and Algorithms pedagogy.

References

1. D. Galles, Data Structure Visualizations Department of Computer Science, University of San Francisco, 2024.

2. S. Halim, VisuAlgo: Visualising Data Structures and Algorithms through Animation, National University of Singapore, 2024.

3. Y. Zhang, Application of Algorithm Visualization Techniques in Teach- ing Computer Data Structure Course, Applied Mathematics and Non- linear Sciences, vol. 9, no. 1, pp. 112, 2024.

4. F. Vateha and P. Hvizdos, Comparative Visualization of Algorithms and Data Structures, Computing and Informatics, vol. 44, no. 2, pp. 336 360, 2025.

5. A. Ben-Bassat, A. Gelbard, and N. Korin, The Efcacy of Animation and Visualization in Teaching Data Structures and Algorithms, Educa- tional Technology Research and Development, vol. 72, 2024.

6. K. Becker and M. Beacham, A Tool for Teaching Advanced Data Structures to Computer Science Students: An Overview of the BDP System, in Proceedings of the International Conference on Computer Education, 2001.

7. P. Ruiyang et al., Interactive Data Structure and Algorithm Visualiza- tion Based on Large Language Models and Agent Frameworks, Journal of East China Normal University, vol. 57, no. 5, 2025.

8. S. Patil, R. Kumar, and P. Sharma, Data Structure and Algorithm Visualization, International Research Journal of Modernization in Engineering Technology and Science, vol. 4, no. 4, pp. 232235, 2022.

9. W. Hibbard, C. Dyer, and B. Paul, Display of Scientic Data Structures for Algorithm Visualization, in Proceedings of IEEE Visualization,

   pp. 139146, 1992.

10. E. H. Chi, A Framework for Information Visualization Spreadsheets, Ph.D. dissertation, University of Minnesota, Minneapolis, MN, USA, 1999.

11. A. Sharma and P. Gupta, AI-Powered Data Structure and Algorithm Visualization Using Large Language Models, International Journal of Engineering Research & Technology, vol. 15, no. 2, 2026.