Giter VIP home page Giter VIP logo

ayush-tiwari57 / algorithm-visualizer Goto Github PK

View Code? Open in Web Editor NEW
68.0 3.0 29.0 339 KB

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 People

Contributors

anubhavitis avatar ayush-tiwari57 avatar esla-ahme avatar mallikarjun2000 avatar mohilkhare1708 avatar namratapdr avatar stm3900 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

algorithm-visualizer's Issues

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.

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:

  1. Go to Algorithm Visualizer page
  2. Click on reload

Expected behavior

  1. The bars reset into random order.

Screenshots
image

Desktop (please complete the following information):

  • OS: Windows 10 Home
  • Browser: Chrome
  • Version: Latest

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

  1. Go to https://servermonk.github.io/Algorithm-Visualizer/
  2. Click on Path Algorithms
  3. Open "Responsive Design Mode" from the Inspect Element.
  4. 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:
Screenshot from 2020-09-30 19-49-22
Screenshot from 2020-09-30 19-50-52

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

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.

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 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.

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:

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

Expected behavior
It should visualize DFS/BFS like A*

Desktop :

  • OS: Win10
  • Browser: Chrome
  • Version: 87.0.4280.66

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.

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:
Screenshot (169)
Screenshot (170)

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

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.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.