Sorting Algorithm Visualizations

index.html

<div class="app-container">

  <header>
    <h1>Algorithm Visualizer</h1>
    <p>Some popular sorting algorithms, visualized.
  </header>

  <div class="controls">
    <label for="speed"><strong>Sorting time:</strong></label><br>Fast
    <input type="range" id="speed" min="100" max="2000" value="1000" step="100"> Slow

  </div>

  <section class="algorithm" id="bubble-sort">
    <h2>Bubble Sort</h2>
    <div class="description">
      <p>Bubble sort works by repeatedly stepping through the list to be sorted, comparing each pair of adjacent items and swapping them if they are in the wrong order. The pass through the list is repeated until no swaps are needed, which means the list is sorted. This algorithm is known for its simplicity but is highly inefficient for large datasets.</p>

    </div>
    <button onclick="startBubbleSort()">Sort</button>
    <div id="bubble-sort-visualizer" class="visualizer"></div>
    <p id="statusText" class="status-text">Press 'Start Sorting' to visualize the bubble sort algorithm.</p>
  </section>

  <section class="algorithm" id="quick-sort">
    <h2>Quick Sort</h2>
    <div class="description">
      <p>Quick sort is a divide-and-conquer algorithm that selects a 'pivot' element from the array and partitions the other elements into two sub-arrays, according to whether they are less than or greater than the pivot. The sub-arrays are then sorted recursively. This can be done in-place, requiring small additional amounts of memory to perform the sorting.</p>

    </div>
    <button onclick="startQuickSort()">Sort</button>
    <div id="quick-sort-visualizer" class="visualizer"></div>
    <p id="statusTextQuick" class="status-text">Press 'Start Sorting' to visualize the quick sort algorithm.</p>

  </section>

  <section class="algorithm" id="merge-sort">
    <h2>Merge Sort</h2>
    <div class="description">
      <p>Merge sort divides the unsorted list into n sublists, each containing one element (a list of one element is considered sorted), then repeatedly merges sublists to produce new sorted sublists until there is only one sublist remaining. This is the sorted list. Merge sort is efficient, stable, and works well on large sets of data.</p>

    </div>
    <button onclick="startMergeSort()">Sort</button>
    <div id="merge-sort-visualizer" class="visualizer"></div>
    <p id="statusTextMerge" class="status-text">Press 'Start Sorting' to visualize the merge sort algorithm.</p>

  </section>

  <section class="algorithm" id="insertion-sort">
    <h2>Insertion Sort</h2>
    <div class="description">
      <p>Insertion sort works by taking elements from the list one by one and inserting them in their correct position into a new sorted list. In arrays, the new list and the remaining elements can share the array's space, but insertion is expensive, requiring shifting all following elements over by one.</p>

    </div>
    <button onclick="startInsertionSort()">Sort</button>
    <div id="insertion-sort-visualizer" class="visualizer"></div>
    <p id="statusTextInsertion" class="status-text">Press 'Start Sorting' to visualize the insertion sort algorithm.</p>

  </section>

  <section class="algorithm" id="selection-sort">
    <h2>Selection Sort</h2>
    <div class="description">
      <p>Selection sort works by dividing the input list into two parts: the sublist of items already sorted, which is built up from left to right at the front (left) of the list, and the sublist of items remaining to be sorted that occupy the rest of the list. Initially, the sorted sublist is empty, and the unsorted sublist is the entire input list. The algorithm proceeds by finding the smallest (or largest) element in the unsorted sublist, exchanging it with the leftmost unsorted element, and moving the sublist boundary one element to the right.</p>

    </div>
    <button onclick="startSelectionSort()">Sort</button>
    <div id="selection-sort-visualizer" class="visualizer"></div>
    <p id="statusTextSelection" class="status-text">Press 'Start Sorting' to visualize the selection sort algorithm.</p>

  </section>

  <section class="algorithm" id="heap-sort">
    <h2>Heap Sort</h2>
    <div class="description">
      <p>Heap sort involves building a Heap data structure from the given array and then utilizing the Heap to sort the array. You must first transform the list into a Max Heap - a Binary Tree where the biggest element is the root node. Then, repeatedly remove the largest element from the heap (decreasing the size of the heap in the process), and add it to the end of the sorted list. The heap is updated after each removal to maintain its Max Heap property.</p>

    </div>
    <button onclick="startHeapSort()">Sort</button>
    <div id="heap-sort-visualizer" class="visualizer"></div>
    <p id="statusTextHeap" class="status-text">Press 'Start Sorting' to visualize the heap sort algorithm.</p>

  </section>

  <section class="algorithm" id="shell-sort">
    <h2>Shell Sort</h2>
    <div class="description">
      <p>Shell sort is an optimization of insertion sort that allows the exchange of items far apart. The idea is to arrange the list of elements so that, starting anywhere, taking every nth element produces a sorted list. This is achieved by first sorting elements far apart from each other and progressively reducing the gap between elements to be compared. By starting with far apart elements, it can move some out-of-place elements into position faster than a simple nearest neighbor exchange.</p>

    </div>
    <button onclick="startShellSort()">Sort</button>
    <div id="shell-sort-visualizer" class="visualizer"></div>
    <p id="statusTextShell" class="status-text">Press 'Start Sorting' to visualize the shell sort algorithm.</p>

  </section>

