Skip to content

AryamanSrii/Visualizer

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

13 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

Sorting Algorithms Visualizer

Sorting Algorithms Visualizer (SAV) produes visuals instead of long codes to understand the algorithms.Sorting can be referred to as arranging files in some particular order. The arrangement performed can be based on the value of each file present. That particular order can be in either an ascending or descending fashion. Sorting algorithms are instructions given to a computer to arrange elements in a particular order.

Prerequisites

  • Node.js
  • Basic Knowledge of JavaScript

Categories of sorting algorithms

  • Internal sorting algorithms: These are sorting algorithms applied to a small amount of data. Only the main memory is used. Examples would be bubble sort, insertion sort, and quicksort.

  • External sorting algorithms: These are sorting algorithms that can be applied to massive amounts of data. As a result, external storage devices such as hard drives, and flash disks are used. An example would be merge sort.

Efficiency of sorting algorithms

Some sorting algorithms are more efficient than others. The effectiveness of a sorting algorithm is usually defined by the following performance measures:

  • Time complexity: This is the amount of time required by the computer to perform the sorting based on an algorithm.

  • Memory complexity: It is the amount of computer memory required by the computer to perform the sorting based on an algorithm.

Based on the factors above, an algorithm has four performance cases:

  • Worst case time complexity: It is a function defined as a result of a maximum number of steps taken on any instance of size n. It is usually expressed in Big O notation.

  • Average case time complexity: It is a function defined as a result of the average number of steps taken on any instance of size n. It is usually expressed in Big theta notation.

  • Best case time complexity: It is a function defined as a result of the minimum number of steps taken on any instance of size n. It is usually expressed in Big omega notation.

Space complexity: It is a function defined as a result of additional memory space needed to carry out the algorithm. It is usually expressed in Big O notation.

Strategies applied during sorting

  • Recursion: Recursion is a programming method where you define a function in terms of itself. The function generally calls itself with slightly modified parameters (in order to converge).

  • Divide and conquer: The algorithm accomplishes its task by dividing the problem into smaller subproblems and solving them to come up with the overall solution.

Types of Sorting Supported

Merge Sort

Merge sort uses the divide and conquer technique. The main concept of merge sort is that an array of length 1 is sorted. The task, therefore, lies in splitting the array into subarrays of size 1 and then merge them appropriately so that it comes up with the sorted array.

Step-by-step guide
  • Split the array elements into individual elements.

  • Compare the individual elements and arrange them in order. This results in subarrays of length 1 or 2.

  • Make an empty array.

  • Compare the elements of the subarrays and push the smaller of the values to the empty array.

  • If you had extracted all the values from one of the arrays, push the remaining array to the new array.

  • Continue until all subarrays have been covered and you have one sorted array.

image

Bubble Sorting

Bubble sort follows the recursion technique.

Step-by-step guide:
  • Start by comparing the first two elements in an array.

  • Swap them if required.

  • Continue till the end of the array. At this point, you have made a series of inner passes and completed an outer pass.

  • Repeat the process until the entire array is sorted.

image

Insertion Sort

Insertion sort uses the recursion technique. There is a portion of the array that is sorted and the other that is unsorted. So you have to compare the elements from the unsorted portion one by one and insert them into the sorted portion in the correct order. In the guide below we are using ascending order.

Step-by-step guide
  • Start by comparing the second element of the array with the first element assuming the first element is the sorted portion. Swap if the second element is smaller than the first element.

  • Iterate through comparing the first element with each element of the unsorted portion. If the element from the unsorted portion is smaller than the first element, swap.

  • After iterating through the entire array, increment the sorted portion to the next index and recursively compare the value of the last index of the sorted portion with each value of the unsorted portion. Swap where the value of the unsorted portion is smaller.

  • The sorted portion shall increase until it covers the entire array yielding a sorted array.

image

Selection Sort

Selection sort uses the recursion technique. In the guide below, we are using ascending order. For descending order, you do the reverse.

Step-by-step guide
  • Given an array, assume that the first element in the array is the smallest.

  • From the other portion of the array, find the minimum value, and swap it with the first element. At this point, you have completed the first pass.

  • Repeat the same procedure with the rest of the array comparing the elements to the right, not the left.

image

Quick Sort

Quicksort applies the divide and conquer technique as well. It works by having a pivot element such that the elements to the left of it are less than it and those to the right are greater than it. The pivot element can be any element in the array.

Step-by-step guide
  • Select a pivot element.

  • Split the array into two arrays with those less than the pivot element on the left and those greater than the pivot element to the right.

  • Carry out the above steps recursively until we have subarrays of length 1. Combine the subarrays to yield a sorted array

image

Live at

https://visualizer.tk/

Acknowledgements

Authors

License

MIT License

Color Reference

Color Hex
Graph rgb(45,41,38)
Background #f8f8f8
Buttons #00b48a
New Array Buttons #00d1a0

Demo

a7bfffc6-5b4e-4b84-8c07-04340a772fb6.mp4

FAQ

How Many Sorting Algorithms does the app support?

5

Which Language is it coded in?

HTML CSS AND JS

πŸš€ About Me

Aryaman Srivastava is an inquisitive, young lad, with a deep passion for keeping up with the latest trends in tech. Being only 14 years, he doesn't let his age stop him or quit; instead, he uses it to his advantage, making use of the extra time he has to explore as well as study programming along with other hot topics in the field of computer science. He is particularly passionate about AI, and follows the latest developments in the field.

Screenshots

Full Page

Full Page

Header

Header

Algorithms

Algorithms

Graph

Graph

Size and Speed

Size and Speed

About

Sorting Visualizer coded in JavaScript

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published