Ask HN: Help on Visualizing DSA Code Execution
Hey folks,
I'm working on a project to help beginners learn Data Structures & Algorithms (DSA) by visualizing code execution. The idea is like LeetCode, but when you run your code, it shows you animations of the algorithm at work.
For example, if a user writes a linear search algorithm on an array [1, 2, 3, 4, 5] to find 3, they’ll see the animation step through each element, showing how the search works.
The Challenge I can parse the code into an Abstract Syntax Tree (AST) to understand its structure, but here’s the tricky part:
How do I track loop iterations and conditionals in real-time? How do I capture execution flow so I can animate it? Possible Solutions Debugger Integration: Can I use something like a debugger API (Java JDI or Python's pdb) to track execution? Code Instrumentation: Would logging or monitoring help in tracking iterations and steps? Custom Interpreter: Is there a better way to simulate execution step-by-step and gather data for animation?
I can't remember where I saw it, but it was a split-screen view of the code being highlighted as it ran line by line, with the result being printed out on the right-hand side of the screen.
It's sort of like this: https://visualgo.net/en/sorting
similar to pythontutor just with better visuals
> Can I use something like a debugger API (Java JDI or Python's pdb) to track execution?
This seems like the right way to me. The hard part is really figuring out which things to track. Then as you step through, you just check their current state and update the display accordingly.