{ }

Sorting Algorithm Visualizer

DSAIntermediate

JavaScriptCanvas/DOM

💡 Overview

Watching bars swap and settle into order makes sorting algorithms 'click' in a way that reading pseudocode never quite does. It's also a genuinely impressive portfolio piece.

✅ Features to Build

0/4 done

🧭 Step-by-Step Guide

Render the array as a row of <div> bars, with each bar's height set from its value.

Implement Bubble Sort normally in JS, but instead of just swapping instantly, record each swap as a 'step'.

Use setTimeout or requestAnimationFrame to play back the recorded steps one at a time, updating bar heights/colors.

Highlight the two bars currently being compared in a different color during each step.

Add a dropdown to switch between Bubble Sort and a second algorithm, reusing the same visualization logic.

💡 Pro Tip

Separate your CODE from your ANIMATION — first get the sorting logic recording a clean list of steps, THEN write a separate function that just plays back those steps visually. Mixing both at once gets messy fast.

← Back to all Projects