Animation of Algorithms

This repository contains the animations of algorithms - BFS, DFS and Minimum Spanning Tree. All of the animations are done in JavaScript using a js framework - Cytoscape.js.

Instructions

How to use these animations? It is simple. Follow the steps below:

Use animation for BFS and DFS

• Open DFSBFS.html file.
• Enter the start vertex
• Click 'Run BFS' or 'Run DFS' to see the animation for the algorithm on the default graph.
• If you want to choose a different start vertex or run another algorithm, click 'Clear'. It will reload the page.

Use animation for Minimum Spanning Tree

• Open 'MST.html' file.
• Just click on 'Run Kruskal'. It will show animation for minimum spanning tree using Kruskal's algorithm.

Create new graphs

• To create new graphs, you need to enter new edges in the textarea provided. (Use 'Clear' button to clear the text in the field if it is present.)
• Click on 'Remove Graph' to delete the default graph.
• After you have added the edges in the textarea. Click on 'Create Graph'. It will create the graph for you.

Format for entering edges

• Use the following format for entering edges in BFS or DFS.
• Each edge is added in new line. You just need to enter the start vertex and end vertex in each line to determine the edge.

a b
b c
c d
d a

• This will create a new graph with following edges: ab, bc, cd and da.
• Use the following format for entering edges in MST.
• Each edge is added in new line. You just need to enter the start vertex, end vertex and weight in each line to determine the edge.

a b 1
b c 3
c d 2
d a 4

• This will create a new graph with following edges: ab, bc, cd, da with weights: 1, 2, 3, 4 respectively.

File is not working properly

In that case, make sure that you have downloaded the file properly. Main file that is used in the algorithms is 'cytoscape.min.js' which is available in 'node_modules -> cytoscape -> dist -> cytoscape.min.js'.

Icon available on my portfolio!

Icons made by Becris from www.flaticon.com