Optic Algo

Make your algorithm learning journey easier with Algorithm Visualizations

Motivation : We all gave the GATE examination and wouldn't it be so much better if we could visualize the algorithms we read. The concepts would stick better in our brains. We will learn faster and remember the method forever (or at least hopefully until the exam). After an informal poll of fello masters students, we found that most students faced difficulties in path finding algorithms. All this motivated us to implement this project of algorithm visualizations.

Tagline: Watch and Learn!

Project by

Piyush Singh Pasi, Kushagra Shandilya, Vedant Singh

Features

• Easy to use
• Easy to follow
• Homepage to find all the algorithms in one place
• Accurate output
• Dynamic to user input (nodes, links and weights)
• Highlighted code and associated node in graphs and linked list

Technology Stack

• HTML
• CSS
• JavaScript + jQuery
• D3.js
• Cytoscape.js
• Python Flask

Deliverables

• Easy to use ✔
• Accurate output ✔
• Dynamic to user input (nodes, links and weights) ✔
• Highlighted code and associated node in graph and linked list ✔
• Implementation of Linked list: Reversal ✔
• Implementation of Dijkstra: Shortest path ✔
• Implementation of BST: Insertion ✔

Software Requirements

• Google Chrome or any other common internet browser
• Flask

Hardware Requirements

We recommend an average powered system, not more than 5 years old.

• 1.9 GHz x64-bit Dual Core Processor
• 2 GB Ram
• Monitor with minimum resolution of 1024*768

How to operate

Create virtual environment

$ python3 -m venv venv

Activate venv and install requirements (flask)

$ source venv/bin/activate (for linux)
$ pip install -r requirements.txt

Run flask

Go to project folder then,
$ export FLASK_APP=app
$ flask run

Open http://127.0.0.1:5000/ on browser

Or

Go to https://optic-algo.herokuapp.com/ on browser

Stakeholders of the product/service

Teachers, instructors, students and all those interested in learning algorithms.

Path to Code Documentation

For javascript: /docs/index.html
For python: docs_py/build/html/index.html

References

https://d3js.org/

https://www.softwaretestinghelp.com/d3-js-data-visualization-tutorial/

https://codersguidebook.com/how-to-build-a-website/display-example-code-on-website

https://jquery.com/

https://js.cytoscape.org/

https://www.digitalocean.com/community/tutorials/js-binary-heaps

http://alexkatz.me/posts/binary-search-tree/

http://bl.ocks.org/sdjacobs/3900867adc06c7680d48

https://bl.ocks.org/mpmckenna8

http://bl.ocks.org/mayblue9/e5b256b077ab6fa226f045b8c187ac1d