Tool for visualizing any generic recursive function written in JavaScript or Python.

Watch the demo video on my YouTube channel

Recursion is a concept that is best understood through visualization. This visualization tool written in TypeScript (with React and Node JS Express), will allow you to see visualization of different kinds of recursions. For simplicity, I chose to animate recursive functions using trees.

Properties of the recursion tree visualizations are:

• Each node represents a single recursive function call.
• The height of the recursion tree is the depth of our function call stack (n).
• The rate of change of the tree’s width represents the time complexity of our function (m):

• packages/web: react user interface.
• packages/server: server to execute user-defined code remotely.

In the packages/web directory, run:

# to install all dependencies
$ npm install

# to run the app on localhost
$ npm run start

In the packages/server directory, run:

# to install all dependencies
$ npm install

# to run the app on localhost
$ npm run serve

Thanks to Drawing Presentable Trees and Improving Walker's Algorithm to Run in Linear Time articles I implemented Reingold-Tilford's algorithm to position each node of the tree on a 2D plane in an aesthetically pleasing way.

For a better experience, I recommend using a chromium-based browser like Chrome or Edge.