Heap Sort is a comparison-based sorting algorithm that uses a binary heap to repeatedly extract the largest element and place it in its correct sorted position.

What is the time complexity of Heap Sort?

Heap Sort runs in O(n log n) time in the best, average, and worst cases, making it one of the most consistent sorting algorithms.

No. Heap Sort is not a stable sorting algorithm because equal elements may not preserve their original relative order after sorting.

Is Heap Sort an in-place algorithm?

Yes. Heap Sort sorts the array in place and requires only O(1) additional memory, excluding the input array itself.

Why should I learn Heap Sort?

Heap Sort is an important algorithm because it guarantees O(n log n) performance, uses constant extra memory, and introduces the binary heap data structure, which is widely used in priority queues and scheduling systems.

Playground Component

Heap Sort
Visualizer

An interactive Heap Sort visualization built with HTML, CSS, and JavaScript. Watch how the algorithm builds a max heap, extracts the largest element, and sorts the array step by step with adjustable animation speed.

Heap Sort Visualizer

Copy Code


  
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Quick Sort Visualizer</title>

<!-- <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet"> -->

<style>
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

:root{
    --bg:#090909;
    --panel:#111111;
    --panel2:#171717;
    --gold:#f4c430;
    --gold2:#ffd54d;
    --border:#3a2d08;
    --text:#f5f5f5;
}

body{
    font-family:'Poppins',sans-serif;
    background:
        radial-gradient(circle at top,#1b1606 0%,#090909 35%),
        var(--bg);
    color:var(--text);
    min-height:100vh;
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:40px 25px;
}

h1{
    font-size:3rem;
    font-weight:700;
    color:var(--gold);
    margin-bottom:30px;
    text-shadow:0 0 18px rgba(244,196,48,.18);
    letter-spacing:.5px;
}

.controls{
    display:flex;
    gap:18px;
    flex-wrap:wrap;
    justify-content:center;
    margin-bottom:35px;
}

button{
    min-width:170px;
    padding:15px 22px;
    font-size:17px;
    font-weight:600;
    border-radius:14px;
    border:1px solid #705510;
    background:linear-gradient(180deg,#ffd54d,#e7b817);
    color:#121212;
    cursor:pointer;
    transition:.28s;
    box-shadow:
        0 8px 20px rgba(0,0,0,.45),
        inset 0 1px 0 rgba(255,255,255,.35);
}

button:hover{
    transform:translateY(-3px);
    box-shadow:
        0 14px 30px rgba(244,196,48,.22),
        inset 0 1px 0 rgba(255,255,255,.4);
}

button:active{
    transform:scale(.98);
}

#container{
    width:min(94%,1300px);
    height:590px;
    background:linear-gradient(180deg,#121212,#0b0b0b);
    border:1px solid var(--border);
    border-radius:24px;
    display:flex;
    align-items:flex-end;
    justify-content:center;
    gap:4px;
    padding:16px;
    box-shadow:
        0 20px 45px rgba(0,0,0,.55),
        inset 0 0 0 1px rgba(255,255,255,.03),
        0 0 35px rgba(244,196,48,.06);
    position:relative;
    overflow:hidden;
}

#container::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
        linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px);
    background-size:100% 60px;
    opacity:.35;
}

.bar{
    width:12px;
    background:linear-gradient(to top,#b88700,#ffd54d);
    border-radius:4px 4px 0 0;
    transition:
        height linear,
        background .2s linear,
        transform .15s linear;
    box-shadow:0 0 10px rgba(244,196,48,.15);
    z-index:1;
}

@media(max-width:900px){
    h1{
        font-size:2.2rem;
    }

    button{
        min-width:145px;
        font-size:15px;
    }

    #container{
        height:470px;
    }

    .bar{
        width:8px;
        gap:2px;
    }
}
</style>
</head>

<body>

<h1>Quick Sort Visualizer</h1>

<div class="controls">
    <button onclick="randomize()">Randomize</button>
    <button onclick="heapSort()">Sort</button>
    <button id="speedBtn" onclick="toggleSpeed()">Speed: Normal</button>
