Illustrated Algorithms

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.