https://github.com/amoshnin/r-recursion.tree.visualizer
⚡️ Tool for visualizing generic recursive function written in JavaScript/Python. Functions are animated using tree structures. It aids identification of function time complexity & call stack depth
https://github.com/amoshnin/r-recursion.tree.visualizer
algorithms recursion recursion-tree recursion-visualizer visualization
Last synced: 7 months ago
JSON representation
⚡️ Tool for visualizing generic recursive function written in JavaScript/Python. Functions are animated using tree structures. It aids identification of function time complexity & call stack depth
- Host: GitHub
- URL: https://github.com/amoshnin/r-recursion.tree.visualizer
- Owner: amoshnin
- License: mit
- Created: 2021-09-03T19:58:48.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2021-09-05T11:59:30.000Z (about 4 years ago)
- Last Synced: 2025-01-19T21:37:23.541Z (9 months ago)
- Topics: algorithms, recursion, recursion-tree, recursion-visualizer, visualization
- Language: TypeScript
- Homepage:
- Size: 1.73 MB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Recursion Tree Visualizer
Tool for visualizing any generic recursive function written in JavaScript or Python.
## Overview
Watch the [demo video](https://youtu.be/VV9sbFn8IoY) on my [YouTube channel](https://www.youtube.com/channel/UC2Q2qLKUSXfPS_mxrtqvixA)
> 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):
### Folders structure
- `packages/web`: react user interface.
- `packages/server`: server to execute user-defined code remotely.
## Local development
### Web
In the `packages/web` directory, run:
```bash
# to install all dependencies
$ npm install
# to run the app on localhost
$ npm run start
```
### Server
In the `packages/server` directory, run:
```bash
# to install all dependencies
$ npm install
# to run the app on localhost
$ npm run serve
```
## Acknowledgements
Thanks to [Drawing Presentable Trees](https://llimllib.github.io/pymag-trees/#foot5) and [Improving Walker's Algorithm to Run in Linear Time](http://dirk.jivas.de/papers/buchheim02improving.pdf) articles I implemented Reingold-Tilford's algorithm to position each node of the tree on a 2D plane in an aesthetically pleasing way.
## Compatibility
For a better experience, I recommend using a chromium-based browser like Chrome or Edge.