</div>
<footer>
  Project by Devshades
</footer>

script.js

//Generate all graphs
let speed = 1000; // Default speed

window.onload = () => {
  generateBars("bubble-sort-visualizer");
  generateBars("quick-sort-visualizer");
  generateBars("merge-sort-visualizer");
  generateBars("insertion-sort-visualizer");
  generateBars("selection-sort-visualizer");
  generateBars("heap-sort-visualizer");
  generateBars("shell-sort-visualizer");
  document.getElementById("speed").addEventListener("input", function () {
    speed = parseInt(this.value);
  });
};

//BUBBLE SORT
//-------------------------------------------------------------------------------------

function generateBars() {
  const container = document.getElementById("bubble-sort-visualizer");
  container.innerHTML = "";
  for (let i = 0; i < 20; i++) {
    const bar = document.createElement("div");
    bar.style.height = `${Math.floor(Math.random() * 100) + 50}px`;
    bar.classList.add("bar");
    container.appendChild(bar);
  }
}

async function startBubbleSort() {
  let bars = document.querySelectorAll("#bubble-sort-visualizer .bar");
  const statusText = document.getElementById("statusText");

  for (let i = 0; i < bars.length; i++) {
    for (let j = 0; j < bars.length - i - 1; j++) {
      bars[j].style.backgroundColor = "#FF5733";
      bars[j + 1].style.backgroundColor = "#FF5733";

      statusText.textContent = `Comparing ${bars[j].style.height} and ${
        bars[j + 1].style.height
      }`;
      await new Promise((resolve) => setTimeout(resolve, speed / 2));

      let height1 = bars[j].style.height;
      let height2 = bars[j + 1].style.height;

      if (parseInt(height1) > parseInt(height2)) {
        statusText.textContent = `Swapping ${height1} and ${height2}`;
        await swap(bars[j], bars[j + 1]);
        bars = document.querySelectorAll("#bubble-sort-visualizer .bar");
      } else {
        statusText.textContent = `No swap needed for ${height1} and ${height2}`;
      }
      await new Promise((resolve) => setTimeout(resolve, speed / 2));

      bars[j].style.backgroundColor = "#118AB2";
      if (j === bars.length - i - 2) {
        bars[j + 1].style.backgroundColor = "#06D6A0";
      }
    }
    bars[bars.length - i - 1].style.backgroundColor = "#06D6A0";
    if (i === bars.length - 1) {
      statusText.textContent = "Sorting complete!";
    }
  }
}

function swap(elem1, elem2) {
  return new Promise((resolve) => {
    const style1 = window.getComputedStyle(elem1);
    const style2 = window.getComputedStyle(elem2);

    const transform1 = style1.getPropertyValue("height");
    const transform2 = style2.getPropertyValue("height");

    elem1.style.height = transform2;
    elem2.style.height = transform1;

    window.requestAnimationFrame(function () {
      setTimeout(resolve, speed / 4);
    });
  });
}

//QUICK SORT
//------------------------------------------------------------------------------------
function generateBars(containerId) {
  const container = document.getElementById(containerId);
  container.innerHTML = ""; // Clear the container
  for (let i = 0; i < 20; i++) {
    const bar = document.createElement("div");
    bar.style.height = `${Math.floor(Math.random() * 100) + 50}px`;
    bar.classList.add("bar");
    container.appendChild(bar);
  }
}

