theabhishekavi/sorting-visualizer

Sorting Algorithms Visualizer

JavaScript

Sorting Visualizer

Responsive visualizer built using React for popular algorithms

See it in action

This repo is an attempt to help in learning popular sorting algorithms by visualization

Helps to

understand the working of sorting algorithm
check total swaps required
check total comparisions
compare algorithms side by side
know the time taken (time is just an approximate unit for comparision)

Features

Sort any given array of 3 digits positive integers
Alter the speed of execution
Start, pause and reset the execution
Generate random array of numbers of sorting

Technologies

React with hooks
Styled components + React material (css and component libraries)
Zustand (hooks based state management library)
Vite (Bundler)

Features built using

Animations are done using pure CSS and uses FLIP principle
Flex is used for array display and manipulation of positions (flex order property)
JavaScript async generators are used heavily for the controlled execution of algorithms

Run in your local

git clone https://github.com/sadanandpai/sorting-visualizer.git
npm install (after navigating inside the directory)
npm run dev

Feel free to use this project and modify for your needs.

Raise a PR for contributions / improvments / bug fixes.