Sorting Visualizer

Fascinated with DS and various sorting algorithms?!!

Well, welcome to the Sorting Visualizer! This application was created out of my fascination with sorting algorithms and the desire to provide a dynamic visualization of their functionality. I hope you find as much enjoyment in exploring and interacting with this visualization tool as I did when developing it. To experience it firsthand, please access the Sorting Visualizer here (we recommend using Google Chrome for the best experience):

This web application provides a visual representation of various sorting algorithms, allowing users to observe how different algorithms work and understand their sorting efficiency. The following sorting algorithms are visualized in this application:

• Bubble Sort
• Selection Sort
• Insertion Sort
• Quick Sort
• Merge Sort

Each algorithm is implemented as an asynchronous function that takes an array of DOM element objects as a parameter and sorts these elements in-place, in ascending order. The visualization is achieved using custom-documented APIs for rendering and color-coding, making it easier to follow the sorting process step by step.

Getting Started

To get started with the Sorting Visualizer, simply visit the web page hosted on Firebase.

Prerequisites

You don't need to install anything to use the Sorting Visualizer. Ensure you have a modern web browser to access the application.

Features

• Visualize sorting algorithms in real-time.
• Understand how different sorting algorithms work.
• Customize the array size and sorting speed.
• Clear visualization of comparisons and swaps.

Usage

1. Visit the Sorting Visualizer website.
2. Choose a sorting algorithm from the dropdown menu.
3. Adjust the array size and sorting speed using the sliders if desired.
4. Click the "Generate New Array" button to create a new array of elements.
5. Click the "Sort" button to start the visualization.
6. Watch the sorting algorithm in action, with color-coded animations.

Development

To contribute to this project, follow these steps:

1. Clone this repository to your local machine:

git clone https://github.com/Omegaconstant/sorting-visualizer.git

2. Open the project directory in your code editor.

3. Make your changes or improvements to the codebase.

4. Test your changes locally by opening index.html in a web browser.

5. If you're satisfied with your changes, create a pull request to propose your changes for review.

Structure

• index.html: The main HTML file that contains the structure of the web application.
• style.css: The CSS file that styles the application.
• scripts/: This folder contains JavaScript files for each sorting algorithm.
• scripts/sort-utils.js: Utility functions used by sorting algorithms.
• firebase.json: Configuration file for Firebase deployment.
• README.md: The README file you are currently reading.

Deployment

This project is deployed using Firebase Hosting. You can deploy your own version by following the Firebase Hosting documentation.

Acknowledgments

Special thanks to Firebase for providing hosting services for this project.

Feel free to contribute to this project, report issues, or suggest improvements. Happy sorting! 🚀