https://github.com/subhash3/sorting-visualizer
Clean visualization of all sorting algorithms
https://github.com/subhash3/sorting-visualizer
reactjs sorting-algorithms sorting-visualization typescript
Last synced: 18 days ago
JSON representation
Clean visualization of all sorting algorithms
- Host: GitHub
- URL: https://github.com/subhash3/sorting-visualizer
- Owner: Subhash3
- Created: 2021-07-05T05:42:39.000Z (almost 5 years ago)
- Default Branch: main
- Last Pushed: 2021-07-22T07:02:54.000Z (almost 5 years ago)
- Last Synced: 2025-04-25T20:02:55.759Z (about 1 year ago)
- Topics: reactjs, sorting-algorithms, sorting-visualization, typescript
- Language: TypeScript
- Homepage: https://subhash3.github.io/sorting-visualizer/
- Size: 1.77 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Sorting Visualizer
[Playground](https://subhash3.github.io/sorting-visualizer/)
### Algorithms covered
- Bubble Sort
- Selection Sort
- Insertion Sort
- Merge Sort
- Quick Sort
- Heap Sort
`NOTE: THIS PROJECT IS NOT MEANT TO COMPARE THE PERFORMANCE OF THE SORTING ALGORITHMS. IT IS DESIGNED TO SHOW CLEARLY HOW AN ALGORITHM WORKS. SO, AN ALGORITHM WITH O(N^2) COMPLEXITY MAY PERFORM BETTER THAN THE ONE WITH O(N LOGN) COMPLEXITY DUE TO THE WAY THE ANIMATIONS ARE DONE INTERNALLY!.`
### Technologies Used
- ReactJs
- Typescript
- Sass
- Material UI
#### ToDo
- [x] Bubble Sort
- [x] Sorting algo
- [x] Convert the colors into a context to aviod updating it in every render Component.
- [x] Merge array and colors and provider them together are barsInfo
- [x] Selection Sort
- [x] Insertion Sort
- [x] Merge Sort
- [x] Quick Sort
- [x] Heap Sort
- [x] Add a slider to change the speed of the sorting process.
- [ ] Add a stop button to stop the sorting process.
- [x] Disable all the pointer events (Except on the stop button) when the sorting is happening.
##### Feel free to contribute.