// Quick Sort Functions

async function startQuickSort() {
  const bars = document.querySelectorAll("#quick-sort-visualizer .bar");
  const statusText = document.getElementById("statusTextQuick");
  await quickSort(bars, 0, bars.length - 1, statusText);
  statusText.textContent = "Quick Sort complete!";
}

async function quickSort(bars, low, high, statusText) {
  if (low < high) {
    let pi = await partition(bars, low, high, statusText);

    await Promise.all([
      quickSort(bars, low, pi - 1, statusText),
      quickSort(bars, pi + 1, high, statusText)
    ]);
  }
}

async function partition(bars, low, high, statusText) {
  let pivot = bars[high].style.height;
  let i = low - 1;

  for (let j = low; j <= high - 1; j++) {
    if (parseInt(bars[j].style.height) < parseInt(pivot)) {
      i++;
      statusText.textContent = `Swapping ${bars[i].style.height} and ${bars[j].style.height}`;
      await swap(bars[i], bars[j]);
      await new Promise((resolve) => setTimeout(resolve, speed / 2));
    }
  }
  statusText.textContent = `Swapping ${bars[i + 1].style.height} and ${pivot}`;
  await swap(bars[i + 1], bars[high]);
  await new Promise((resolve) => setTimeout(resolve, speed / 2));
  return i + 1;
}

// The `swap` function remains the same as defined for Bubble Sort

//Merge Sort
//----------------------------------------------------------------------------------
async function startMergeSort() {
  const bars = document.querySelectorAll("#merge-sort-visualizer .bar");
  const statusText = document.getElementById("statusTextMerge");
  await mergeSort(bars, 0, bars.length - 1, statusText);
  statusText.textContent = "Merge Sort complete!";
}

async function mergeSort(bars, left, right, statusText) {
  if (left >= right) {
    return; // Returns recursively
  }
  const middle = left + Math.floor((right - left) / 2);
  await mergeSort(bars, left, middle, statusText);
  await mergeSort(bars, middle + 1, right, statusText);
  await merge(bars, left, middle, right, statusText);
}

async function merge(bars, left, middle, right, statusText) {
  let n1 = middle - left + 1;
  let n2 = right - middle;

  let leftArray = new Array(n1);
  let rightArray = new Array(n2);

  for (let i = 0; i < n1; i++) {
    leftArray[i] = bars[left + i].style.height;
  }
  for (let j = 0; j < n2; j++) {
    rightArray[j] = bars[middle + 1 + j].style.height;
  }

  let i = 0,
    j = 0,
    k = left;

  while (i < n1 && j < n2) {
    if (parseInt(leftArray[i]) <= parseInt(rightArray[j])) {
      bars[k].style.height = leftArray[i];
      i++;
    } else {
      bars[k].style.height = rightArray[j];
      j++;
    }
    k++;
    await new Promise((resolve) => setTimeout(resolve, speed / 2));
  }

  while (i < n1) {
    bars[k].style.height = leftArray[i];
    i++;
    k++;
    await new Promise((resolve) => setTimeout(resolve, speed / 2));
  }

  while (j < n2) {
    bars[k].style.height = rightArray[j];
    j++;
    k++;
    await new Promise((resolve) => setTimeout(resolve, speed / 2));
  }

  statusText.textContent = `Merging: LeftIndex=${left}, MiddleIndex=${middle}, RightIndex=${right}`;
}

//INSERTION SORT
//------------------------------------------------------------------------------------
async function startInsertionSort() {
  const bars = document.querySelectorAll("#insertion-sort-visualizer .bar");
  const statusText = document.getElementById("statusTextInsertion");
  await insertionSort(bars, statusText);
  statusText.textContent = "Insertion Sort complete!";
}

async function insertionSort(bars, statusText) {
  let n = bars.length;
  for (let i = 1; i < n; i++) {
    let key = bars[i].style.height;
    let j = i - 1;

    statusText.textContent = `Selected ${key} for sorting into the sorted section`;
    bars[i].style.backgroundColor = "#FFD700"; // Highlight selected bar

    while (j >= 0 && parseInt(bars[j].style.height) > parseInt(key)) {
      bars[j + 1].style.height = bars[j].style.height;
      j = j - 1;

      bars[j + 1].style.backgroundColor = "#FF5733"; // Color update for swapping
      await new Promise((resolve) => setTimeout(resolve, speed));
    }
    bars[j + 1].style.height = key;
    bars[j + 1].style.backgroundColor = "#06D6A0"; // Color update after insertion

    // Reset colors
    for (let k = 0; k <= i; k++) {
      bars[k].style.backgroundColor = "#118AB2";
      await new Promise((resolve) => setTimeout(resolve, speed / 4));
    }
  }
}

