index.html

<!DOCTYPE html>
<html>
    
<head>
    <meta charset="UTF-8">
    <title>Sorting Visualizer</title>
    <link rel="icon" type="image/x-icon" href="./img/title logo.png">
    <link rel="stylesheet" href="css/style.css">
</head>

<div>

<!-- Tab links -->
    <div class="tab">
        <button class="tablinks" onclick="algoDetails(event, 'visualize')">Visualize</button>
        <button class="tablinks" onclick="algoDetails(event, 'algo')">Algorithm</button>
    </div>

    <!-- Tab content -->
    <div id="visualize" class="tabcontent active" data-tab-content>
        
        <div class="sorting-visualizer-container">
            <div class="sorting-visualizer-container__bar" id="sorting-visualizer-container__bar"></div>

            <div class="sorting-visualizer-container__controller">
                <div class="controller-item">
                    <input class="array-range-slider slider" type="range" min="1" max="100" value="50">

                    <label class="array-range-slider-label label">Array Size = 50</label>
                </div>

                <div class="controller-item">
                    <button class="generate-array-btn btn">Generate New Array</button>
                </div>

                <div class="controller-item">
                    <button class="start-sorting-btn btn">Start Sort</button>
                </div>

                <div class="controller-item speed-range-slider-con">
                    <input class="speed-range-slider slider" type="range" min="1" max="500" value="50">
                    <label class="speed-range-slider-label label">Speed = 50 ms</label>
                </div>

                <div class="controller-item">
                    <button class="sorting-option-btn btn">Bubble Sort</button>
                </div>
            </div>

            <div class="my-toast">
            </div>
        </div>

    </div>
    
    <div id="algo" class="tabcontent">
        <div class="tab">
            <button class="tablinks" onclick="sortingType(event, 'bubble')">Bubble Sort</button>
            <button class="tablinks" onclick="sortingType(event, 'selection')">Selection Sort</button>
            <button class="tablinks" onclick="sortingType(event, 'merge')">Merge Sort</button>
        </div>
          
        <!-- Tab content -->
        <div id="bubble" class="sorting-tab active" data-tab-content>
            <h1>Bubble Sort :</h1>
            <p>
                In this algorithm,<br/>
                <ul>
                    <li>Traverse from left and compare adjacent elements and the higher one is placed at right side.</li>
                    <li>In this way, the largest element is moved to the rightmost end at first.</li>
                    <li>This process is then continued to find the second largest and place it and so on until the data is sorted.</li>
                </ul><br/>
                <h3><strong>How does Bubble Sort Work?</strong></h3>
                Let us understand the working of bubble sort with the help of the following illustration:<br/><br/>
                <i><strong>Input : </strong>arr[] = {6, 3, 0, 5}</i><br/><br/>
                <i><strong>First Pass : </strong></i><br/>
                The largest element is placed in its correct position, i.e., the end of the array.<br/><br/>
                <img src="./img/bubble_sort_1.png" alt=""><br/><br/>
                <i><strong>Second Pass : </strong></i><br/>
                Place the second largest element at correct position.<br/><br/>
                <img src="./img/bubble_sort_2.png" alt=""><br/><br/>
                <i><strong>Third Pass : </strong></i><br/>
                Place the remaining two elements at their correct positions.<br/><br/>
                <img src="./img/bubble_sort_3.png" alt=""><br/><br/>
                <ul>
                    <li>Total no. of passes : n-1</li>
                    <li>Total no. of comparisons : n*(n-1)/2</li>
                </ul><br/>
                <h3><strong>Advantages of Bubble Sort :</strong></h3>
                <ul>
                    <li>Bubble sort is easy to understand and implement.</li>
                    <li>It does not require any additional memory space.</li>
                    <li>It is a stable sorting algorithm, meaning that elements with the same key value maintain their relative order in the sorted output.</li>
                </ul><br/>
                <h3><strong>Disadvantages of Bubble Sort :</strong></h3>
                <ul>
                    <li>Bubble sort has a time complexity of O(N<sup>2</sup>) which makes it very slow for large data sets.</li>
                    <li>Bubble sort is a comparison-based sorting algorithm, which means that it requires a comparison operator to determine the relative order of elements in the input data set. It can limit the efficiency of the algorithm in certain cases.</li>
                </ul><br/><br/>
            </p>
        </div>
          
        <div id="selection" class="sorting-tab">
            <h1>Selection Sort :</h1>
            <p>
                Selection sort is a simple and efficient sorting algorithm that works by repeatedly selecting the smallest (or largest) element from the unsorted portion of the list and swaps it with the first element of the unsorted part. This process is repeated for the remaining unsorted portion until the entire list is sorted.<br/><br/>
                <h3><strong>How does Selection Sort Work?</strong></h3>
                Let us understand the working of selection sort with the help of the following illustration:<br/><br/>
                <i><strong>Input : </strong>arr[] = {64, 25, 12, 22, 11}</i><br/><br/>
                <i><strong>First Pass : </strong></i><br/>
                <ul>
                    <li>For the first position in the sorted array, the whole array is traversed from index 0 to 4 sequentially. The first position where 64 is stored presently, after traversing whole array it is clear that 11 is the lowest value.</li>
                    <li>Thus, replace 64 with 11. After one iteration 11, which happens to be the least value in the array, tends to appear in the first position of the sorted list.</li>
                </ul><br/>
                <img src="./img/selection_sort_1.png" alt=""><br/><br/>
                <i><strong>Second Pass : </strong></i><br/>
                <ul>
                    <li>For the second position, where 25 is present, again traverse the rest of the array in a sequential manner.</li>
                    <li>After traversing, we found that 12 is the second lowest value in the array and it should appear at the second place in the array, thus swap these values.</li>
                </ul><br/>
                <img src="./img/selection_sort_2.png" alt=""><br/><br/>
                <i><strong>Third Pass : </strong></i><br/>
                <ul>
                    <li>Now, for third place, where 25 is present again traverse the rest of the array and find the third least value present in the array.</li>
                    <li>While traversing, 22 came out to be the third least value and it should appear at the third place in the array, thus swap 22 with element present at third position.</li>
                </ul><br/>
                <img src="./img/selection_sort_3.png" alt=""><br/><br/>
                <i><strong>Fourth Pass : </strong></i><br/>
                <ul>
                    <li>Similarly, for fourth position traverse the rest of the array and find the fourth least element in the array.</li>
                    <li>As 25 is the 4th lowest value hence, it will place at the fourth position.</li>
                </ul><br/>
                <img src="./img/selection_sort_4.png" alt=""><br/><br/>
                <i><strong>Fifth Pass : </strong></i><br/>
                <ul>
                    <li>At last the largest value present in the array automatically get placed at the last position in the array.</li>
                    <li>The resulted array is the sorted array.</li>
                </ul><br/>
                <img src="./img/selection_sort_5.png" alt=""><br/><br/>
                <h3><strong>Complexity Analysis of Selection Sort :</strong></h3>
                <ul>
                    <i><strong>Time Complexity: </strong></i>
                    <li>One loop to select an element of Array one by one = O(N<sup>2</sup>)</li>
                    <li>Another loop to compare that element with every other Array element = O(N)</li>
                    <li>Therefore overall complexity = O(N) * O(N) = O(N*N) = O(N<sup>2</sup>)</li>
                </ul><br/>
                <ul>
                    <i><strong>Auxiliary Complexity: </strong></i>
                    <li>O(1) as the only extra memory used is for temporary variables while swapping two values in Array. The selection sort never makes more than O(N) swaps and can be useful when memory writing is costly.</li>
                </ul><br/>
                <h3><strong>Advantages of Selection Sort :</strong></h3>
                <ul>
                    <li>Simple and easy to understand.</li>
                    <li>Works well with small datasets.</li>
                </ul><br/>
                <h3><strong>Disadvantages of Selection Sort :</strong></h3>
                <ul>
                    <li>Selection sort has a time complexity of O(n<sup>2</sup>) in the worst and average case.</li>
                    <li>Does not work well on large datasets.</li>
                    <li>Does not preserve the relative order of items with equal keys which means it is not stable.</li>
                </ul><br/><br/>
            </p>
        </div>
          
        <div id="merge" class="sorting-tab">
            <h1>Merge Sort :</h1>
            <p>
                <h3><strong>How does Merge Sort Work?</strong></h3>
                Merge sort is a recursive algorithm that continuously splits the array in half until it cannot be further divided i.e., the array has only one element left (an array with one element is always sorted). Then the sorted subarrays are merged into one sorted array.<br/>
                Let us understand the working of selection sort with the help of the following illustration:<br/><br/>
                <i><strong>Input : </strong>arr[] = {38, 27, 43, 10}</i><br/><br/>
                <i><strong>First Pass : </strong></i><br/>
                <ul>
                    <li>Initially divide the array into two equal halves:</li>
                </ul><br/>
                <img src="./img/merge_sort_1.png" alt=""><br/><br/>
                <i><strong>Second Pass : </strong></i><br/>
                <ul>
                    <li>These subarrays are further divided into two halves. Now they become array of unit length that can no longer be divided and array of unit length are always sorted.</li>
                </ul><br/>
                <img src="./img/selection_sort_2.png" alt=""><br/><br/>
                <i><strong>Third Pass : </strong></i><br/>
                <ul>
                    <li>These sorted subarrays are merged together, and we get bigger sorted subarrays.</li>
                </ul><br/>
                <img src="./img/selection_sort_3.png" alt=""><br/><br/>
                <i><strong>Fourth Pass : </strong></i><br/>
                <ul>
                    <li>This merging process is continued until the sorted array is built from the smaller subarrays.</li>
                </ul><br/>
                <img src="./img/selection_sort_4.png" alt=""><br/><br/>
                <h3><strong>Complexity Analysis of Merge Sort :</strong></h3>
                <ul>
                    <i><strong>Time Complexity: </strong></i>
                    <li>
                        O(N log(N)),  Merge Sort is a recursive algorithm and time complexity can be expressed as following recurrence relation. <br/>
                        <i>T(n) = 2T(n/2) + θ(n)</i><br/>
                        The above recurrence can be solved either using the Recurrence Tree method or the Master method. It falls in case II of the Master Method and the solution of the recurrence is θ(Nlog(N)). The time complexity of Merge Sort isθ(Nlog(N)) in all 3 cases (worst, average, and best) as merge sort always divides the array into two halves and takes linear time to merge two halves.
                    </li>
                </ul><br/>
                <ul>
                    <i><strong>Auxiliary Complexity: </strong></i>
                    <li><i>Sorting large datasets: </i>Merge sort is particularly well-suited for sorting large datasets due to its guaranteed worst-case time complexity of O(n log n).</li>
                    <li><i>External sorting: </i>Merge sort is commonly used in external sorting, where the data to be sorted is too large to fit into memory.</li>
                    <li><i>Custom sorting: </i>Merge sort can be adapted to handle different input distributions, such as partially sorted, nearly sorted, or completely unsorted data.</li>
                </ul><br/>
                <h3><strong>Advantages of Selection Sort :</strong></h3>
                <ul>
                    <li><i>Stability: </i>Merge sort is a stable sorting algorithm, which means it maintains the relative order of equal elements in the input array.</li>
                    <li><i>Guaranteed worst-case performance: </i>Merge sort has a worst-case time complexity of O(N logN), which means it performs well even on large datasets.</li>
                    <li><i>Parallelizable : </i>Merge sort is a naturally parallelizable algorithm, which means it can be easily parallelized to take advantage of multiple processors or threads.</li>
                </ul><br/>
                <h3><strong>Disadvantages of Selection Sort :</strong></h3>
                <ul>
                    <li><i>Space complexity : </i>Merge sort requires additional memory to store the merged sub-arrays during the sorting process.</li>
                    <li><i>Not in-place : </i>Merge sort is not an in-place sorting algorithm, which means it requires additional memory to store the sorted data. This can be a disadvantage in applications where memory usage is a concern.</li>
                    <li><i>Not always optimal for small datasets : </i>For small datasets, Merge sort has a higher time complexity than some other sorting algorithms, such as insertion sort. This can result in slower performance for very small datasets.</li>
                </ul><br/><br/>
            </p>
        </div>
    </div>

</div>

<script src="js/script.js"></script>
</body>
</html>