Visualizing Bubble Sort in JavaScript: A Step-by-Step Approach

Sorting algorithms are fundamental to computer science, and Bubble Sort is one of the simplest to understand and implement. While Bubble Sort isn’t the most efficient sorting algorithm, it provides an excellent starting point for learning about sorting techniques. In this post, we’ll explore how to visualize Bubble Sort using JavaScript and a dynamic UI.

---

What is Bubble Sort?

Bubble Sort is a simple comparison-based sorting algorithm. It repeatedly steps through the list, compares adjacent items, and swaps them if they are in the wrong order. The process repeats until the list is sorted.

Algorithm Steps:

1. Start at the beginning of the array.
2. Compare each pair of adjacent elements.
3. Swap them if they are in the wrong order.
4. Repeat the above steps until the array is sorted.

---

Code Walkthrough

Below is an interactive Bubble Sort implementation in JavaScript, designed to visualize the sorting process dynamically.

Core Functionality

The bubbleSort function takes two arguments:

• numArray: The array to be sorted.
• divContainer: The container holding the visual elements representing the array.

Key Features

1. Dynamic Speed Adjustment: A slider allows users to adjust the sorting speed dynamically, enhancing the interactivity.
2. Visualization:
   • Each pair of elements being compared is highlighted.
   • Swapped elements are visually animated.
   • Sorted elements are marked in green.
3. Asynchronous Execution: The use of await and async enables step-by-step visualization of the sorting process.

Here’s the complete code:

const bubbleSort = async (numArray, divContainer) => {
   slider.addEventListener('input', (event) => {
      speed = event.target.value;
      if (speed < 0) {
         speed = Math.abs(speed * 500) + 1000;
      } else {
         speed = Math.abs(-(speed * 500) + 1000);
      }
      console.log(speed);
   });

   let i, j, count = 0;
   let l = 0, k = 0;

   for (i = 0; i < numArray.length - 1; i++) {
      for (j = 0; j < numArray.length - 1 - i; j++) {
         l = 0;
         k = 0;

         while (divContainer.childNodes[l].style.order != numArray[j][1]) l++;
         while (divContainer.childNodes[k].style.order != numArray[j + 1][1]) k++;

         await sleep(speed);
         setColor(divContainer.childNodes[l], "rgb(173, 216, 251)"); 
         setColor(divContainer.childNodes[k], "rgb(173, 216, 251)"); 
         await sleep(speed);

         if (numArray[j][0] > numArray[j + 1][0]) {
            swap(numArray, j, j + 1, divContainer.childNodes, l, k);
            await sleep(speed);
            setColor(divContainer.childNodes[l], "rgb(166, 218, 216)");
            setColor(divContainer.childNodes[k], "rgb(166, 218, 216)");
         }
         setColor(divContainer.childNodes[l], "rgb(166, 218, 216)");
         setColor(divContainer.childNodes[k], "rgb(166, 218, 216)");
      }

      await sleep(speed);
      for (let m = 0; m < numArray.length; m++) {
         if (divContainer.childNodes[m].innerHTML == numArray[j][0]) {
            setColor(divContainer.childNodes[m], "#ffff9e"); 
         }
      }
   }

   await sleep(speed);
   for (let m = 0; m < numArray.length; m++) {
      if (divContainer.childNodes[m].style.backgroundColor != "#ffff9e") {
         setColor(divContainer.childNodes[m], "#ffff9e"); 
      }
   }
};

---

Highlights and Explanation

Dynamic Speed Adjustment

The slider input dynamically adjusts the speed of the sorting process. The speed variable determines the delay, providing an interactive experience:

slider.addEventListener('input', (event) => {
   speed = event.target.value;
   speed = speed < 0 ? Math.abs(speed * 500) + 1000 : Math.abs(-(speed * 500) + 1000);
});

Visualization with Colors

• Active Elements: Highlighted in light orange (rgb(251, 215, 173)) during comparisons.
• Swapped Elements: Highlighted in teal (rgb(166, 218, 216)) after swapping.
• Sorted Elements: Marked in green (#9eff9e) when sorted.

The setColor function updates the element colors dynamically.

Asynchronous Execution

The await sleep(speed) pauses the execution for the specified duration to allow real-time visualization.

---

Conclusion

This implementation demonstrates how to combine a classic algorithm like Bubble Sort with modern JavaScript features to create an engaging and educational visualization. By adding interactivity, such as dynamic speed control, learners can better understand the sorting process.

---

Try It Yourself!

Copy the code and run it in your project to see Bubble Sort in action. Experiment with different array sizes and speeds to explore how the algorithm behaves.

---

Let me know if you’d like to tweak this blog post or focus on specific aspects of the code!