kelaompachai / AlgoGoggles

Visualization of Sorting Algorithms

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Sorting Algorithm Visualizer

Description

A Sorting Algorithm Visualizer that provides an interactive platform to observe and comprehend the functioning of four popular sorting algorithms: Merge Sort, Bubble Sort, Selection Sort, and Quick Sort. The visualizer incorporates a speed slider, enabling users to adjust the animation speed, and it highlights the elements that are currently being switched during the sorting process.

Technologies

Typescript MongoDB Node.JS Express React ReactRouter Jest Webpack npm HTML5 CSS

Demo

MergeDemo

Features

  • Merge Sort: An efficient divide-and-conquer algorithm that recursively divides the array into halves, sorts them, and then merges the sorted halves.

  • Bubble Sort: A simple comparison-based algorithm that repeatedly steps through the list, compares adjacent elements, and swaps them if they are in the wrong order.

  • Selection Sort: An intuitive sorting algorithm that repeatedly selects the minimum element from the unsorted portion of the array and swaps it with the first unsorted element.

  • Quick Sort: An efficient divide-and-conquer algorithm that partitions the array into smaller segments, sorts each segment, and combines them to achieve a fully sorted array.

  • Speed Slider: Allows users to adjust the speed of the sorting animation to better visualize the algorithm's behavior.

  • Element Highlighting: Highlights the elements that are currently being switched, providing a clear visual representation of the sorting process.

Login Page

MergeDemo

How to Contribute

  1. Fork the Project

  2. Create your Feature Branch based off of Dev

  • git checkout -b feature/NewFeature
  1. Commit your Changes
  • git commit -m 'What was changed: Description of the NewFeature'
  1. Push to the Branch
  • git push origin feature/NewFeature
  1. Open a Pull Request (from feature/NewFeature to dev)

Progress

Feature Status
Additional Sorting Algorithms ⏳
Highlighting of elements after completion ⏳
Increase Test Coverage πŸ™πŸ»
Addtional Styling πŸ™πŸ»
  • βœ… = Ready to use
  • ⏳ = In progress
  • πŸ™πŸ» = Looking for contributors

License

By contributing, you agree that your contributions will be licensed under Sorting Algorithm Visualizer's MIT License.

back to top

About

Visualization of Sorting Algorithms


Languages

Language:TypeScript 87.7%Language:JavaScript 8.5%Language:CSS 2.6%Language:HTML 1.2%