</div>

<div id="container"></div>

<script>

let sorting = false;

const speedLevels = [
    { name: "Very Slow", delay: 500 },
    { name: "Slow", delay: 120 },
    { name: "Normal", delay: 70 },
    { name: "Fast", delay: 35 },
    { name: "Very Fast", delay: 1 }
];

let speedIndex = 2;
let speed = speedLevels[speedIndex].delay;

const container = document.getElementById("container");

let values=[];

function toggleSpeed() {
    speedIndex++;
    if (speedIndex >= speedLevels.length) speedIndex = 0;
    speed = speedLevels[speedIndex].delay;
    document.getElementById("speedBtn").textContent =
        "Speed: " + speedLevels[speedIndex].name;
}

function createBars(){
    container.innerHTML="";
    values.forEach(v=>{
        const bar=document.createElement("div");
        bar.className="bar";
        bar.style.height=v+"px";
        container.appendChild(bar);
    });
}

function randomize(){
    values=[];
    for(let i=0;i<100;i++){
        values.push(Math.floor(Math.random()*350)+30);
    }
    createBars();
}

function sleep(ms){
    return new Promise(resolve=>setTimeout(resolve,ms));
}

async function heapSort() {
    if (sorting) return;
    sorting = true;

    const bars = document.getElementsByClassName("bar");
    let n = values.length;

    // Build Max Heap
    for (let i = Math.floor(n / 2) - 1; i >= 0; i--) {
        await heapify(n, i, bars);
    }

    // Extract elements one by one
    for (let i = n - 1; i > 0; i--) {

        // Highlight root and current end
        bars[0].style.background = "#9c27b0";
        bars[i].style.background = "#ff3b30";

        await sleep(speed);

        // Swap
        [values[0], values[i]] = [values[i], values[0]];

        bars[0].style.height = values[0] + "px";
        bars[i].style.height = values[i] + "px";

        bars[i].style.background = "#39d353";

        await sleep(speed);

        await heapify(i, 0, bars);

        bars[0].style.background = "linear-gradient(to top,#b88700,#ffd54d)";
    }

    bars[0].style.background = "#39d353";

    sorting = false;
}

async function heapify(n, i, bars) {

    let largest = i;
    let left = 2 * i + 1;
    let right = 2 * i + 2;

    bars[i].style.background = "#9c27b0";

    if (left < n) {
        bars[left].style.background = "#ff9800";
        await sleep(speed);

        if (values[left] > values[largest]) {
            largest = left;
        }

        bars[left].style.background = "linear-gradient(to top,#b88700,#ffd54d)";
    }

    if (right < n) {
        bars[right].style.background = "#ff9800";
        await sleep(speed);

        if (values[right] > values[largest]) {
            largest = right;
        }

        bars[right].style.background = "linear-gradient(to top,#b88700,#ffd54d)";
    }

    if (largest !== i) {

        [values[i], values[largest]] = [values[largest], values[i]];

        bars[i].style.height = values[i] + "px";
        bars[largest].style.height = values[largest] + "px";

        bars[largest].style.background = "#ff3b30";

        await sleep(speed);

        bars[largest].style.background = "linear-gradient(to top,#b88700,#ffd54d)";

        await heapify(n, largest, bars);
    }

    bars[i].style.background = "linear-gradient(to top,#b88700,#ffd54d)";
}

randomize();

</script>

</body>
</html>

About this Component

Heap Sort is an efficient comparison-based sorting algorithm that uses a binary heap data structure. It begins by transforming the array into a max heap, where the largest element is always at the root. The root is then swapped with the last element, the heap size is reduced, and the heap property is restored. This process repeats until the array is fully sorted. This interactive visualization lets you observe how a max heap is built, how the largest element is repeatedly extracted, and how the heap is adjusted after each operation. You can randomize the array, control the animation speed, and follow every step of the sorting process in real time. Heap Sort has a time complexity of O(n log n) in the best, average, and worst cases, making it a reliable and predictable sorting algorithm. It is an in-place algorithm but is not stable because equal elements may change their relative order during sorting.