ayush-tiwari57 / algorithm-visualizer Goto Github PK

Visualize working of famous algorithms, Currently Implemented Path Finding (Dijkstra's, A Star, BFS, DFS) Sorting (Bubble, Insertion, Selection, Merge, Quick, Heap)

Home Page: https://vizalgo.netlify.app/

License: MIT License

HTML 21.43% JavaScript 56.56% CSS 22.01%

graph-visualizer pathfinding dijkstra algorithm sort algorithm-visualiser dijkstra-algorithm bubble-sort astar-algorithm astar-pathfinding

algorithm-visualizer's Introduction

Algorithm-Visualizer

A web application, that lets you play with complex algorithms. User's gets to visualize working of algorithms, at different speeds, and different setups.

Algorithms Supported

Graph Algorihtms
- Dijkstra's path finding algorihtm.
- A-Star path finding algorihtm.
- Breadth First Search (BFS) traversal algorihtm.
- Depth First Search (DFS) traversal algorithm.
Sorting Algorihtms
- Bubble Sort
- Selection Sort
- Insertion Sort
- Quick Sort
- Merge Sort
- Heap Sort

Getting Started

Click here to get directed to the hosted page.

GitHub Repository Structure

S.No.	Branch Name	Purpose
1.	master	contains the main code
2.	beta	contains all development code

Note: We're not accepting any changes in the master branch, make PRs in the beta branch only.

Slack Discussion Channel for contributors:

Technology Stack Used

FrontEnd Design: HTML & CSS
Algorithms and animations: JavaScript
Server hosting: NodeJS
Web hosting: Netlify

Project Setup

Fork and clone the Repo by typing the following commands in the terminal

$ git clone https://github.com/your-username/Algorithm-Visualizer.git
$ cd Algorithm Viusalizer

Change Branch using:

$ git checkout beta

To open the site you can either use Live Server of VS-Code or similar tools, or you need to install Node.js
To open site on Localhost: - Install node dependencies using:
```
$ npm install
```
- To start the server, type:
```
$ node server
```
- Then on your browser type http://localhost:3000/
Make changes to the code and save your changes
Commit your changes using:

$ git commit -m "add any comment"

Push the changes to the forked repository
Navigate to the original repository and make a pull request

Project administrators ✨

_{Anubhav Singhal}

_{Ayush Tiwari}

Thank You

Made with Love ❤️️ & Passion 🙏.

Like the project?? Give us a star ⭐. Have a nice day!

algorithm-visualizer's People

Contributors

Stargazers

Watchers

algorithm-visualizer's Issues

Add Quick sort algorithm to the visualizer.

Description
In the sorting algorithm page, the Quick Sort algorithm is missing. Add proper algorithms there.

The solution to be accepted
1.) In Quick_sort.js, Complete function selection(divs, height) with appropriate use for the functions provided.
2.) Used the same colors to fill up the division as used in bubble_sort.js.
3.) The visualizer is working properly for selection sorting.

Additional context
Use Bubble_sort.js for reference.
NOTE: We're not accepting any changes in the master branch, make PRs in the beta branch only.

Add Insertion Sort algorithm to the visualizer.

Description
In the sorting algorithm page, the Insertion Sort algorithm is missing. Add proper algorithms there.

Solution to be accepted
1.) In Insertion_sort.js, Complete function selection(divs, height) with appropriate use for the functions provided.
2.) Used the same colors to fill up the division as used in bubble_sort.js.
3.) The visualizer is working properly for selection sorting.

Additional context
Use Bubble_sort.js for reference.
NOTE: We're not accepting any changes in the master branch, make PRs in the beta branch only.

Add Selection Sort algorithm to the sorting visualizer

Description
In the sorting algorithm page, the Selection Sort algorithm is missing. Add proper algorithms there.

Solution to be accepted
1.) In selection_sort.js, Complete function selection(divs, height) with appropriate use for the functions provided.
2.) Used the same colors to fill up the division as used in bubble_sort.js.
3.) The visualizer is working properly for selection sorting.

