Bubble Sort Visualization using JavaScript

Last Updated : 10 May, 2023

GUI(Graphical User Interface) helps in better understanding than programs. In this article, we will visualize Bubble Sort using JavaScript. We will see how the elements are swapped in Bubble Sort and how we get the final sorted array. We will also visualize the time complexity of Bubble Sort.

Refer:

Approach:

First, we will generate a random array using Math.random() function.
Different colors are used to indicate which elements are being compared, sorted, and unsorted.
Since the algorithm performs the operation very fast, the setTimeout() function has been used to slow down the process.
The new array can be generated by pressing the "Ctrl+R" key.
The sorting is performed using BubbleSort() function using the swap() function

Example: Here is the implementation of the above-explained steps.

Below is the program to visualize the Bubble Sort algorithm.

index.html

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
</head>

<body>
    <br />
    <p class="header">Bubble Sort</p>

    <div id="array"></div>
    <script src="script.js"></script>
</body>
</html>

style.css: The following is the content for "style.css" used in the above file.

CSS

* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

.header {
    font-size: 20px;
    text-align: center;
}

#array {
    background-color: white;
    height: 413px;
    width: 598px;
    margin: auto;
    position: relative;
    margin-top: 64px;
}

.block {
    width: 28px;
    background-color: #6b5b95;
    position: absolute;
    bottom: 0px;
    transition: 0.2s all ease;
}

.block_id {
    position: absolute;
    color: black;
    margin-top: -20px;
    width: 100%;
    text-align: center;
}

script.js: The following is the content for "script.js" file used in the above HTML code.

javascript

var container = document.getElementById(& quot; array & quot;);

// Function to generate the array of blocks
function generatearray() {
    for (var i = 0; i & lt; 20; i++) {

        // Return a value from 1 to 100 (both inclusive)
        var value = Math.ceil(Math.random() * 100);

        // Creating element div
        var array_ele = document.createElement(& quot; div & quot;);

        // Adding class 'block' to div
        array_ele.classList.add(& quot; block & quot;);

        // Adding style to div
        array_ele.style.height = `${value * 3}px`;
        array_ele.style.transform = `translate(${i * 30}px)`;

        // Creating label element for displaying 
        // size of particular block
        var array_ele_label = document.createElement(& quot; label & quot;);
        array_ele_label.classList.add(& quot; block_id & quot;);
        array_ele_label.innerText = value;

        // Appending created elements to index.html 
        array_ele.appendChild(array_ele_label);
        container.appendChild(array_ele);
    }
}

// Promise to swap two blocks
function swap(el1, el2) {
    return new Promise((resolve) =& gt; {

        // For exchanging styles of two blocks
        var temp = el1.style.transform;
        el1.style.transform = el2.style.transform;
        el2.style.transform = temp;

        window.requestAnimationFrame(function () {

            // For waiting for .25 sec
            setTimeout(() =& gt; {
                container.insertBefore(el2, el1);
                resolve();
            }, 250);
    });
});
}

// Asynchronous BubbleSort function
async function BubbleSort(delay = 100) {
    var blocks = document.querySelectorAll(& quot;.block & quot;);

    // BubbleSort Algorithm
    for (var i = 0; i & lt; blocks.length; i += 1) {
        for (var j = 0; j & lt; blocks.length - i - 1; j += 1) {

            // To change background-color of the
            // blocks to be compared
            blocks[j].style.backgroundColor = & quot; #FF4949 & quot;;
            blocks[j + 1].style.backgroundColor = & quot; #FF4949 & quot;;

            // To wait for .1 sec
            await new Promise((resolve) =& gt;
            setTimeout(() =& gt; {
                resolve();
            }, delay)
            );

            console.log(& quot; run & quot;);
            var value1 = Number(blocks[j].childNodes[0].innerHTML);
            var value2 = Number(blocks[j + 1]
                .childNodes[0].innerHTML);

            // To compare value of two blocks
            if (value1 & gt; value2) {
                await swap(blocks[j], blocks[j + 1]);
                blocks = document.querySelectorAll(& quot;.block & quot;);
            }

            // Changing the color to the previous one
            blocks[j].style.backgroundColor = & quot;#6b5b95 & quot;;
            blocks[j + 1].style.backgroundColor = & quot;#6b5b95 & quot;;
        }

        //changing the color of greatest element 
        //found in the above traversal
        blocks[blocks.length - i - 1]
            .style.backgroundColor = & quot;#13CE66 & quot;;
    }
}

// Calling generatearray function
generatearray();

// Calling BubbleSort function
BubbleSort();