Download
Inspired by Grokking Algorithms and python-execution-trace, this project aims to reveal the mechanics behind algorithms via interactive visualizations of their execution. Visual representations of variables and operations augment the control flow, alongside actual source code. You can fast forward and rewind the execution to closely observe how an algorithm works. The same code that is displayed next to the illustration is also decorated using babel-plugin-trace-execution and executed to record the context at every step. Literally the same source file. Going back and forth between function execution (and call stack when algorithm uses recursion) is effortless. So is pausing and resuming. This project uses styled-jsx, but takes the idea of CSS-in-JS even further. Sizing, positioning and transition offsets are computed by JS, all before elements hit the DOM.
Features
- Edge cases and optimizations are beyond the scope of this project
- Visual representations of variables and operations augment the control flow
- You can fast forward and rewind the execution to closely observe how an algorithm works
- Visualizations are easy to follow
- The featured implementations are chosen for their simplicity
- Interactive algorithm visualizations
Project Samples
