Skip to content

Latest commit

 

History

History
59 lines (31 loc) · 4.16 KB

README.md

File metadata and controls

59 lines (31 loc) · 4.16 KB

Sorting Visualizer

This is a web application built using React that allows you to visualize various sorting algorithms in action. You can observe how different algorithms manipulate and rearrange elements in real time, providing a visual representation of the sorting process.

The Sorting Visualizer is accessible through the following link: https://sorting-visualizer-manpreet.netlify.app/

Features

  • Sorting Algorithms: The application supports several popular sorting algorithms, including Bubble Sort, Selection Sort, Insertion Sort, Merge Sort, Quick Sort, and Heap Sort. You can choose any algorithm and observe its execution step-by-step.

  • Random Array Generation: The application generates random arrays of various sizes to demonstrate the sorting algorithms. The size of the array can be adjusted, allowing you to observe the behavior of the sorting algorithms with different input sizes.

  • Speed Control: You can control the speed at which the sorting algorithms execute. The speed slider enables you to adjust the delay between each step of the sorting process, providing a clear visualization of the algorithm's operations.

  • Color-coded Visualization: The application utilizes color-coded bars to represent the sorted elements. The height of the bars corresponds to the magnitude of the elements, while different colors help distinguish between sorted and unsorted elements.

  • Attractive UI and Dark Mode: The application comes with an attractive landing page that makes the webpage attractive. Dark Mode is also added for the user's preference.

  • Algorithm Descriptions: Each sorting algorithm comes with a brief description, explaining its logic and how it operates. This information can be accessed in the sidebar, allowing you to better understand each algorithm's behavior.

  • Responsive Design: The web application is designed to be responsive and works well on various devices, including desktops, laptops, tablets, and mobile phones. You can enjoy the sorting visualizations and explore the algorithms regardless of the device you're using.

Sorting Visualizer Screenshots

Here are some screenshots of the Sorting Visualizer in action:

Screenshot 1

Screenshot 2

Usage

  1. Open the Sorting Visualizer using the provided link: https://sorting-visualizer-manpreet.netlify.app/

  2. Choose a sorting algorithm from the options available on the sidebar.

  3. Adjust the size of the array using the range slider. This will determine the number of elements in the array to be sorted.

  4. Use the speed slider to control the speed of the sorting algorithm. Move the slider to the left for slower execution and to the right for faster execution.

  5. Click the "Generate New Array" button to create a random array for sorting.

  6. Click the "Sort" button to start the visualization of the selected sorting algorithm. Observe the bars moving and changing color as the algorithm progresses.

  7. If desired, you can stop the visualization using the "Stop" button or reset the array using the "Generate New Array" button.

  8. To explore the details of each sorting algorithm, click on its name in the sidebar. A brief description will appear, explaining the algorithm's logic and behavior.

Technologies Used

The Sorting Visualizer web application was built using the following technologies and libraries:

  • React: A JavaScript library for building user interfaces.
  • React Hooks: The application utilizes React hooks such as useState, useEffect, useCallback, and useRef to manage state, perform side effects, and create references to DOM elements.
  • React Router: The routing functionality is implemented using React Router, allowing for navigation between different components.

Acknowledgments

The Sorting Visualizer is based on the concepts and principles of various sorting algorithms. The project was developed for educational purposes, aiming to provide an interactive and visual representation of these algorithms.