Datenvisualisierung: Schuchardt-Korrespondenz

Einheit 07 — Beispiel 03: Bar Charts mit CSS und SVG, chronologische Zeitleiste

1. CSS Bar Chart: Briefe pro Jahrzehnt

Balkendiagramm mit reinem CSS — keine Bibliothek erforderlich

Anzahl der Briefe pro Jahrzehnt

Anzahl Briefe

2. SVG Bar Chart: Briefe pro Jahrzehnt

Gleiches Diagramm mit SVG — mehr Kontrolle ueber Darstellung

Briefe pro Jahrzehnt (SVG)

3. Zeitleiste: Ausgewählte Briefe chronologisch

Horizontale Zeitleiste mit CSS-Positionierung

Chronologische Zeitleiste (1876-1920)

Verwendete Techniken

CSS Bar Chart: display: flex; align-items: flex-end; und dynamische height in Prozent
SVG Bar Chart: <rect> und <text> Elemente mit berechneten Positionen
CSS Timeline: position: absolute; left: X%; fuer chronologische Positionierung
Alle Daten: Als JavaScript-Arrays, mit Math.max() und forEach() verarbeitet