Visualizing the Invisible: My Journey Building an Algorithm Visualizer

Ever tried explaining how a sorting algorithm works to someone who doesn't code? I have—and watching their eyes glaze over faster than a quicksort partitioning an array is quite the humbling experience.

This challenge inspired me to build an interactive Algorithm Visualizer—a simple web app that shows how algorithms actually work, step by step. It's like having x-ray vision into code that's normally hidden behind the scenes, making it easier to understand what these algorithms are really doing.

The Architecture: Building a Cognitive Bridge

Algorithm Visualizer is built on a modern web application stack that prioritizes both developer experience and end-user performance:

• Next.js: Provides the foundational architecture, leveraging its App Router for intuitive, hierarchical navigation between algorithm categories and individual visualizations

• React: Powers the component-based UI architecture, with hooks managing the complex state transitions during algorithm execution

• TypeScript: Offers type safety that proved invaluable when modeling algorithm steps and state transitions

• Tailwind CSS: Enables rapid styling with consistency across the application's visual language

What makes this project noteworthy is that it's entirely client-side—there's no authentication flow, no database, no server-side processing. This architectural choice prioritizes simplicity and accessibility: anyone with a browser can instantly explore algorithm concepts without setup friction.

The project is deployed using Vercel, which provides seamless hosting and automatic previews for each commit. A GitHub Actions CI/CD pipeline handles automated testing, linting, and deployment, ensuring code quality and a smooth development workflow with minimal manual intervention.

The Core Visualization Mechanism: Algorithmic Cinematography

The visualization engine functions on a simple yet powerful principle: algorithms are instrumented to generate "snapshots" at each significant step of their execution. These snapshots are then rendered as frames in an interactive animation sequence.

Consider the bubble sort algorithm—rather than simply rearranging values and returning a sorted array, my implementation:

1. Creates a deep copy of the input array at each comparison or swap

2. Tracks which elements are being compared, swapped, or marked as completed

3. Captures these states in a sequence of steps

4. Enables users to navigate forward, backward, or automatically play through the sequence

This approach effectively turns algorithms inside-out, exposing their internal decision-making rather than just their inputs and outputs. It's the difference between watching a chess match move-by-move versus simply seeing the final board state.

The Algorithm Portfolio: Computational Diversity

The platform currently visualizes three categories of algorithms:

Sorting Algorithms

• Bubble Sort: The computational equivalent of bubbles rising in water—simple to understand yet inefficient for large datasets

• Selection Sort: Methodically finding the smallest element repeatedly

• Insertion Sort: Mimicking how you might sort playing cards in your hand

• Merge Sort: Divide and conquer applied to sorting with guaranteed O(n log n) performance

• Quick Sort: The speed demon of sorting with excellent average performance

• Heap Sort: Leveraging a binary heap structure for consistent performance

Searching Algorithms

• Linear Search: The computational equivalent of checking each drawer for your lost keys

• Binary Search: The clever approach of eliminating half the possibilities at each step

Graph Algorithms

• Depth-First Search (DFS): Exploring as deeply as possible along branches before backtracking

• Breadth-First Search (BFS): Exploring all neighbors at the current depth before moving deeper

• Dijkstra's Algorithm: Finding shortest paths with weighted edges

• Topological Sort: Ordering vertices such that for every directed edge, the source comes before the target

Educational Infrastructure: Beyond Simple Visualization

Beyond the core visualizations, I've built several features that transform this from a simple animation tool to a practical learning platform:

Interactive Controls

Users can play, pause, step forward/backward, adjust animation speed, and generate new datasets—offering control comparable to a video player but for algorithm execution.

Chromatic Understanding

Color-coding provides instant visual cues for different algorithm states:

• Blue elements represent unsorted/unvisited items

• Yellow highlights current comparisons/examinations

• Red indicates swapping operations

• Green marks completed elements or found targets

Algorithm Context

Each algorithm is presented with:

• Plain-language descriptions of how it works

• Pseudocode representation for conceptual understanding

• Time and space complexity information

• Difficulty classification for progressive learning

Comprehensive Glossary

A dedicated glossary section functions as a computational lexicon, defining key terms from "Algorithm" to "Time Complexity" with illustrative examples and cross-references.

The Engineering Challenges: Thinking About Thinking

Building this platform required solutions to several interesting problems:

The Context-Step Management Pattern

The core state management pattern revolves around an AlgorithmContext that maintains:

• Current algorithm selection

• Dataset being manipulated

• Visualization steps generated from algorithm execution

• Current step index within the visualization

• Playback control state (playing/paused, speed)

This is implemented using React's Context API and a reducer pattern to handle actions like:

// Actions that can be dispatched to the reducer
export type VisualizationAction =
  | { type: "SET_CURRENT_STEP"; payload: number }
  | { type: "SET_IS_PLAYING"; payload: boolean }
  | { type: "SET_SPEED"; payload: number }
  | { type: "SET_ALGORITHM"; payload: string }
  // ... other actions

Algorithm Visualization Generation

Each algorithm implementation follows a pattern that distinguishes between:

1. The algorithm's actual sorting/searching logic

2. The step recording logic that captures state transitions

For example, in the bubble sort implementation:

export function bubbleSort(array: number[]): AlgorithmVisualization {
  const steps: SortingStep[] = [];
  const arr = [...array];
  // ... sorting logic interleaved with step recording ...
  steps.push({
    array: [...arr],
    comparing: [j, j + 1],
    swapped: true,
    completed: [...completed],
  });
  // ... more sorting and step recording ...
  return createVisualization("bubbleSort", steps, {
    timeComplexity: "O(n²)",
    spaceComplexity: "O(1)",
    // ... other metadata ...
  });
}

This separation of concerns ensures the visualizations accurately represent algorithm execution while maintaining clean, understandable code.

Rendering Different Algorithm Types

Different algorithm categories require substantially different visualization approaches:

• Sorting algorithms are represented as bars with varying heights

• Searching algorithms display the elements being searched with positional indicators

• Graph algorithms use a node-edge representation with traversal indicators

The component architecture handles this diversity through polymorphism:

{category === "sorting" && (
  <SortingVisualization
    step={visualizationData.steps[currentStep] as SortingStep}
    maxValue={maxValue}
  />
)}
{category === "searching" && (
  <SearchVisualization
    step={visualizationData.steps[currentStep] as SearchStep}
    maxValue={maxValue}
  />
)}
{category === "graph" && (
  <GraphVisualization
    step={visualizationData.steps[currentStep] as GraphStep}
  />
)}

Wrapping Up

Building this Algorithm Visualizer was honestly a fun challenge. I wanted to see algorithms in action rather than just read about them, and I figured others might feel the same way.

What I enjoyed most was seeing how these abstract concepts became clearer once I could actually watch them run step by step. There's something satisfying about watching a sorting algorithm gradually organize a jumbled array or seeing how a search algorithm hunts down a value.

The project turned out to be educational for me too. As I built each visualization, I found myself understanding these algorithms at a deeper level. It's one thing to read about bubble sort in a textbook; it's another to code it up and watch it bubble those values to the top.

I hope this tool helps others who are learning about algorithms or just curious about how they work. Sometimes seeing is understanding!

The Algorithm Visualizer is available at algorithm-visualizer.seancoughlin.me and the source code can be found on GitHub.