//SELECTION SORT
//------------------------------------------------------------------------------------
async function startSelectionSort() {
  const bars = document.querySelectorAll("#selection-sort-visualizer .bar");
  const statusText = document.getElementById("statusTextSelection");
  await selectionSort(bars, statusText);
  statusText.textContent = "Selection Sort complete!";
}

async function selectionSort(bars, statusText) {
  let n = bars.length;
  for (let i = 0; i < n - 1; i++) {
    let min_idx = i;
    bars[min_idx].style.backgroundColor = "#FFD700"; // Highlight the initial minimum

    for (let j = i + 1; j < n; j++) {
      bars[j].style.backgroundColor = "#FF5733"; // Highlight current item being compared
      statusText.textContent = `Comparing ${bars[j].style.height} with current minimum ${bars[min_idx].style.height}`;
      await new Promise((resolve) => setTimeout(resolve, speed));

      if (
        parseInt(bars[j].style.height) < parseInt(bars[min_idx].style.height)
      ) {
        if (min_idx !== i) {
          bars[min_idx].style.backgroundColor = "#118AB2"; // Reset previous minimum
        }
        min_idx = j; // Update minimum index
        bars[min_idx].style.backgroundColor = "#FFD700"; // Highlight new minimum
      } else {
        bars[j].style.backgroundColor = "#118AB2"; // Reset color if not minimum
      }
    }

    if (min_idx !== i) {
      statusText.textContent = `Swapping ${bars[min_idx].style.height} with ${bars[i].style.height}`;
      await swap(bars[min_idx], bars[i]);
    }
    bars[i].style.backgroundColor = "#06D6A0"; // Color update after sorting
    await new Promise((resolve) => setTimeout(resolve, speed));
  }
  // Color the last element
  bars[n - 1].style.backgroundColor = "#06D6A0";
}

//HEAP SORT
//------------------------------------------------------------------------------------
async function startHeapSort() {
  const bars = document.querySelectorAll("#heap-sort-visualizer .bar");
  const statusText = document.getElementById("statusTextHeap");
  const n = bars.length;
  statusText.textContent = "Starting Heap Sort...";
  await heapSort(bars, n, statusText);
  statusText.textContent = "Heap Sort complete!";
}

async function heapSort(bars, n, statusText) {
  // Build heap (rearrange array)
  statusText.textContent = "Building Max Heap...";
  for (let i = Math.floor(n / 2) - 1; i >= 0; i--) {
    await heapify(bars, n, i, statusText);
  }
  // One by one extract an element from heap
  for (let i = n - 1; i >= 0; i--) {
    // Move current root to end
    statusText.textContent = `Extracting root and placing at position ${i}...`;
    await swap(bars[0], bars[i]);
    bars[i].style.backgroundColor = "#06D6A0"; // Color update after sorting
    // Call max heapify on the reduced heap
    await heapify(bars, i, 0, statusText);
  }
  statusText.textContent = "Heap Sort complete!";
}

async function heapify(bars, n, i, statusText) {
  let largest = i; // Initialize largest as root
  let l = 2 * i + 1; // left = 2*i + 1
  let r = 2 * i + 2; // right = 2*i + 2
  statusText.textContent = `Heapifying at index ${i}...`;

  // If left child is larger than root
  if (
    l < n &&
    parseInt(bars[l].style.height) > parseInt(bars[largest].style.height)
  ) {
    largest = l;
    statusText.textContent = `Left child ${bars[l].style.height} is larger than root ${bars[i].style.height}.`;
  }

  // If right child is larger than largest so far
  if (
    r < n &&
    parseInt(bars[r].style.height) > parseInt(bars[largest].style.height)
  ) {
    largest = r;
    statusText.textContent += ` Right child ${bars[r].style.height} is larger than current largest ${bars[largest].style.height}.`;
  }

  // If largest is not root
  if (largest !== i) {
    statusText.textContent += ` Swapping ${bars[i].style.height} with ${bars[largest].style.height}.`;
    await swap(bars[i], bars[largest]);
    bars[i].style.backgroundColor = "#FF5733"; // Color update for swapping
    bars[largest].style.backgroundColor = "#FF5733";
    // Recursively heapify the affected sub-tree
    await heapify(bars, n, largest, statusText);
  }
}

