Sortier-Algorithmen Visualisierung

Interaktive Visualisierung von 20 Sortieralgorithmen mit Schritt-für-Schritt-Darstellung, Speicher-Ansicht und Keyboard-Steuerung.

Datei: sorting_visualization.html — Single-File, keine Abhängigkeiten, läuft direkt im Browser.

Online ansehen · Tests bestehen: 198/198

---

Algorithmus-Übersicht

Kategorie	Algorithmen
O(n²)	Bubble Sort, Selection Sort, Insertion Sort, Cocktail Shaker Sort
O(n log n)	Merge Sort, Heap Sort, Quick Sort, 3-Way Quick Sort, Dual-Pivot Quick Sort, Introsort, Shell Sort, Tree Sort, Timsort
Linear	Counting Sort, Radix Sort, Bucket Sort
Spezial	Pancake Sort, Cycle Sort, Bogo Sort, Fisher-Yates Shuffle

---

Features

• 20 Algorithmen — vom klassischen Bubble Sort bis zum Fisher-Yates Shuffle
• Speicher-Ansicht — zeigt Hilfsdatenstrukturen bei Merge Sort, Heap Sort, Timsort, Counting/Radix/Bucket Sort
• 5 Datensatz-Presets — Zufällig, Sortiert, Umgekehrt, Fast sortiert, Duplikate
• Schritt-Navigation — vor, zurück, Play/Pause
• Keyboard-Steuerung — alle Funktionen auch ohne Maus bedienbar
• URL-State — Auswahl bleibt beim Neuladen erhalten
• Mobile optimiert — Touch-Support, zoom-resistent
• Hell/Dunkel-Modus — per Button oder T
• Barrierefreiheit — ARIA-Labels, Screen-Reader-Ankündigungen

---

Schnellstart

1. sorting_visualization.html im Browser öffnen
2. Algorithmus wählen → Start mit Space
3. Oder: Play-Button drücken

---

Tastaturkürzel

Taste	Funktion
Space / K	Play / Pause
→ / L	Ein Schritt vor
← / J	Ein Schritt zurück
R	Reset
T	Theme wechseln
S	Mischen (Fisher-Yates)

---

Tests

node test_algorithms.js          # Kurzbericht
node test_algorithms.js --verbose # Detaillierte Ausgabe

Was wird getestet?

Das Testskript führt automatisierte Korrektheitstests für alle Sortieralgorithmen durch:

1. Haupt-Tests (2 Größen × 5 Presets × 19 Sortier-Algorithmen = 190) Für jeden Algorithmus (außer Shuffle) wird geprüft:

• Der letzte Step hat type === 'done'
• Das Array ist vollständig sortiert
• Die Array-Länge bleibt erhalten

2. Shuffle-Tests (10 Tests) Shuffle ist speziell — prüft stattdessen:

• Länge bleibt erhalten
• Alle Original-Werte sind noch vorhanden

3. Edge Cases (2 Tests)

• Leeres Array → Bubble Sort
• Single-Element [42] → Bubble Sort

4. Performance-Test (6 Algorithmen × 100 Elemente)

• Sortiert das Array korrekt in akzeptabler Zeit

Gesamt: 198 Tests

Technische Details

Das Skript:

1. Extrahiert den JavaScript-Code aus sorting_visualization.html
2. Führt ihn in einer isolierten Node.js-VM aus (mit gemockten DOM-Elementen)
3. Ruft buildSteps(algo) auf — die Funktion die alle Steps für die Animation erzeugt
4. Verifiziert dass der letzte Step das Array korrekt sortiert hat

Die buildSteps-Funktion ist rein funktional und gibt nur Step-Objekte zurück — keine DOM-Manipulation. Das macht sie unit-testbar.

---

Dateien

sorting_visualization.html  # Hauptprogramm (Single-File)
BEDIENUNGSANLEITUNG.md      # Bedienungsanlietung
test_algorithms.js          # Node.js Test-Suite
.gitignore                  # Git-Konfiguration
README.md                   # Dieses Dokument

---

Entwicklung

• Kein Build-Schritt — pure HTML/JS/CSS
• Keine externen Abhängigkeiten — läuft offline
• Externe CDN (optional, für Icons): Lucide Icons, Tailwind CSS
• Version — wird automatisch via pre-commit-Hook erhöht

---

Autor

© 2026 Dieter Schlüter <dieter(dot)schlueter(at)linix(dot)de>