Skip to content
Related Articles

Related Articles

Binary Search Visualization using JavaScript
  • Last Updated : 22 Feb, 2021
GeeksforGeeks - Summer Carnival Banner

GUI(Graphical User Interface) helps in better  understanding than programs. In this article, we will visualize Binary Search using JavaScript. We will see how the elements are being traversed in Binary Search until the given element is found. We will also visualize the time complexity of Binary Search.

Reference:

Approach:

  • First, we will generate a random array using Math.random() function and then sort it using sort() function.
  • Different color is used to indicate which element is being traversed at current time.
  • 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 searching is performed using BinarySearch() function.

Example:

Before Searching

After Searching



Below is the program to visualize the Binary Search algorithm.

index.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">Binary Search</p>
  
  
    <div id="array"></div>
    <br /><br />
  
    <div style="text-align: center">
      <label for="fname">
        Number to be Searched:
      </label>
      <input type="text" id="fname"
             name="fname" />
      <br /><br />
      <button id="btn" 
              onclick="BinarySearch()">Search</button>
      <br />
      <br />
      <div id="text"></div>
    </div>
  
    <script src="script.js"></script>
  </body>
</html>

style.css




* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}
  
.header {
  font-size: 35px;
  text-align: center;
}
  
#array {
  background-color: white;
  height: 305px;
  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




var container = document.getElementById("array");
  
// Function to generate the array of blocks
function generatearray() {
  
  // Creating an array
  var arr = [];
  
  // Filling array with random values
  for (var i = 0; i < 20; i++) {
    // Return a value from 1 to 100 (both inclusive)
    var val = Number(Math.ceil(Math.random() * 100));
    arr.push(val);
  }
  
  // Sorting Array in ascending order
  arr.sort(function (a, b) {
    return a - b;
  });
  
  for (var i = 0; i < 20; i++) {
    var value = arr[i];
  
    // 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);
  }
}
  
// Asynchronous BinarySearch function
async function BinarySearch(delay = 300) {
  var blocks = document.querySelectorAll(".block");
  var output = document.getElementById("text");
  
  //Extracting the value of the element to be searched
  var num = document.getElementById("fname").value;
  
  //Colouring all the blocks voilet
  for (var i = 0; i < blocks.length; i += 1) {
    blocks[i].style.backgroundColor = "#6b5b95";
  }
  
  output.innerText = "";
  
  // BinarySearch Algorithm
  
  var start = 0;
  var end = 19;
  var flag = 0;
  while (start <= end) {
    //Midddle index
    var mid = Math.floor((start + end) / 2);
    blocks[mid].style.backgroundColor = "#FF4949";
  
    //Value at mid index
    var value = Number(blocks[mid].childNodes[0].innerHTML);
  
    // To wait for .1 sec
    await new Promise((resolve) =>
      setTimeout(() => {
        resolve();
      }, delay)
    );
  
    //Current element is equal to the element
    //entered by the user
    if (value == num) {
      output.innerText = "Element Found";
      blocks[mid].style.backgroundColor = "#13CE66";
      flag = 1;
      break;
    }
    //Current element is greater than the element
    //entered by the user
    if (value > num) {
      end = mid - 1;
      blocks[mid].style.backgroundColor = "#6b5b95";
    } else {
      start = mid + 1;
      blocks[mid].style.backgroundColor = "#6b5b95";
    }
  }
  if (flag === 0) {
    output.innerText = "Element Not Found";
  }
}
  
// Calling generatearray function
generatearray();

Output:

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :