Quick Sort(Lomuto Partition) Visualization using JavaScript - GeeksforGeeks

25 Feb, 2021
GUI(Graphical User Interface) helps in better in understanding than programs. In this article, we will visualize Quick Sort using JavaScript. We will see how the array is being partitioned using Lomuto Partition and then how we get the final sorted array. We will also visualize the time complexity of Quick Sort. 
Reference:
Quick Sort
Lomuto Partition
Asynchronous Function in JavaScript
Approach:
First, we will generate a random array using Math.random() function.
Different colors are used to indicate which element is compared, left partition, right partition and pivot element.
Since the algorithm performs the operation very fast, the setTimeout() function has been used to slow down the process.
New array can be generated by pressing the “Ctrl+R” key.
The sorting is performed using QuickSort() function using lometo_partition() function
Example:
Before Sorting
After Sorting
Below is the program to visualize the Quick Sort algorithm.
index.html
<!DOCTYPE html><html lang="en">  <head>    <link rel="stylesheet" href="style.css" />  </head>    <body>    <br />    <p class="header">      Quick Sort (Lometo Partition)    </p>        <div id="array"></div>    <div id="count"></div>    <br />    <h2 class="range"         style="text-align: center"></h2>      <script src="script.js"></script>  </body></html>
style.css
* {  margin: 0px;  padding: 0px;  box-sizing: border-box;}.header {  font-size: 20px;  text-align: center;}#array {  background-color: white;  height: 278px;  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;}.block_id2 {  position: absolute;  color: black;  margin-top: 22px;  width: 100%;  text-align: center;}.block2 {  width: 28px;  background-color: darkgray;  position: absolute;  transition: 0.2s all ease;}.block_id3 {  position: absolute;  color: black;  margin-top: 1px;  width: 100%;  text-align: center;}#count {  height: 20px;  width: 598px;  margin: auto;}
script.js
var container = document.getElementById("array");  // Function to generate the array of blocksfunction generatearray() {  for (var i = 0; i < 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("div");      // Adding class 'block' to div    array_ele.classList.add("block");      // 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("label");    array_ele_label.classList.add("block_id");    array_ele_label.innerText = value;      // Appending created elements to index.html    array_ele.appendChild(array_ele_label);    container.appendChild(array_ele);  }}  // Function to generate indexesvar count_container = document.getElementById("count");function generate_idx() {  for (var i = 0; i < 20; i++) {    // Creating element div    var array_ele2 = document.createElement("div");      // Adding class 'block2' to div    array_ele2.classList.add("block2");      // Adding style to div    array_ele2.style.height = `${20}px`;    array_ele2.style.transform = `translate(${i * 30}px)`;      // Adding indexes    var array_ele_label2 =     document.createElement("label");    array_ele_label2.classList.add("block_id3");    array_ele_label2.innerText = i;      // Appending created elements to index.html    array_ele2.appendChild(array_ele_label2);    count_container.appendChild(array_ele2);  }}  async function lometo_partition(l, r, delay = 700) {  var blocks = document.querySelectorAll(".block");    // Storing the value of pivot element  var pivot =   Number(blocks[r].childNodes[0].innerHTML);  var i = l - 1;  blocks[r].style.backgroundColor = "red";  document.  getElementsByClassName("range")[0].innerText = `[${l},${r}]`;    for (var j = l; j <= r - 1; j++) {    // To change background-color of the    // blocks to be compared    blocks[j].style.backgroundColor = "yellow";    // To wait for 700 milliseconds    await new Promise((resolve) =>      setTimeout(() => {        resolve();      }, delay)    );    var value =     Number(blocks[j].childNodes[0].innerHTML);      // To compare value of two blocks    if (value < pivot) {      i++;      var temp1 = blocks[i].style.height;      var temp2 = blocks[i].childNodes[0].innerText;      blocks[i].style.height = blocks[j].style.height;      blocks[j].style.height = temp1;      blocks[i].childNodes[0].innerText =      blocks[j].childNodes[0].innerText;      blocks[j].childNodes[0].innerText = temp2;      blocks[i].style.backgroundColor = "orange";      if (i != j) blocks[j].style.backgroundColor = "pink";      //To wait for 700 milliseconds      await new Promise((resolve) =>        setTimeout(() => {          resolve();        }, delay)      );    } else blocks[j].style.backgroundColor = "pink";  }  // Swapping the ith with pivot element  i++;  var temp1 = blocks[i].style.height;  var temp2 = blocks[i].childNodes[0].innerText;  blocks[i].style.height = blocks[r].style.height;  blocks[r].style.height = temp1;  blocks[i].childNodes[0].innerText =  blocks[r].childNodes[0].innerText;  blocks[r].childNodes[0].innerText = temp2;  blocks[r].style.backgroundColor = "pink";  blocks[i].style.backgroundColor = "green";    // To wait for 2100 milliseconds  await new Promise((resolve) =>    setTimeout(() => {      resolve();    }, delay * 3)  );  document.getElementsByClassName("range")[0].innerText = "";  for (var k = 0; k < 20; k++)   blocks[k].style.backgroundColor = "#6b5b95";  return i;}  // Asynchronous QuickSort functionasync function QuickSort(l, r, delay = 100) {  if (l < r) {    // Storing the index of pivot element after partition    var pivot_idx = await lometo_partition(l, r);    // Recursively calling quicksort for left partition    await QuickSort(l, pivot_idx - 1);    // Recursively calling quicksort for right partition    await QuickSort(pivot_idx + 1, r);  }}  // Calling generatearray functiongeneratearray();  // Calling generate_idx functiongenerate_idx();  // Calling QuickSort functionQuickSort(0, 19);
Output:
Quick Sort
Technical Scripter 2020
JavaScript
Sorting
Technical Scripter
Web Technologies
Sorting
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Remove elements from a JavaScript Array
Difference between var, let and const keywords in JavaScript
Difference Between PUT and PATCH Request
JavaScript | Promises
How to get character array from string in JavaScript?