What is Selection Sort?

Selection Sort is a comparison-based sorting algorithm that repeatedly finds the smallest element in the unsorted portion of an array and places it into its correct position.

What is the time complexity of Selection Sort?

Selection Sort has a best, average, and worst-case time complexity of O(n²), because it always scans the remaining unsorted elements to find the minimum.

Is Selection Sort stable?

No. The standard implementation of Selection Sort is not stable because swapping elements can change the relative order of equal values.

Is Selection Sort an in-place algorithm?

Yes. Selection Sort sorts the array in place and requires only O(1) additional memory.

Why should I learn Selection Sort?

Selection Sort is easy to understand and helps beginners learn array traversal, finding minimum values, swapping elements, and the fundamentals of sorting algorithms before moving to more advanced algorithms like Merge Sort or Quick Sort.

Playground Component

Selection Sort
Visualizer

An interactive Selection Sort visualization built with HTML, CSS, and JavaScript. Watch the algorithm repeatedly find the minimum element and place it in its correct position while controlling the animation speed.

Selection 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>Selection 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>Selection Sort Visualizer</h1>

<div class="controls">
    <button onclick="randomize()">Randomize</button>
    <button onclick="selectionSort()">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 selectionSort() {

    if (sorting) return;
    sorting = true;

    const bars = document.getElementsByClassName("bar");

    for (let i = 0; i < values.length; i++) {

        let minIndex = i;

        // Current position being filled
        bars[i].style.background = "#2196f3";

        for (let j = i + 1; j < values.length; j++) {

            // Comparing current minimum with j
            bars[minIndex].style.background = "#ff9800";
            bars[j].style.background = "#ff3b30";

            bars[minIndex].style.transform = "scaleY(1.03)";
            bars[j].style.transform = "scaleY(1.03)";

            await sleep(speed);

            if (values[j] < values[minIndex]) {

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

                minIndex = j;
                bars[minIndex].style.background = "#ff9800";
            } else {
                bars[j].style.background = "linear-gradient(to top,#b88700,#ffd54d)";
            }

            bars[j].style.transform = "scaleY(1)";
            bars[minIndex].style.transform = "scaleY(1)";
        }

        if (minIndex !== i) {

            [values[i], values[minIndex]] = [values[minIndex], values[i]];

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

            await sleep(speed);
        }

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

    sorting = false;
}

randomize();

</script>

</body>
</html>

About this Component

Selection Sort is a simple comparison-based sorting algorithm that repeatedly selects the smallest element from the unsorted portion of an array and places it at the beginning. Unlike Bubble Sort, it performs only one swap during each pass, making its behavior easy to visualize. This interactive visualization lets you observe how the algorithm searches for the minimum value, highlights the current minimum, and places it into its correct sorted position. You can randomize the array, control the animation speed, and understand every step of the sorting process. Although Selection Sort has an O(n²) time complexity and is rarely used for large datasets, it is an excellent algorithm for learning searching, comparisons, swapping, and the fundamentals of in-place sorting algorithms.