Skip to content

raghavg2004/Sorting-Visualizer-DSA-WebApp

Repository files navigation

Sorting Visualizer

A web application showcasing the inner workings of sorting algorithms, complete with detailed algorithm explanations and a network flow sorting visualizer.

Implemented Algorithms:

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

Features:

  1. Colored Representation of Each Step:

    • Blue: Default element
    • Yellow: Elements being compared
    • Red: Element identified as in the incorrect position and to be moved
    • Green: Element in the correct position

    Color Representation

  2. User Controls for Visualization:

    • Speed Control: Adjust the speed of the sorting visualization (5 speed levels).
    • Data Size Control: Change the number of elements being sorted.
    • New Data Generation: Randomly generate a new dataset.
  3. Real-Time Complexity Display:

    • Time and space complexity of the currently selected algorithm are displayed.

Network Flow Sorting Visualizer:

An additional page that visualizes sorting algorithms as a network flow, showing how data is passed and transformed during the sorting process.

Network Flow

Algorithm Pages:

Each sorting algorithm has its own detailed page where you can:

  • Understand the algorithm: Step-by-step explanation of how the algorithm works.
  • View its code: Written in multiple languages like C, C++, Java, Python, and JavaScript.
  • Explore its complexity: Time and space complexity analysis.

Algorithm Page

Installation

  1. Clone the repository to your local machine:
    git clone https://github.com/raghavg2004/Sorting-Visualizer.git

How to Use:

  1. Select a sorting algorithm from the dropdown menu.
  2. Use the control panel to adjust the speed or data size.
  3. Click on "Generate New Data" to visualize a new set of data.
  4. Navigate to the Network Flow or Algorithm pages to explore more about each algorithm in detail.

License

This project is licensed under the Apache License 2.0. See the LICENSE file for more details.