Additional context
Use Bubble_sort.js for reference.
NOTE: We're not accepting any changes in the master branch, make PRs in the beta branch only.

DFS and BFS not working

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

Go to: https://vizalgo.netlify.app/
Click on: Path Algorithms
Scroll down to 'BFS' or 'DFS' from Path Algorithm
Click 'START'
See error

Expected behavior
It should visualize DFS/BFS like A*

Desktop :

OS: Win10
Browser: Chrome
Version: 87.0.4280.66

Reload Button clears the bars to be sorted

Describe the bug
The reload buttons clear the bars to be sorted by the sorting algorithm

To Reproduce
Steps to reproduce the behavior:

Go to Algorithm Visualizer page
Click on reload

Expected behavior

The bars reset into random order.

Screenshots

Desktop (please complete the following information):

OS: Windows 10 Home
Browser: Chrome
Version: Latest

Add Heap sort algorihtm to the visualizer.

Description
In the sorting algorithm page, the Heap Sort algorithm is missing. Add proper algorithms there.

The solution to be accepted
1.) In Heap_sort.js, Complete function selection(divs, height) with appropriate use for the functions provided.
2.) Used the same colors to fill up the division as used in bubble_sort.js.
3.) The visualizer is working properly for selection sorting.

Additional context
Use Bubble_sort.js for reference.
NOTE: We're not accepting any changes in the master branch, make PRs in the beta branch only.

Add Merge sort algorithm to the visualizer.

Description
In the sorting algorithm page, the Merge Sort algorithm is missing. Add proper algorithms there.

The solution to be accepted
1.) In Merge_sort.js, Complete function selection(divs, height) with appropriate use for the functions provided.
2.) Used the same colors to fill up the division as used in bubble_sort.js.
3.) The visualizer is working properly for selection sorting.

Additional context
Use Bubble_sort.js for reference.
NOTE: We're not accepting any changes in the master branch, make PRs in the beta branch only.

Add a feature to let user move the 'S' and 'E'

In my case, I wasn't able to move 'S' and 'E' according to my test case. So if this feature isn't available now then add this feature to let the user move the 'S' and 'E' to any node in the grid.

Design a better homepage for the app.

Is your feature request related to a problem? Please describe.
Make a better main page than the current one.

Describe the solution you'd like
The page must contain the logo and two cards:

one for graph algorithms which will direct to the Graph Algorithms page
one for sorting algorithms which will direct to the Sorting Algorithms page

ScreenShots
The current main page looks like this:

Additional context
NOTE: We're not accepting any changes in the master branch, make PRs in the beta branch only.

Make website responsive

Describe the bug
The application gives a lot of display error while adjusting over different sizes of screen. Some of them are:
1.) Textual overlapping in nodes at low resolution.
2.) Slide bar overlapping at different resolutions.

What to do
Fix media queries to make the website responsive.

To Reproduce

Go to https://servermonk.github.io/Algorithm-Visualizer/
Click on Path Algorithms
Open "Responsive Design Mode" from the Inspect Element.
See errors on different resolutions.

Expected behavior
1.) Alignments should be maintained.
2.) Nodes of grids get properly visible over every resolution.
3.) No overlapping elements.

Screenshots
Some example screenshots:

Desktop (please complete the following information):

OS: All
Browser: All
Version: All

Smartphone (please complete the following information):

Device: All
OS: All
Browser: All
Version: All

Additional Context
NOTE: We're not accepting any changes in the master branch, make PRs in the beta branch only.

Connect with us
Discord Server: https://discord.gg/JbpCWb

ayush-tiwari57 / algorithm-visualizer Goto Github PK

algorithm-visualizer's Introduction

Algorithm-Visualizer

Algorithms Supported

Getting Started

GitHub Repository Structure

Technology Stack Used

Project Setup

Project administrators ✨

Thank You

algorithm-visualizer's People

Contributors

Stargazers

Watchers

Forkers

algorithm-visualizer's Issues

Recommend Projects

Recommend Topics

Recommend Org