Skip to content

README.md

Latest commit

 

History

History
111 lines (87 loc) · 2.52 KB

README.md

File metadata and controls

111 lines (87 loc) · 2.52 KB

Algorithm Visualizer

A browser-based visualizer for classic algorithms and data structures, with frame-by-frame playback controls.

The project now includes sorting, search, data structure operations, and a complete graph algorithms module.

Supported Visualizations

Sorting

  • Bubble Sort
  • Selection Sort
  • Quick Sort
  • Heap Sort

Search

  • Linear Search
  • Binary Search

Data Structures

  • Singly Linked List
  • Doubly Linked List
  • Stack (LIFO)
  • Queue (FIFO)
  • Union-Find (Disjoint Set Union)
  • Max Heap (structure operations)
  • Trie (prefix tree)

Graph Algorithms

  • DFS
  • BFS
  • Topological Sort
  • Floyd-Warshall
  • Dijkstra
  • Bellman-Ford
  • SPFA
  • Prim
  • Kruskal
  • Bipartite Coloring (2-coloring)
  • Hungarian (Kuhn) for bipartite matching

UI Controls (Matches the Current Page)

Control Panel

  • Algorithm
  • Data Size
  • Speed
  • Target (for search algorithms)
  • Timeline

Buttons

  • Random (R)
  • Run
  • Play / Pause (Space)
  • Prev (Left)
  • Next (Right)
  • Reset (Home)

Keyboard Shortcuts

  • Space: play / pause
  • ArrowLeft: previous step
  • ArrowRight: next step
  • R: randomize input data
  • Home: reset playback

Quick Start

Option 1: Open directly

Open index.html in a browser.

Option 2: Run a local static server (recommended)

cd algo-visualizer
python -m http.server 5500

Open: http://localhost:5500

Project Structure

algo-visualizer/
  index.html                 # Single-page UI
  src/
    app.js                   # Runtime entry (algorithms + data + renderers + controls)
    styles/
      main.css               # UI and visualization styles

Architecture Notes

  • All algorithm step generation is in src/app.js.
  • Playback (Play/Pause, Prev/Next, timeline, speed) is shared by all modules.
  • Visualizations currently use multiple view types:
    • bars for array-based algorithms
    • list, stack, queue, uf, heap, trie for data structures
    • graph and matrix for graph-related algorithms

How to Add a New Visualization

  1. Add a step generator function in src/app.js.
  2. Register it in the algorithms array.
  3. Return one of the existing view types (bars, graph, matrix, etc.), or add a new renderer branch in renderStep.

Why This Repo Works Well on GitHub

  • Demonstrates algorithm knowledge with concrete visual output.
  • Shows engineering beyond static code examples (state stepping, controls, reusable renderer flow).
  • Easy for reviewers to run locally in under one minute.

License

MIT