Playground Component
Binary Search
Visualizer
Visualize Binary Search as it repeatedly halves a sorted array to locate a target value efficiently.
Binary Search Visualizer
Status
Idle
Left
-
Mid
-
Right
-
Comparisons
0
Target
-
Copy Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Binary Search Visualizer</title>
<style>
:root{--bg:#090909;--panel:#111111;--gold:#f4c430;--gold-dark:#b88700;--text:#f5f5f5;--border:#2f2f2f}
*{box-sizing:border-box}
body{margin:0;background:#090909}
.search-visualizer{min-height:100vh;padding:40px;background:radial-gradient(circle at top,#1a1505 0%,#090909 40%);color:var(--text);font-family:'Poppins',Arial,sans-serif}
.search-visualizer h2{text-align:center;font-size:3rem;color:var(--gold);margin:0 0 35px}
.controls{display:flex;justify-content:center;gap:15px;flex-wrap:wrap;margin-bottom:35px}
.controls input{width:160px;padding:14px;border-radius:12px;border:1px solid #555;background:#151515;color:var(--gold);text-align:center;font-size:16px;outline:none}
.controls input:focus{border-color:var(--gold)}
.controls button{padding:14px 22px;border:none;border-radius:12px;cursor:pointer;font-weight:600;font-size:15px;background:linear-gradient(180deg,#ffd54d,#d9a900);color:#111;transition:.25s}
.controls button:hover{transform:translateY(-2px)}
.stats{width:100%;max-width:900px;margin:auto auto 40px;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.stat-box{background:#151515;border:1px solid #2b2b2b;border-radius:14px;padding:18px;text-align:center}
.stat-box h4{margin:0;color:#999;font-size:.9rem}
.stat-box p{margin:8px 0 0;color:var(--gold);font-size:1.4rem;font-weight:bold}
.array{display:flex;justify-content:center;flex-wrap:wrap;gap:14px}
.cell{width:72px;height:72px;border-radius:14px;background:#171717;border:2px solid #2c2c2c;display:flex;flex-direction:column;justify-content:center;align-items:center;transition:.25s}
.cell div{font-size:1.3rem;font-weight:700}
.cell small{margin-top:5px;color:#999;font-size:.72rem}
.cell.default{background:#171717}
.cell.checking{background:#ffb000;color:black;border-color:#ffd54d;transform:translateY(-8px) scale(1.05);box-shadow:0 0 20px rgba(255,193,7,.45)}
.cell.found{background:#25c05a;color:white;border-color:#43e97b;transform:scale(1.12);box-shadow:0 0 22px rgba(37,192,90,.5)}
.cell.discarded{opacity:.28}
.cell.left{border:2px solid #4ea8ff}
.cell.right{border:2px solid #ff6b6b}
.cell.mid{background:#b26dff;border-color:#d7b3ff}
@media(max-width:768px){.search-visualizer{padding:20px}.search-visualizer h2{font-size:2rem}.stats{grid-template-columns:repeat(2,1fr)}.cell{width:58px;height:58px}.cell div{font-size:1rem}}
</style>
</head>
<body>
<div class="search-visualizer">
<h2>Binary Search Visualizer</h2>
<div class="controls">
<button id="randomizeBtn">Randomize</button>
<input id="targetInput" type="number" placeholder="Target">
<button id="searchBtn">Search</button>
<button id="speedBtn">Speed: Normal</button>
</div>
<div class="stats">
<div class="stat-box"><h4>Status</h4><p id="status">Idle</p></div>
<div class="stat-box"><h4>Left</h4><p id="left">-</p></div>
<div class="stat-box"><h4>Mid</h4><p id="mid">-</p></div>
<div class="stat-box"><h4>Right</h4><p id="right">-</p></div>
<div class="stat-box"><h4>Comparisons</h4><p id="comparisons">0</p></div>
<div class="stat-box"><h4>Target</h4><p id="targetValue">-</p></div>
</div>
<div id="array" class="array"></div>
</div>
<script>
const speedLevels=[{name:"Very Slow",delay:500},{name:"Slow",delay:200},{name:"Normal",delay:100},{name:"Fast",delay:50},{name:"Very Fast",delay:10}];
let array=[],speedIndex=2,searching=false,left=-1,mid=-1,right=-1,comparisons=0,statusText="Idle";
const arrayEl=document.getElementById("array"),targetInput=document.getElementById("targetInput"),speedBtn=document.getElementById("speedBtn");
function sleep(ms){return new Promise(resolve=>setTimeout(resolve,ms))}
function createSortedArray(){const used=new Set(),arr=[];while(arr.length<48){const value=Math.floor(Math.random()*100)+10;if(!used.has(value)){used.add(value);arr.push({value,state:"default"})}}return arr.sort((a,b)=>a.value-b.value)}
function setStatus(value){statusText=value;document.getElementById("status").textContent=value}
function setMarker(id,value){document.getElementById(id).textContent=value===-1?"-":value}
function setComparisons(value){comparisons=value;document.getElementById("comparisons").textContent=value}
function syncTarget(){document.getElementById("targetValue").textContent=targetInput.value||"-"}
function renderArray(){
arrayEl.innerHTML="";
array.forEach((item,index)=>{
const classes=["cell"];
if(index===left)classes.push("left");
if(index===right)classes.push("right");
if(index===mid)classes.push("mid");
classes.push(item.state);
const cell=document.createElement("div");
cell.className=classes.join(" ");
cell.innerHTML=`<div>${item.value}</div><small>Index ${index}</small>`;
arrayEl.appendChild(cell);
});
}
function setLeft(value){left=value;setMarker("left",value);renderArray()}
function setRight(value){right=value;setMarker("right",value);renderArray()}
function setMid(value){mid=value;setMarker("mid",value);renderArray()}
function setCellState(index,state){if(array[index]){array[index].state=state;renderArray()}}
function resetStates(){array=array.map(item=>({...item,state:"default"}));renderArray()}
function randomize(){if(searching)return;array=createSortedArray();targetInput.value="";setLeft(-1);setRight(-1);setMid(-1);setComparisons(0);setStatus("Idle");syncTarget();renderArray()}
function toggleSpeed(){speedIndex=(speedIndex+1)%speedLevels.length;speedBtn.textContent=`Speed: ${speedLevels[speedIndex].name}`}
async function binarySearch(){
if(searching)return;
const target=Number(targetInput.value);
if(Number.isNaN(target)||targetInput.value==="")return;
searching=true;resetStates();setComparisons(0);setStatus("Searching...");syncTarget();
let l=0,r=array.length-1,comps=0;
while(l<=r){
const m=Math.floor((l+r)/2);
setLeft(l);setRight(r);setMid(m);setCellState(m,"checking");comps++;setComparisons(comps);
await sleep(speedLevels[speedIndex].delay);
if(array[m].value===target){setCellState(m,"found");setStatus("Found!");searching=false;return}
if(array[m].value<target){for(let i=l;i<=m;i++){if(i!==m)setCellState(i,"discarded")}l=m+1}
else{for(let i=m;i<=r;i++){if(i!==m)setCellState(i,"discarded")}r=m-1}
setCellState(m,"discarded");
await sleep(speedLevels[speedIndex].delay);
}
setStatus("Not Found");setLeft(-1);setRight(-1);setMid(-1);searching=false;
}
document.getElementById("randomizeBtn").addEventListener("click",randomize);
document.getElementById("searchBtn").addEventListener("click",binarySearch);
speedBtn.addEventListener("click",toggleSpeed);
targetInput.addEventListener("input",syncTarget);
randomize();
</script>
</body>
</html>
About this Component
Binary Search is an efficient searching algorithm for sorted data. It compares the target value with the middle element, then discards the half of the array where the target cannot exist. This halving process continues until the target is found or the search range becomes empty. This interactive visualization shows how the low, mid, and high pointers move during each step, making it easier to understand how Binary Search narrows the search space so quickly. Binary Search has a best-case time complexity of O(1) when the middle element is the target, and an average and worst-case time complexity of O(log n). It uses O(1) extra space in its iterative form, but it requires the input array to be sorted before the search begins.
Explore More Components
Discover more components from the Playground.
