Sorting Visualizer

A web application that visualizes the inner workings of various sorting algorithms. This project is designed to help users understand how different sorting algorithms operate and perform under different conditions.

Implemented Algorithms

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

Features

Colored Representation of Sorting Steps

Each step of the sorting process is color-coded to enhance visual understanding:

• Blue: Default state
• Yellow: Elements currently being compared
• Red: Elements identified as being in the wrong position
• Green: Elements correctly placed in the sorted section

Controls for Visualization

• Speed Control: Adjust the speed of the visualization with 5 different speed levels.
• Data Size Control: Customize the size of the data set being sorted.
• Generate New Data: Randomly generate a new data set for sorting.

Time and Space Complexity

The time and space complexities of the currently visualized algorithm are displayed in real-time, providing an educational insight into algorithm efficiency.

Live Demo

Check out the live version of the Sorting Visualizer: Sorting Visualizer Live

Responsive Design

The website is fully responsive and optimized for devices of all sizes, ensuring a seamless user experience whether on a desktop, tablet, or mobile device.

Technologies Used

• HTML5: Structuring the web application
• CSS3: Styling the application with a focus on responsiveness and aesthetics
• JavaScript: Implementing sorting algorithms and controlling the visualization

How to Use

1. Select Algorithm: Choose the sorting algorithm you wish to visualize from the provided buttons.
2. Adjust Settings: Use the range inputs to control the size of the array and the speed of the visualization.
3. Generate New Array: Click the "Generate New Array!" button to create a new random data set for sorting.
4. Start Visualization: Click on the algorithm button to start the visualization.

Files and Directories

• index.html: The main HTML file that structures the application.
• css/: Contains the style.css file for styling the web application.
• scripts/: Contains JavaScript files implementing various sorting algorithms and the logic for visualizing them.

Contributions

Contributions are welcome! If you have any suggestions for improving the project or adding new features, feel free to fork the repository and create a pull request.