16 KiB
Bedienungsanleitung — Sortier-Algorithmen Visualisierung
Inhalt
- Was ist das?
- Oberfläche
- Schnellstart
- Auswahlmöglichkeiten
- Steuerung
- Tastaturkürzel
- Farbcode
- Statistik-Karten
- Speicher-Ansicht
- URL-Parameter
- Warum sind Sortieralgorithmen wichtig?
- Algorithmus-Übersicht
1. Was ist das?
Dieses Programm visualisiert die Funktionsweise von 20 Sortieralgorithmen — von Bubble Sort bis Fisher-Yates Shuffle. Es zeigt Schritt für Schritt, wie ein Algorithmus ein Array sortiert, macht die Datenstrukturen und Speichernutzung sichtbar und vermittelt ein intuitives Verständnis dafür, warum der eine Algorithmus schneller ist als der andere.
Einschränkung: Bogo Sort ist auf 8 Elemente begrenzt, da seine O(n·n!)-Komplexität bei größeren Arrays den Browser einfrieren lässt.
2. Oberfläche
┌───────────────────────────────────────────────────────────────┐
│ Sortier-Algorithmen [Bedienung] │
├──────────────┬────────────────────────────────────────────────┤
│ │ ┌─ Phase-Label ───────────────────────┐ │
│ Algorithmus │ │ Vergleich: arr[3]=42 mit arr[4]=17 │ │
│ [Dropdown] │ └─────────────────────────────────────┘ │
│ │ │
│ Daten │ ┌─────────── Canvas ──────────────────┐ │
│ [Vorlage] │ │ │ │
│ │ │ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ │ │
│ Eigene │ │ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ │ │
│ Werte │ │ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ │ │
│ │ │ │ │
│ Array-Größe │ └─────────────────────────────────────┘ │
│ ─────────── │ │
│ Geschw. │ [▶][⏸][⏭][🔀][↺][🌙] │
│ ─────────── │ │
│ Legend │ Vergleiche: 128 Tausche: 64 Zeit: 1.2s │
│ │ │
│ [▶ Play] │ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ │
└──────────────┴────────────────────────────────────────────────┘
- Links (Sidebar): Algorithmus wählen, Datensatz, eigene Werte, Geschwindigkeit, Legende
- Rechts (Hauptbereich): Canvas mit Animation, Steuerung, Statistik-Karten
- Unten: Einklappbare Abschnitte „Über die Algorithmen" und „Bedienung"
3. Schnellstart
- Öffne
sorting_visualization.htmlim Browser - Wähle einen Algorithmus aus dem Dropdown (z.B. „Quick Sort")
- Stelle Array-Größe und Geschwindigkeit ein
- Drücke
Spacezum Starten — oder den Play-Button ▶
4. Auswahlmöglichkeiten
Algorithmus
20 Algorithmen in 4 Kategorien:
| Kategorie | Algorithmen |
|---|---|
| O(n²) — Einfache Verfahren | Bubble Sort, Selection Sort, Insertion Sort, Cocktail Shaker Sort |
| O(n log n) — Effiziente Verfahren | Merge Sort, Heap Sort, Quick Sort, 3-Way Quick Sort, Dual-Pivot Quick Sort, Introsort, Shell Sort, Tree Sort, Timsort |
| O(n·k) — Linear / Nicht-vergleichsbasiert | Counting Sort, Radix Sort, Bucket Sort |
| Spezial | Pancake Sort, Cycle Sort, Bogo Sort, Fisher-Yates Shuffle |
Datensatz-Vorlagen (Presets)
| Vorlage | Beschreibung |
|---|---|
| Zufall | Zufällig verteilte Werte — der Standard-Testfall |
| Sortiert | Bereits aufsteigend sortiert — manche Algorithmen (z.B. Quick Sort mit erstem Element als Pivot) werden dadurch extrem langsam |
| Umgekehrt | Absteigend sortiert — das Gegenstück und ein fairer Test für die meisten Algorithmen |
| Fast sortiert | Nur wenige Elemente an der falschen Stelle — adaptiven Algorithmen (Insertion Sort, Timsort) spielen hier ihre Stärke aus |
| Duplikate | Viele gleiche Werte — der Härtetest: klassischer Quick Sort degeneriert zu O(n²), 3-Way Quick Sort brilliert hier |
Eigene Werte
Du kannst eigene Zahlen eingeben, getrennt durch Kommas, Leerzeichen oder Zeilenumbrüche. Beispiele:
5, 3, 8, 1, 9, 2
Über den Clipboard-Button kannst du auch direkt aus der Zwischenablage einfügen (Mehrfachpaste wird unterstützt). Die Anzahl der eingegebenen Werte wird oben rechts im Feld angezeigt.
Wichtig: Eigene Werte überschreiben das Preset. Sobald du eigene Werte eingibst, verwendet das Programm diese statt der Vorlage.
Array-Größe
Schieberegler von 5 bis 200 Elemente. Wird zurückgesetzt, wenn du eigene Werte eingibst.
- Klein (5–20): Gut zum Verstehen der Abläufe
- Mittel (30–80): Guter Kompromiss aus Übersicht und Realismus
- Groß (100–200): Zeigt das Skalierungsverhalten
Geschwindigkeit
Schieberegler von 1 bis 100 — er represents die Verzögerung zwischen zwei Schritten in Millisekunden:
- 1 (links): ~1000 ms/Schritt — sehr langsam, zum Beobachten
- 50 (Mitte): ~500 ms/Schritt — ausgewogen
- 100 (rechts): ~10 ms/Schritt — sehr schnell
Die tatsächliche Geschwindigkeit hängt auch von der Browser-Leistung und der Array-Größe ab.
5. Steuerung
| Button | Funktion |
|---|---|
| ⏮ | Einen Schritt zurück — zeigt die vorherige Operation |
| ▶ | Animation starten — läuft bis zum Ende oder bis Pause |
| ⏸ | Animation anhalten — kann mit ▶ fortgesetzt werden |
| ⏭ | Einen Schritt vor — führt genau eine Operation aus |
| 🔀 | Mischen — Fisher-Yates Shuffle auf das aktuelle Array |
| ↺ | Reset — setzt das Array in den Ausgangszustand zurück (vor dem Start der Animation) |
| 🌙/☀ | Theme wechseln — zwischen hellem und dunklem Modus |
Reset vs. Mischen
- Reset stellt das Array so her, wie es beim letzten Start der Animation war. Das kann ein frisches Zufalls-Array sein oder deine eigenen Werte.
- Mischen führt einen Fisher-Yates-Shuffle auf das aktuelle Array aus — nützlich, um ein sortiertes Array wieder zu mischen und einen anderen Algorithmus zu testen.
6. Tastaturkürzel
Alle Funktionen sind auch ohne Maus bedienbar:
| Taste | Funktion |
|---|---|
Space / K |
Play / Pause — Animation starten oder anhalten |
→ / L |
Ein Schritt vor — nächste Operation |
← / J |
Ein Schritt zurück — vorherige Operation |
R |
Reset — Array zurücksetzen |
T |
Theme — zwischen hell und dunkel wechseln |
S |
Shuffle — Array mischen (Fisher-Yates) |
Hinweis: Tastaturkürzel funktionieren nicht, wenn ein Eingabefeld oder Dropdown den Fokus hat.
7. Farbcode
Jede Farbe hat eine feste Bedeutung:
| Farbe | Bedeutung |
|---|---|
| Blau (Unsortiert) | Normaler Zustand — Elemente die noch nicht sortiert sind |
| Orange (Vergleich) | Zwei Elemente werden gerade verglichen — ein Bogen verbindet sie |
| Rot (Tausch) | Zwei Elemente werden getauscht — ein roter Bogen zeigt die Tauschpartner |
| Lila (Verschiebung) | Ein Element wird verschoben (nicht getauscht) — z.B. bei Insertion Sort oder Merge Sort |
| Grün (Sortiert/Fertig) | Elemente an ihrer endgültigen Position — der Bereich wächst mit fortschreitender Sortierung |
Ein Bogen über zwei Balken zeigt immer eine Beziehung zwischen den beiden Elementen:
- Oranger Bogen = Vergleich
- Roter Bogen = Tausch
8. Statistik-Karten
Unter dem Canvas zeigen vier Karten Echtzeit-Statistiken:
| Karte | Beschreibung |
|---|---|
| Zeit | Vergangene Echtzeit seit Start der Animation in Millisekunden |
| Schritte | Anzahl der ausgeführten Schritte / Operationen |
| Vergleiche | Anzahl der Vergleichsoperationen (nur bei vergleichsbasierten Algorithmen) |
| Tausche | Anzahl der Tausch- oder Verschiebungsoperationen |
Hinweis: Nicht-vergleichsbasierte Algorithmen (Counting, Radix, Bucket) zeigen bei „Vergleiche" keine sinnvollen Werte, da sie nicht Element-für-Element vergleichen.
9. Speicher-Ansicht
Bei einigen Algorithmen wird unterhalb des Haupt-Arrays ein zusätzlicher Speicherbereich visualisiert. Das hilft zu verstehen, wie Algorithmen temporären Platz benötigen:
| Algorithmus | Speicher-Ansicht |
|---|---|
| Merge Sort | Zwei Hilfs-Arrays (blau und lila) — zeigt das Zusammenführen zweier sortierter Hälften |
| Heap Sort | Max-Heap als Baumdiagramm — zeigt die Hierarchie der Eltern-Kind-Beziehungen |
| Tree Sort | Binary Search Tree — zeigt die Baumstruktur die beim Sortieren aufgebaut wird |
| Timsort | Hilfs-Arrays — zeigt die verwalteten Runs und Merges |
| Counting Sort | Häufigkeitstabelle — zählt wie oft jeder Wert vorkommt |
| Radix Sort | Bucket-Verteilung — zeigt wie Ziffern in Buckets einsortiert werden |
| Bucket Sort | Bucket-Arrays — zeigt die Verteilung und Sortierung in den Buckets |
10. URL-Parameter
Der aktuelle Zustand (Algorithmus, Vorlage, Größe, Geschwindigkeit) wird automatisch in die URL geschrieben. Das bedeutet:
- Du kannst die URL kopieren und an andere weitergeben — sie sehen dieselbe Konfiguration
- Beim Neuladen der Seite bleibt die Auswahl erhalten
- Du kannst Parameter auch manuell setzen
URL-Parameter:
sorting_visualization.html?algo=quick&preset=random&size=50&speed=50
| Parameter | Werte | Beschreibung |
|---|---|---|
algo |
bubble, selection, insertion, cocktail, merge, heap, quick, quick3way, dualpivot, introsort, shell, tree, timsort, counting, radix, bucket, pancake, cycle, bogo, shuffle |
Ausgewählter Algorithmus |
preset |
random, sorted, reversed, nearly, duplicates |
Datensatz-Vorlage |
size |
5–200 | Array-Größe |
speed |
1–100 | Geschwindigkeit |
11. Warum sind Sortieralgorithmen wichtig?
Sortieren ist eines der am intensivsten erforschten Probleme der Informatik — nicht aus akademischer Überheblichkeit, sondern weil es in der Praxis überall vorkommt:
- Datenbanken müssen Abfrageergebnisse sortieren — bei Millionen von Datensätzen entscheidet der Algorithmus über Antwortzeiten
- Betriebssysteme verwalten Prioritätswarteschlangen und müssen Prozesse nach Dringlichkeit ordnen
- Compiler nutzen Sortieralgorithmen für die Optimierung (z.B. Register-Allokation)
- Internetsuchen beginnen oft mit sortierten Indices (z.B. B-Bäume in Datenbanken)
- Empfehlungssysteme sortieren Ergebnisse nach Relevanz
Der fundamentale Kompromiss
Jeder Algorithmus repräsentiert einen anderen Kompromiss zwischen:
- Geschwindigkeit — Wie viele Operationen braucht der Algorithmus?
- Speicher — Wie viel zusätzlichen Platz benötigt er?
- Stabilität — Behalten gleiche Werte ihre Reihenfolge?
- Adaptivität — Nutzt er vorhandene Ordnung aus?
- Einfachheit — Wie verständlich ist der Code?
Wer diese Kompromisse versteht, kann für jede Situation die richtige Wahl treffen — sei es beim Sortieren von 100 Datensätzen auf einem Microcontroller oder 100 Millionen in einer Datenbank.
Was diese Visualisierung lehrt
- Bubble Sort bei sortierten Daten: O(n) statt O(n²) — plötzliche Effizienz durch die „swapped"-Optimierung
- Quick Sort bei sortierten Daten mit erstem Pivot: O(n²) — warum naive Pivot-Wahl katastrophal sein kann
- Timsort bei fast-sortierten Daten: adaptiv und schnell — warum er in Python und Java Standard ist
- 3-Way Quick Sort bei Duplikaten: O(n) statt O(n²) — warum Duplikate-Handling entscheidend ist
- Fisher-Yates Shuffle: Mischen ist O(n), Sortieren ist O(n log n) — ein Shuffle ist immer schneller als jede Sortierung
12. Algorithmus-Übersicht
Eigenschaften
| Symbol | Bedeutung |
|---|---|
| Stabil | Gleiche Werte behalten ihre ursprüngliche Reihenfolge bei |
| Nicht stabil | Die Reihenfolge gleicher Werte kann sich ändern |
| In-place | Sortiert im vorhandenen Array, braucht nur O(1) zusätzlichen Speicher |
| O(n) Speicher | Benötigt ein zusätzliches Hilfsarray proportional zur Eingabegröße |
| Adaptiv | Nutzt vorhandene Ordnung aus — bei fast sortierten Daten schneller |
| Hybrid | Kombiniert mehrere Strategien und wechselt je nach Situation |
Komplexitäts-Kategorien
O(n²) — Quadratisch (einfache Verfahren) Diese Algorithmen sind leicht zu verstehen, aber skalieren schlecht. Geeignet für kleine Datenmengen oder Lehrzwecke.
- Bubble Sort — Stabil, In-place, adaptiv bei sortierten Daten
- Selection Sort — Nicht stabil, In-place, min. Schreiboperationen
- Insertion Sort — Stabil, In-place, adaptiv, der beste O(n²)
- Cocktail Shaker Sort — Stabil, In-place, löst das Schildkröten-Problem
O(n log n) — Quasi-linear (effiziente Verfahren) Die Standardwahl für allgemeine Sortierprobleme. Garantieren gute Leistung auch im schlimmsten Fall.
- Merge Sort — Stabil, O(n) Speicher, garantiert O(n log n)
- Heap Sort — Nicht stabil, In-place, garantiert O(n log n)
- Quick Sort — Nicht stabil, In-place, O(n log n) im Durchschnitt
- 3-Way Quick Sort — Nicht stabil, In-place, O(n) bei vielen Duplikaten
- Dual-Pivot Quick Sort — Nicht stabil, In-place, Java Standard (JDK)
- Introsort — Nicht stabil, In-place, wechselt bei Rekursionstiefe zu Heap Sort
- Shell Sort — Nicht stabil, In-place, schneller als O(n²) durch Gap-Sequenz
- Tree Sort — Stabil (bei BST), O(n) Speicher, abhängig von Baumhöhe
- Timsort — Stabil, adaptiv, Hybrid aus Merge Sort und Insertion Sort, Python/Java Standard
O(n·k) — Linear (nicht-vergleichsbasiert) Diese Algorithmen nutzen spezielle Eigenschaften der Daten (z.B. Ganzzahl-Bereich) und können schneller sein als O(n log n). Funktionieren nicht mit beliebigen Vergleichbaren Werten.
- Counting Sort — Stabil, O(n+k) mit k = Wertbereich, nur für Ganzzahlen
- Radix Sort — Stabil, O(n·k) mit k = Anzahl Ziffern, nur für Ganzzahlen
- Bucket Sort — Stabil, O(n+k) im Durchschnitt, adaptiv je nach Verteilung
Spezial Algorithmen mit besonderen Eigenschaften oder Anwendungsfällen.
- Pancake Sort — Nicht stabil, In-place, nur Präfix-Flip-Operationen erlaubt
- Cycle Sort — Nicht stabil, In-place, min. Schreiboperationen (für Flash-Speicher)
- Bogo Sort — Nicht stabil, In-place, O(n·n!) erwartet, auf 8 Elemente begrenzt
- Fisher-Yates Shuffle — Stabil, In-place, O(n), uniform zufällig
Tests
node test_algorithms.js # Kurzbericht
node test_algorithms.js --verbose # Detaillierte Ausgabe
Das Testskript führt automatisierte Korrektheitstests für alle Sortieralgorithmen durch:
Haupt-Tests — 19 Sortier-Algorithmen × 5 Presets × 2 Größen = 190 Tests. Für jeden: done-Step, sortiert, Länge erhalten.
Shuffle-Tests — 10 Tests. Prüft dass die Werte permutiert aber erhalten bleiben.
Edge Cases — Leeres Array und Single-Element.
Performance-Test — 6 Algorithmen mit 100 Elementen.
Gesamt: 198 Tests — alle müssen bestehen.
Das Skript extrahiert den JavaScript-Code aus sorting_visualization.html, führt ihn in einer isolierten Node.js-VM aus und ruft buildSteps(algo) auf. Die Funktion ist rein funktional — keine DOM-Manipulation — und daher unit-testbar.
Lizenz
Dieses Projekt ist eine Open-Source-Lehr- und Lernressource.
Autor
© 2026 Dieter Schlüter <dieter(dot)schlueter(at)linix(dot)de>