├── assets ├── notations.png └── complexcity.png ├── Sorting Algorith js ├── bubble.js ├── insertion.js ├── selection.js ├── quick.js ├── merge.js └── sorting.js ├── index.html ├── style.css └── README.md /assets/notations.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deepakcode21/Sorting-Algorithm-Visualizer/HEAD/assets/notations.png -------------------------------------------------------------------------------- /assets/complexcity.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deepakcode21/Sorting-Algorithm-Visualizer/HEAD/assets/complexcity.png -------------------------------------------------------------------------------- /Sorting Algorith js/bubble.js: -------------------------------------------------------------------------------- 1 | async function bubble() { 2 | console.log('In bubbe()'); 3 | const ele = document.querySelectorAll(".bar"); 4 | for(let i = 0; i < ele.length-1; i++){ 5 | console.log('In ith loop'); 6 | for(let j = 0; j < ele.length-i-1; j++){ 7 | console.log('In jth loop'); 8 | ele[j].style.background = 'blue'; 9 | ele[j+1].style.background = 'blue'; 10 | if(parseInt(ele[j].style.height) > parseInt(ele[j+1].style.height)){ 11 | console.log('In if condition'); 12 | await waitforme(delay); 13 | swap(ele[j], ele[j+1]); 14 | } 15 | ele[j].style.background = 'cyan'; 16 | ele[j+1].style.background = 'cyan'; 17 | } 18 | ele[ele.length-1-i].style.background = 'green'; 19 | } 20 | ele[0].style.background = 'green'; 21 | } 22 | 23 | const bubSortbtn = document.querySelector(".bubbleSort"); 24 | bubSortbtn.addEventListener('click', async function(){ 25 | disableSortingBtn(); 26 | disableSizeSlider(); 27 | disableNewArrayBtn(); 28 | await bubble(); 29 | enableSortingBtn(); 30 | enableSizeSlider(); 31 | enableNewArrayBtn(); 32 | }); -------------------------------------------------------------------------------- /Sorting Algorith js/insertion.js: -------------------------------------------------------------------------------- 1 | async function insertion(){ 2 | console.log('In insertion()'); 3 | const ele = document.querySelectorAll(".bar"); 4 | // color 5 | ele[0].style.background = 'green'; 6 | for(let i = 1; i < ele.length; i++){ 7 | console.log('In ith loop'); 8 | let j = i - 1; 9 | let key = ele[i].style.height; 10 | // color 11 | ele[i].style.background = 'blue'; 12 | 13 | await waitforme(delay); 14 | 15 | while(j >= 0 && (parseInt(ele[j].style.height) > parseInt(key))){ 16 | console.log('In while loop'); 17 | // color 18 | ele[j].style.background = 'blue'; 19 | ele[j + 1].style.height = ele[j].style.height; 20 | j--; 21 | 22 | await waitforme(delay); 23 | 24 | // color 25 | for(let k = i; k >= 0; k--){ 26 | ele[k].style.background = 'green'; 27 | } 28 | } 29 | ele[j + 1].style.height = key; 30 | // color 31 | ele[i].style.background = 'green'; 32 | } 33 | } 34 | 35 | const inSortbtn = document.querySelector(".insertionSort"); 36 | inSortbtn.addEventListener('click', async function(){ 37 | disableSortingBtn(); 38 | disableSizeSlider(); 39 | disableNewArrayBtn(); 40 | await insertion(); 41 | enableSortingBtn(); 42 | enableSizeSlider(); 43 | enableNewArrayBtn(); 44 | }); -------------------------------------------------------------------------------- /Sorting Algorith js/selection.js: -------------------------------------------------------------------------------- 1 | async function selection(){ 2 | console.log('In selection()'); 3 | const ele = document.querySelectorAll(".bar"); 4 | for(let i = 0; i < ele.length; i++){ 5 | console.log('In ith loop'); 6 | let min_index = i; 7 | // Change color of the position to swap with the next min 8 | ele[i].style.background = 'blue'; 9 | for(let j = i+1; j < ele.length; j++){ 10 | console.log('In jth loop'); 11 | // Change color for the current comparision (in consideration for min_index) 12 | ele[j].style.background = 'red'; 13 | 14 | await waitforme(delay); 15 | if(parseInt(ele[j].style.height) < parseInt(ele[min_index].style.height)){ 16 | console.log('In if condition height comparision'); 17 | if(min_index !== i){ 18 | // new min_index is found so change prev min_index color back to normal 19 | ele[min_index].style.background = 'cyan'; 20 | } 21 | min_index = j; 22 | } 23 | else{ 24 | // if the currnent comparision is more than min_index change is back to normal 25 | ele[j].style.background = 'cyan'; 26 | } 27 | } 28 | await waitforme(delay); 29 | swap(ele[min_index], ele[i]); 30 | // change the min element index back to normal as it is swapped 31 | ele[min_index].style.background = 'cyan'; 32 | // change the sorted elements color to green 33 | ele[i].style.background = 'green'; 34 | } 35 | } 36 | 37 | const selectionSortbtn = document.querySelector(".selectionSort"); 38 | selectionSortbtn.addEventListener('click', async function(){ 39 | disableSortingBtn(); 40 | disableSizeSlider(); 41 | disableNewArrayBtn(); 42 | await selection(); 43 | enableSortingBtn(); 44 | enableSizeSlider(); 45 | enableNewArrayBtn(); 46 | }); -------------------------------------------------------------------------------- /Sorting Algorith js/quick.js: -------------------------------------------------------------------------------- 1 | 2 | async function partitionLomuto(ele, l, r){ 3 | console.log('In partitionLomuto()'); 4 | let i = l - 1; 5 | // color pivot element 6 | ele[r].style.background = 'red'; 7 | for(let j = l; j <= r - 1; j++){ 8 | console.log('In partitionLomuto for j'); 9 | // color current element 10 | ele[j].style.background = 'yellow'; 11 | // pauseChamp 12 | await waitforme(delay); 13 | 14 | if(parseInt(ele[j].style.height) < parseInt(ele[r].style.height)){ 15 | console.log('In partitionLomuto for j if'); 16 | i++; 17 | swap(ele[i], ele[j]); 18 | // color 19 | ele[i].style.background = 'orange'; 20 | if(i != j) ele[j].style.background = 'orange'; 21 | // pauseChamp 22 | await waitforme(delay); 23 | } 24 | else{ 25 | // color if not less than pivot 26 | ele[j].style.background = 'pink'; 27 | } 28 | } 29 | i++; 30 | // pauseChamp 31 | await waitforme(delay); 32 | swap(ele[i], ele[r]); // pivot height one 33 | console.log(`i = ${i}`, typeof(i)); 34 | // color 35 | ele[r].style.background = 'pink'; 36 | ele[i].style.background = 'green'; 37 | 38 | // pauseChamp 39 | await waitforme(delay); 40 | 41 | // color 42 | for(let k = 0; k < ele.length; k++){ 43 | if(ele[k].style.background != 'green') 44 | ele[k].style.background = 'cyan'; 45 | } 46 | 47 | return i; 48 | } 49 | 50 | async function quickSort(ele, l, r){ 51 | console.log('In quickSort()', `l=${l} r=${r}`, typeof(l), typeof(r)); 52 | if(l < r){ 53 | let pivot_index = await partitionLomuto(ele, l, r); 54 | await quickSort(ele, l, pivot_index - 1); 55 | await quickSort(ele, pivot_index + 1, r); 56 | } 57 | else{ 58 | if(l >= 0 && r >= 0 && l 2 | 3 | 4 | 5 | 6 | 7 | Sorting Algorithm Visualizer 8 | 9 | 10 | 11 |
12 |
13 |

Sorting Algorithm Visualizer

14 |
15 | 37 |
38 | 39 |
40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 |
49 | 50 | 51 |
52 | 53 | 54 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: Arial, Helvetica, sans-serif; 3 | font-size: 20px; 4 | padding: 0 20px 30px 0; 5 | line-height: 1.4; 6 | justify-content: center; 7 | } 8 | 9 | 10 | *, *::before, *::after { 11 | box-sizing: content-box; 12 | } 13 | 14 | @keyframes rotate { 15 | 100% { 16 | transform: rotate(1turn); 17 | } 18 | } 19 | 20 | 21 | .rainbow { 22 | position: relative; 23 | z-index: 0; 24 | display: flex; 25 | justify-content: center; 26 | border-radius: 10px; 27 | overflow: hidden; 28 | padding: 1rem; 29 | font-family: sans-serif; 30 | font-weight: bold; 31 | background-color: #3feee5; 32 | margin: 0px 400px 0px 400px; 33 | 34 | 35 | 36 | &::before { 37 | content: ''; 38 | position: absolute; 39 | z-index: -2; 40 | left: -50%; 41 | top: -50%; 42 | width: 200%; 43 | height: 200%; 44 | background-color: #399953; 45 | background-repeat: no-repeat; 46 | background-size: 50% 50%, 50% 50%; 47 | background-position: 0 0, 100% 0, 100% 100%, 0 100%; 48 | background-image: linear-gradient(#399953, #399953), linear-gradient(#fbb300, #fbb300), linear-gradient(#d53e33, #d53e33), linear-gradient(#377af5, #377af5); 49 | animation: rotate 4s linear infinite; 50 | } 51 | 52 | &::after { 53 | content: ''; 54 | position: absolute; 55 | z-index: -1; 56 | left: 6px; 57 | top: 6px; 58 | width: calc(100% - 12px); 59 | height: calc(100% - 12px); 60 | background: black; 61 | border-radius: 5px; 62 | } 63 | } 64 | 65 | .flex-container{ 66 | margin-top: 20px; 67 | display: flex; 68 | flex-wrap: nowrap; 69 | width: 100%; 70 | height: 500px; 71 | justify-content: center; 72 | transition: 2s all ease; 73 | margin: 20px; 74 | 75 | } 76 | 77 | .flex-item{ 78 | background: cyan; 79 | border: 1pt solid black; 80 | width: 10px; 81 | transition: 0.1s all ease; 82 | justify-content: center; 83 | } 84 | 85 | .row{ 86 | display: grid; 87 | grid-template-columns: 1fr 1fr 2fr; 88 | margin: 20px; 89 | margin-right: 20px; 90 | --x: 50%; 91 | --y: 50%; 92 | 93 | position: relative; 94 | appearance: none; 95 | color: white; 96 | cursor: pointer; 97 | outline: none; 98 | border-radius: 10px; 99 | 100 | border: 2px solid transparent; 101 | background: linear-gradient(#000, #000) padding-box, radial-gradient(farthest-corner at var(--x) var(--y), #00C9A7, #845EC2) border-box; 102 | 103 | } 104 | 105 | #input{ 106 | display: flex; 107 | padding: 20px; 108 | justify-content: space-around; 109 | margin: 20px; 110 | 111 | } 112 | 113 | #button-design{ 114 | display: flex; 115 | justify-items: center; 116 | margin: 20px; 117 | padding: 10px; 118 | margin-left: -30px; 119 | } 120 | 121 | #newArray{ 122 | margin: 20px; 123 | padding: 10px; 124 | } 125 | 126 | .complexcity{ 127 | display: flex; 128 | position: relative; 129 | margin: 10% auto 0; 130 | width: 1600px; 131 | height: 500px; 132 | background: linear-gradient(0deg, black, rgb(44, 43, 41)); 133 | margin-bottom: 50px; 134 | } 135 | 136 | .box::before, .box::after{ 137 | content: ''; 138 | position: absolute; 139 | left: -2px; 140 | top: -2px; 141 | background: linear-gradient(45deg, #e6fb04, #ff6600, #00ff66, #00ffff, 142 | #ff00ff, #ff0099, #6e0dd0, #ff3300, #899fff); 143 | background-size: 400%; 144 | width: calc(100% + 5px); 145 | height: calc(100% + 5px); 146 | z-index: -1; 147 | animation: animate 20s linear infinite; 148 | } 149 | @keyframes animate{ 150 | 0%{ 151 | background-position: 0 0; 152 | } 153 | 50%{ 154 | background-position: 400% 0; 155 | } 156 | 100%{ 157 | background-position: 0 0; 158 | } 159 | } 160 | 161 | .box::after{ 162 | filter: blur(40px); 163 | } 164 | 165 | label{ 166 | display: flex; 167 | justify-content: center; 168 | color: #e6fb04; 169 | } 170 | 171 | -------------------------------------------------------------------------------- /Sorting Algorith js/merge.js: -------------------------------------------------------------------------------- 1 | async function merge(ele, low, mid, high){ 2 | console.log('In merge()'); 3 | console.log(`low=${low}, mid=${mid}, high=${high}`); 4 | const n1 = mid - low + 1; 5 | const n2 = high - mid; 6 | console.log(`n1=${n1}, n2=${n2}`); 7 | let left = new Array(n1); 8 | let right = new Array(n2); 9 | 10 | for(let i = 0; i < n1; i++){ 11 | await waitforme(delay); 12 | console.log('In merge left loop'); 13 | console.log(ele[low + i].style.height + ' at ' + (low+i)); 14 | // color 15 | ele[low + i].style.background = 'orange'; 16 | left[i] = ele[low + i].style.height; 17 | } 18 | for(let i = 0; i < n2; i++){ 19 | await waitforme(delay); 20 | console.log('In merge right loop'); 21 | console.log(ele[mid + 1 + i].style.height + ' at ' + (mid+1+i)); 22 | // color 23 | ele[mid + 1 + i].style.background = 'yellow'; 24 | right[i] = ele[mid + 1 + i].style.height; 25 | } 26 | await waitforme(delay); 27 | let i = 0, j = 0, k = low; 28 | while(i < n1 && j < n2){ 29 | await waitforme(delay); 30 | console.log('In merge while loop'); 31 | console.log(parseInt(left[i]), parseInt(right[j])); 32 | 33 | // To add color for which two r being compared for merging 34 | 35 | if(parseInt(left[i]) <= parseInt(right[j])){ 36 | console.log('In merge while loop if'); 37 | // color 38 | if((n1 + n2) === ele.length){ 39 | ele[k].style.background = 'green'; 40 | } 41 | else{ 42 | ele[k].style.background = 'lightgreen'; 43 | } 44 | 45 | ele[k].style.height = left[i]; 46 | i++; 47 | k++; 48 | } 49 | else{ 50 | console.log('In merge while loop else'); 51 | // color 52 | if((n1 + n2) === ele.length){ 53 | ele[k].style.background = 'green'; 54 | } 55 | else{ 56 | ele[k].style.background = 'lightgreen'; 57 | } 58 | ele[k].style.height = right[j]; 59 | j++; 60 | k++; 61 | } 62 | } 63 | while(i < n1){ 64 | await waitforme(delay); 65 | console.log("In while if n1 is left"); 66 | // color 67 | if((n1 + n2) === ele.length){ 68 | ele[k].style.background = 'green'; 69 | } 70 | else{ 71 | ele[k].style.background = 'lightgreen'; 72 | } 73 | ele[k].style.height = left[i]; 74 | i++; 75 | k++; 76 | } 77 | while(j < n2){ 78 | await waitforme(delay); 79 | console.log("In while if n2 is left"); 80 | // color 81 | if((n1 + n2) === ele.length){ 82 | ele[k].style.background = 'green'; 83 | } 84 | else{ 85 | ele[k].style.background = 'lightgreen'; 86 | } 87 | ele[k].style.height = right[j]; 88 | j++; 89 | k++; 90 | } 91 | } 92 | 93 | async function mergeSort(ele, l, r){ 94 | console.log('In mergeSort()'); 95 | if(l >= r){ 96 | console.log(`return cause just 1 elemment l=${l}, r=${r}`); 97 | return; 98 | } 99 | const m = l + Math.floor((r - l) / 2); 100 | console.log(`left=${l} mid=${m} right=${r}`, typeof(m)); 101 | await mergeSort(ele, l, m); 102 | await mergeSort(ele, m + 1, r); 103 | await merge(ele, l, m, r); 104 | } 105 | 106 | const mergeSortbtn = document.querySelector(".mergeSort"); 107 | mergeSortbtn.addEventListener('click', async function(){ 108 | let ele = document.querySelectorAll('.bar'); 109 | let l = 0; 110 | let r = parseInt(ele.length) - 1; 111 | disableSortingBtn(); 112 | disableSizeSlider(); 113 | disableNewArrayBtn(); 114 | await mergeSort(ele, l, r); 115 | enableSortingBtn(); 116 | enableSizeSlider(); 117 | enableNewArrayBtn(); 118 | }); -------------------------------------------------------------------------------- /Sorting Algorith js/sorting.js: -------------------------------------------------------------------------------- 1 | // swap function util for sorting algorithms takes input of 2 DOM elements with .style.height feature 2 | function swap(el1, el2) { 3 | console.log('In swap()'); 4 | 5 | let temp = el1.style.height; 6 | el1.style.height = el2.style.height; 7 | el2.style.height = temp; 8 | 9 | } 10 | 11 | // Disables sorting buttons used in conjunction with enable, so that we can disable during sorting and enable buttons after it 12 | function disableSortingBtn(){ 13 | document.querySelector(".bubbleSort").disabled = true; 14 | document.querySelector(".insertionSort").disabled = true; 15 | document.querySelector(".mergeSort").disabled = true; 16 | document.querySelector(".quickSort").disabled = true; 17 | document.querySelector(".selectionSort").disabled = true; 18 | } 19 | 20 | // Enables sorting buttons used in conjunction with disable 21 | function enableSortingBtn(){ 22 | document.querySelector(".bubbleSort").disabled = false; 23 | document.querySelector(".insertionSort").disabled = false; 24 | document.querySelector(".mergeSort").disabled = false; 25 | document.querySelector(".quickSort").disabled = false; 26 | document.querySelector(".selectionSort").disabled = false; 27 | } 28 | 29 | // Disables size slider used in conjunction with enable, so that we can disable during sorting and enable buttons after it 30 | function disableSizeSlider(){ 31 | document.querySelector("#arr_sz").disabled = true; 32 | } 33 | 34 | // Enables size slider used in conjunction with disable 35 | function enableSizeSlider(){ 36 | document.querySelector("#arr_sz").disabled = false; 37 | } 38 | 39 | // Disables newArray buttons used in conjunction with enable, so that we can disable during sorting and enable buttons after it 40 | function disableNewArrayBtn(){ 41 | document.querySelector(".newArray").disabled = true; 42 | } 43 | 44 | // Enables newArray buttons used in conjunction with disable 45 | function enableNewArrayBtn(){ 46 | document.querySelector(".newArray").disabled = false; 47 | } 48 | 49 | // Used in async function so that we can so animations of sorting, takes input time in ms (1000 = 1s) 50 | function waitforme(milisec) { 51 | return new Promise(resolve => { 52 | setTimeout(() => { resolve('') }, milisec); 53 | }) 54 | } 55 | 56 | // Selecting size slider from DOM 57 | let arraySize = document.querySelector('#arr_sz'); 58 | 59 | // Event listener to update the bars on the UI 60 | arraySize.addEventListener('input', function(){ 61 | console.log(arraySize.value, typeof(arraySize.value)); 62 | createNewArray(parseInt(arraySize.value)); 63 | }); 64 | 65 | // Default input for waitforme function (260ms) 66 | let delay = 260; 67 | 68 | // Selecting speed slider from DOM 69 | let delayElement = document.querySelector('#speed_input'); 70 | 71 | // Event listener to update delay time 72 | delayElement.addEventListener('input', function(){ 73 | console.log(delayElement.value, typeof(delayElement.value)); 74 | delay = 320 - parseInt(delayElement.value); 75 | }); 76 | 77 | // Creating array to store randomly generated numbers 78 | let array = []; 79 | 80 | // Call to display bars right when you visit the site 81 | createNewArray(); 82 | 83 | // To create new array input size of array 84 | function createNewArray(noOfBars = 60) { 85 | // calling helper function to delete old bars from dom 86 | deleteChild(); 87 | 88 | // creating an array of random numbers 89 | array = []; 90 | for (let i = 0; i < noOfBars; i++) { 91 | array.push(Math.floor(Math.random() * 250) + 1); 92 | } 93 | console.log(array); 94 | 95 | // select the div #bars element 96 | const bars = document.querySelector("#bars"); 97 | 98 | // create multiple element div using loop and adding class 'bar col' 99 | for (let i = 0; i < noOfBars; i++) { 100 | const bar = document.createElement("div"); 101 | bar.style.height = `${array[i]*2}px`; 102 | bar.classList.add('bar'); 103 | bar.classList.add('flex-item'); 104 | bar.classList.add(`barNo${i}`); 105 | bars.appendChild(bar); 106 | } 107 | } 108 | 109 | // Helper function to delete all the previous bars so that new can be added 110 | function deleteChild() { 111 | const bar = document.querySelector("#bars"); 112 | bar.innerHTML = ''; 113 | } 114 | 115 | // Selecting newarray button from DOM and adding eventlistener 116 | const newArray = document.querySelector(".newArray"); 117 | newArray.addEventListener("click", function(){ 118 | console.log("From newArray " + arraySize.value); 119 | console.log("From newArray " + delay); 120 | enableSortingBtn(); 121 | enableSizeSlider(); 122 | createNewArray(arraySize.value); 123 | }); 124 | 125 | document.querySelector('.row').onmousemove = (e) => { 126 | 127 | const x = e.pageX - e.target.offsetLeft 128 | const y = e.pageY - e.target.offsetTop 129 | 130 | e.target.style.setProperty('--x', `${ x }px`) 131 | e.target.style.setProperty('--y', `${ y }px`) 132 | 133 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

Sorting Algorithm Visualizer

2 | 3 | A sorting algorithm visualizer is like a colorful playground for numbers. You can watch as the numbers race, swap, and line up in perfect order, all with just a few clicks. It’s simple to use and fun to watch, turning complex code into an easy-to-follow animation. Whether it’s a slow bubble sort or a fast quicksort, each algorithm has its own unique style, making the whole process both entertaining and educational. Just sit back, relax, and enjoy the show as the numbers sort themselves out in a visually appealing way! 4 | 5 | Try this impresive tools and enjoy [Try Sort](https://sortxtools.netlify.app/) 6 | 7 | ## Technology 8 | ![Html](https://img.icons8.com/?size=100&id=20909&format=png&color=000000)![Css](https://img.icons8.com/?size=100&id=21278&format=png&color=000000 )![JavaScript](https://img.icons8.com/?size=100&id=PXTY4q2Sq2lG&format=png&color=000000)![Bootstrap]( https://img.icons8.com/?size=100&id=g9mmSxx3SwAI&format=png&color=000000) 9 | 10 | ## Features 11 | 12 | - Graphical User Interface (GUI) : The project comes with a user-friendly GUI that enables users to interact with the sorting algorithms visually. 13 | 14 | - Sorting Algorithms : The visualizer supports a variety of sorting algorithms, including but not limited to: 15 | - Bubble Sort 16 | - Selection Sort 17 | - Insertion Sort 18 | - Merge Sort 19 | - Quick Sort 20 | 21 | - Real-Time Visualization : Users can observe the sorting algorithms in real-time, as the visualizer animates the sorting process step by step. 22 | 23 | - Adjustable Speed & Array size : The visualizer allows users to control the speed of the sorting animation, enabling them to slow down or speed up the visualization as per their preference. 24 | 25 | ## Getting Started 26 | 27 | Follow the steps below to get the Sorting Visualizer project up and running: 28 | 29 | 1. **Clone the Repository**: Clone this GitHub repository to your local machine using the following command: 30 | 31 | ``` 32 | git clone https://github.com/ArrowCod/Sorting-Algorithm-Visualizer.git 33 | ``` 34 | 35 | 2. **Open the Project**: Use an Integrated Development Environment (IDE) that supports Java to open the project. 36 | 37 | 3. **Run the Application**: Locate the main index.html file and run the application. This will launch the Sorting Visualizer GUI. 38 | 39 | ## Contribution 40 | 41 | Contributions to this project are welcome and encouraged. If you want to contribute to the Sorting Visualizer, and also criticis, new idea, any updation always welcome, Discussions section is open for it. follow these steps: 42 | 43 | 1. Fork the repository on GitHub. 44 | 45 | 2. Create a new branch with a descriptive name for your feature or bug fix. 46 | 47 | 3. Make your changes and improvements to the code. 48 | 49 | 4. Test your changes thoroughly. 50 | 51 | 5. Create a pull request to merge your changes into the main repository. 52 | 53 | ## Sorting Demo 54 | 55 | 1. **Bubble Sort** : 56 | 57 | Bubble sort is a simple comparison-based sorting algorithm that works by repeatedly stepping through a list, comparing adjacent elements, and swapping them if they are in the wrong order. The process is repeated until the list is sorted. 58 | 59 | How It Works: 60 | ``` 61 | - Start at the beginning of the list. 62 | - Compare the first item with the next one. 63 | - If the first item is bigger, swap them so the smaller one comes first. 64 | - Move to the next pair of items and repeat the comparison and swap if needed. 65 | - Keep doing this until you reach the end of the list. After one full pass, the biggest item will be at the end of the list. 66 | - Go back to the start and repeat the process, but this time ignore the last item (since it's already in its correct spot). 67 | - Continue until no more swaps are needed, meaning the list is sorted. 68 | ``` 69 | 70 | Time & Space Complexity: 71 | ``` java 72 | Best-case: O(n) when the list is already sorted. 73 | Worst-case and Average-case: O(n²) 74 | 75 | Space Complexity: O(1) 76 | ``` 77 | 78 | https://github.com/user-attachments/assets/ec23dd1b-9237-4afc-9cc8-de4ca6fd4d92 79 | 80 | 81 | 82 | 83 | 2. **Insertion Sort**: 84 | 85 | Insertion sort is a simple and intuitive way to sort a list, similar to how you might sort playing cards in your hand. Insertion sort builds the sorted list one item at a time. It’s efficient for small lists or lists that are already mostly sorted but can be slow for large, unsorted lists. 86 | 87 | How It Works: 88 | ``` 89 | - Start with the second item in the list (since the first one is already "sorted" by itself). 90 | - Compare this item to the ones before it. 91 | = If it's smaller, move it left until you find the correct spot where it's larger than the item before it but smaller than the item after it. 92 | - Insert the item in its correct position. 93 | - Move to the next item in the list and repeat the process. 94 | - Continue until you've gone through the entire list. 95 | ``` 96 | 97 | 98 | Time & Space Complexity: 99 | ```java 100 | Best Case: O(n) 101 | Average and Worst Case: O(n²) 102 | 103 | Space Complexity: O(1) 104 | ``` 105 | 106 | https://github.com/user-attachments/assets/f1634aa6-3097-4640-afa5-ddc105a9d3c7 107 | 108 | 109 | 110 | 111 | 3. **Merge Sort**: 112 | 113 | Merge sort is an efficient, comparison-based sorting algorithm that uses the divide-and-conquer approach. It divides the list into smaller sublists, sorts them, and then merges them back together to form a sorted list. Merge sort is efficient with a consistent time complexity of O(n log n). It’s stable (maintains the order of equal elements) and works well with large datasets. However, it requires additional memory for the temporary sublists during merging. 114 | 115 | How Merge Sort Works: 116 | ``` 117 | Divide: 118 | 119 | - Split the list into two roughly equal halves. 120 | - Recursively repeat this process until each sublist contains only one element (since a single element is already sorted). 121 | 122 | Conquer: 123 | 124 | - Merge the sublists back together in sorted order. 125 | - To merge, compare the elements from each sublist and arrange them in order, creating a new sorted list. 126 | 127 | Repeat: 128 | 129 | - Continue merging until all the sublists have been merged back into one sorted list. 130 | ``` 131 | 132 | Example: 133 | 134 | 135 | 136 | Time & Space Complexity: 137 | ```java 138 | Best Case: O(n log n) 139 | Average Case: O(n log n) 140 | Worst Case: O(n log n) 141 | 142 | Space Complexity: O(n) due to the additional space required for merging. 143 | ``` 144 | 145 | 146 | https://github.com/user-attachments/assets/1293843e-b240-41e0-9bc1-683dd7c4a025 147 | 148 | 149 | 150 | 151 | 4. **Quick Sort**: 152 | 153 | Quick sort is a highly efficient, comparison-based sorting algorithm that also uses the divide-and-conquer approach. It's known for its speed in practical applications and is one of the most commonly used sorting algorithms. Quick Sort is fast and efficient, especially for large datasets. It’s generally faster than other O(n log n) algorithms like merge sort because it sorts in place and has good cache performance. However, in the worst case (which is rare with good pivot selection strategies), it can degrade to O(n²) time complexity. 154 | 155 | How Quick Sort Works: 156 | ``` 157 | Choose a Pivot: 158 | 159 | - Select an element from the list to be the "pivot." The pivot can be any element, but commonly it’s the last element,the first element, or a randomly chosen one. 160 | 161 | Partitioning: 162 | 163 | - Reorder the list so that all elements less than the pivot come before it and all elements greater than the pivot come after it. The pivot will be in its correct final position after this step. 164 | 165 | Recursively Apply: 166 | 167 | - Apply the same process recursively to the sublists formed by the elements before and after the pivot. 168 | 169 | Combine: 170 | 171 | - Since the sublists are sorted in place, no further combining is necessary. The entire list becomes sorted as the recursion unwinds. 172 | ``` 173 | 174 | Example: 175 | 176 | Time & Space Complexity: 177 | ```java 178 | Best Case: O(n log n) Occurs when the pivot divides the list into two nearly equal parts. 179 | Average Case: O(n log n) On average, the pivot will divide the list reasonably well, leading to efficient sorting. 180 | Worst Case: O(n²) Occurs when the pivot is the smallest or largest element, leading to highly unbalanced partitions (e.g., when the list is already sorted). 181 | 182 | Space Complexity: O(log n) for the stack space used during recursion (for an in-place sort). 183 | ``` 184 | 185 | https://github.com/user-attachments/assets/04097e75-647f-4e79-8a01-76335a5a49d4 186 | 187 | 188 | 189 | 190 | 5. **Selection Sort**: 191 | 192 | Selection sort is a simple comparison-based sorting algorithm. It works by repeatedly finding the smallest (or largest, depending on sorting order) element from the unsorted part of the list and swapping it with the first unsorted element. It’s not the most efficient sorting algorithm, especially for large lists, due to its O(n²) time complexity. It’s useful when memory space is limited, as it only requires a constant amount of additional memory. 193 | 194 | How Selection Sort Works: 195 | ``` 196 | - Start with the entire list. 197 | - Find the smallest element in the unsorted portion of the list. 198 | - Swap the smallest element with the first unsorted element. 199 | - Move the boundary between the sorted and unsorted parts of the list one step to the right. 200 | - Repeat the process for the remaining unsorted portion until the whole list is sorted. 201 | ``` 202 | Example: 203 | 204 | Time & Space Complexity: 205 | ```java 206 | Best Case: O(n²) 207 | Average Case: O(n²) 208 | Worst Case: O(n²) 209 | 210 | Space Complexity: O(1) because it sorts the list in place. 211 | ``` 212 | 213 | https://github.com/user-attachments/assets/16c61705-ef3f-4f9f-8bce-e4d852845a5c 214 | 215 | 216 | ## Acknowledgments 217 | 218 | We would like to thank all the contributors and open-source projects that made this Sorting Visualizer possible. Your dedication and effort are greatly appreciated. 219 | 220 | Special thanks to [Daniel Shiffman](https://youtu.be/67k3I2GxTH8?si=yAY-LQgcE47QRcg3) for motivate and inspired me to build this project. 221 | 222 | Happy Sorting! 223 | --------------------------------------------------------------------------------