//SHELL SORT
//------------------------------------------------------------------------------------
async function startShellSort() {
  const bars = document.querySelectorAll("#shell-sort-visualizer .bar");
  const statusText = document.getElementById("statusTextShell");
  await shellSort(bars, statusText);
  statusText.textContent = "Shell Sort complete!";
}

async function shellSort(bars, statusText) {
  let n = bars.length;
  // Start with a big gap, then reduce the gap
  for (let gap = Math.floor(n / 2); gap > 0; gap = Math.floor(gap / 2)) {
    // Update status for gap value
    statusText.textContent = `Starting gapped insertion sort with gap size ${gap}.`;
    await new Promise((resolve) => setTimeout(resolve, speed / 2));

    for (let i = gap; i < n; i += 1) {
      let temp = bars[i].style.height;
      bars[i].style.backgroundColor = "#FFD700"; // Highlight the bar being moved

      let j;
      for (
        j = i;
        j >= gap && parseInt(bars[j - gap].style.height) > parseInt(temp);
        j -= gap
      ) {
        // Updating status text with more details about the comparisons and shifts
        statusText.textContent = `Comparing and shifting: ${temp} with ${
          bars[j - gap].style.height
        }.`;
        bars[j].style.height = bars[j - gap].style.height; // Move bars[j-gap] to bars[j]
        bars[j].style.backgroundColor = "#FF5733"; // Highlight elements being shifted
        await new Promise((resolve) => setTimeout(resolve, speed));
      }

      // After finding the correct position for the element, update the status text
      statusText.textContent = `Inserting ${temp} at the correct position.`;
      bars[j].style.height = temp;
      bars[j].style.backgroundColor = "#06D6A0"; // Mark as inserted
      await new Promise((resolve) => setTimeout(resolve, speed));

      // Reset colors of all bars after each insertion
      for (let k = 0; k < n; k++) {
        if (bars[k] !== bars[j]) bars[k].style.backgroundColor = "#118AB2"; // Reset color of other bars
      }
    }
    // Indicate completion of current gap sorting
    statusText.textContent = `Gapped insertion sort with gap size ${gap} complete.`;
    await new Promise((resolve) => setTimeout(resolve, speed / 2));
  }
  statusText.textContent = "Shell Sort complete!";
}

sorting-algorithm-visualizations.markdown

Sorting Algorithm Visualizations

A Pen by devshades on CodePen.

License.

style.css

@import url("https://fonts.googleapis.com/css2?family=Chakra+Petch:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap");

body,
html {
  margin: 0;
  padding: 0;
  font-family: "Chakra Petch", sans-serif;
  background-color: #546e7a;
  color: black;
}
h2 {
  color: #fbc02d;
  font-size: 36px;
}
h1 {
  color: #fbc02d;
  font-size: 50px;
}
.app-container {
  max-width: 960px;
  margin: auto;
  padding: 20px;
}

header {
  text-align: center;
  padding: 20px 0;
  margin: 10px;
}
header p {
  font-size: 18px;
}
.controls {
  font-size: 20px;
  text-align: center;
}
.controls label,
.controls button {
  margin-right: 10px;
}

.visualizer {
  width: 100%;
  height: 200px;
  display: flex;
  align-items: end;
  justify-content: space-around;
  background-color: #455a64;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  padding: 10px;
}

.bar {
  width: 20px;
  background-color: teal;
  margin: 0 2px;
  border-radius: 5px;
}

.status-text {
  text-align: center;
  margin-top: 0px;
  color: #a5d6a7;
  font-size: 20px;
}
button {
  height: 35px;
  width: 100px;
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 20px;
  font-family: "Verdana";
  background-color: #f9a825;
}
.description {
}
.description p {
  font-size: 20px;
  color: #a5d6a7;
}
footer {
  text-align: center;
  margin: 10px;
  font-size: 18px;
  color: white;
}