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, responsive
Hell/Dunkel-Modus — per Button oder T
Barrierefreiheit — ARIA-Labels, Screen-Reader-Ankündigungen

Schnellstart

sorting_visualization.html im Browser öffnen
Algorithmus wählen → Start mit Space
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:

Extrahiert den JavaScript-Code aus sorting_visualization.html
Führt ihn in einer isolierten Node.js-VM aus (mit gemockten DOM-Elementen)
Ruft buildSteps(algo) auf — die Funktion die alle Steps für die Animation erzeugt
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

3.7 KiB Raw Blame History Unescape Escape