Datenvisualisierung mit Svelte: 3-Tage-Workshop für Visual Journalism Studierende

Workshop-Überblick

Dieser Workshop verbindet haptische Prototyping-Skills mit moderner Web-Technologie - perfekt für BFO-Student:innen. Wir starten mit Gaffa-Tape, Legobausteinen und Aludraht, um Datengeschichten zu verstehen, und übersetzen dann unsere analogen Prototypen in interaktive Svelte-Visualisierungen. Creative Technology vom Basteltisch zum Browser.

Tag 1: Fundament - Vom Basteltisch zum Browser

Morgen SET-Phase (9:00-11:00)

Mit den Händen denken, dann programmieren

Eröffnungskreis (30 min)

• Materialstation: Lego, Gaffa-Tape, Aludraht, Wackelaugen + Laptops bereit
• Jede:r baut in 5 Minuten ein "Gefühl" aus Materialien
• Vorstellung: "Ich bin... und das ist mein analoges Gefühl"
• Gruppenvereinbarung: "Erst verstehen, dann digitalisieren"

Analoger Einstieg (45 min)

• Demo: Balkendiagramm aus Lego bauen, dann in Svelte nachbauen
• Verschiedene Materialien = verschiedene Datentypen:
• Lego-Türme = Balkendiagramm
• Draht-Kurven = Liniendiagramm
• Knete-Kreise = Bubble Chart
• Übung: "Euer Semester in Daten" - erst analog bauen, dann skizzieren

Svelte Kennenlernen (45 min)

• Svelte REPL öffnen: "Das ist euer digitaler Basteltisch"
• Erste Magie: Variable ändern, Seite reagiert sofort
• Demo: Analog gebautes Lego-Diagramm in Svelte übersetzen
• Challenge: Euren Namen mit {variable} anzeigen lassen

Tag 1 HOLD-Phase (11:30-16:30)

Von Material zu Code

Session 1: HTML als Baukasten (11:30-13:00)

• HTML-Elemente wie Lego-Steine: <div>, <h1>, <p>
• Hands-on: Analog gebaute Story-Struktur in HTML übersetzen
• Svelte-Magie: {} bringt Daten ins HTML
• Übung: Euer analoges "Semester in Daten" als HTML-Struktur

Mittagspause (13:00-14:00)

Session 2: Interaktivität ohne Angst (14:00-15:30)

• Counter bauen: analog mit Bausteinen, digital mit Svelte
• let count = 0 - Container für eure Daten
• on:click - Buttons die reagieren
• Live-Vergleich: Analog vs. digital - was ist ähnlich?
• Übung: Interaktiven Foto-Galerie-Counter bauen

Session 3: Styling als Visual Language (15:30-16:30)

• CSS in Svelte: Farben, Größen, Positionen
• Hochschul-Corporate Design umsetzen: Orange (#ffa500) und Anthrazit (#575250)
• Material-Eigenschaften digital nachbauen: Gaffa-Tape-Ästhetik mit CSS
• Übung: Euren Counter im BFO-Look stylen

Tag 1 LAND-Phase (16:30-17:30)

Analog trifft Digital

• Galerie: Analoge Prototypen neben Svelte-Screens
• Reflexion: "Was war leichter - analog oder digital?"
• Troubleshooting-Circle: Häufige Svelte-Stolpersteine
• Hausaufgabe: Daten für morgen sammeln (kann auch analog geschehen)

Tag 2: Exploration - Daten werden lebendig

Morgen SET-Phase (9:00-9:30)

Datensammlung hybrid

• Check-in mit mitgebrachten Daten
• Aufwärm-Challenge: "Human Bar Chart" - Körper als Datenvisualisierung
• Heute: Von einzelnen Werten zu Datensätzen
• Inspiration: Zeit Online Interaktives + analoge Datenkunst

Tag 2 HOLD-Phase (9:30-16:30)

Echte Daten, echte Geschichten

Session 1: Datensammlung kreativ (9:30-11:00)

• Analog sammeln: 15 Min Campus-Daten erfassen
• Fahrräder zählen, Müllfüllstände schätzen, Lernplatz-Auslastung
• Mit Strichlisten, Stoppuhren, Maßbändern
• Digital verarbeiten: Daten sofort in Svelte
• Arrays kennenlernen: let bikes = [12, 8, 15, 23]
• {#each} Block: Für jeden Datenpunkt ein Element
• Erste Visualisierung: Balkendiagramm aus gesammelten Daten

Session 2: SVG - Zeichnen mit Code (11:00-12:30)

• SVG als "digitaler Aludraht" - biegsam und präzise
• Grundformen: Rechtecke, Kreise, Linien
• Live-Übersetzung: Analog gebaute Formen → SVG-Code
• Übung: Eure Campus-Daten als SVG-Balkendiagramm
• Skalierung verstehen: Große Zahlen in kleine Bildschirme

Mittagspause (12:30-13:30)

Session 3: Interaktivität mit Sinn (13:30-15:30)

• Hover-Effekte: on:mouseenter und on:mouseleave
• Tooltips bauen: Zusatzinfos auf Berührung
• Filter-Funktionen: Daten ein- und ausblenden
• Real-World-Beispiel: Hannover-Wohnungspreise interaktiv erkunden
• Übung: Euer Campus-Chart mit Hover-Details ausstatten

Session 4: Storytelling mit Daten (15:30-16:30)

• Headlines, Kontext, Quellenangaben hinzufügen
• Progressive Disclosure: Informationen schrittweise enthüllen
• Mobile-First denken: Responsive Design-Grundlagen
• Übung: Eure Visualisierung "journalistisch verpacken"

Tag 2 LAND-Phase (16:30-17:30)

Stories entwickeln

• Speed-Pitching: 2-Minuten-Story-Präsentationen
• Peer-Feedback: Was funktioniert? Was braucht mehr Kontext?
• Projektteams für morgen bilden
• Tech-Check: Was klappt schon? Wo braucht ihr Hilfe?

Tag 3: Kreation - Eure interaktive Datengeschichte

Morgen SET-Phase (9:00-9:30)

Projekt-Sprint-Start

• Projekt-Optionen (oder eigene Idee):
1. "Student:innen-Leben vermessen": Kosten, Zeit, Stress interaktiv
2. "Hannover entdecken": Stadtteile-Daten mit Karten-Integration
3. "Medienkonsum-Reality": Selbsteinschätzung vs. Tracking-Daten
4. "Hochschul-Diversität": Demografie-Daten mit Filterfunktionen
5. Eigene Idee: Analog prototypiert, digital umgesetzt
• Ressourcen-Stationen: Code-Templates, Datenquellen, Material-Backup

Tag 3 HOLD-Phase (9:30-15:30)

Intensive Entwicklung

Session 1: Rapid Prototyping (9:30-11:00)

• Analog first: Problem und Lösung mit Materialien durchdenken
• Digital second: Svelte-Grundgerüst aus Template starten
• Iterate fast: Alle 15 Minuten testen und verbessern
• Bereitgestellte Templates:
• Balkendiagramm mit Hover
• Liniendiagramm mit Zeitachse
• Bubble Chart mit Kategorien
• Dashboard mit mehreren Charts

Session 2: Daten integrieren (11:00-12:30)

• Echte Daten laden: CSV-Import, JSON-Integration
• Google Sheets als einfache Datenbank nutzen
• Live-Daten: APIs ohne Programmier-Angst
• Error-Handling: "Was passiert, wenn Daten fehlen?"
• Datenqualität checken: Plausibilität und Vollständigkeit

Working Lunch (12:30-13:30)

Session 3: Interaktivität ausbauen (13:30-14:30)

• Erweiterte Features je nach Projekt:
• Zeitslider für Entwicklungen
• Filter-Checkboxen für Kategorien
• Zoom und Pan für Details
• Animationen für Übergänge
• Mobile Optimization: Touch-friendly Design
• Performance: Auch mit vielen Daten flüssig

Session 4: Publishing & Polish (14:30-15:30)

• Svelte-App deployen: Vercel oder Netlify
• Social Media Ready: Meta-Tags und Preview-Bilder
• Accessibility: Screenreader-freundlich
• Final Testing: Auf verschiedenen Geräten prüfen

Finale LAND-Phase (15:30-17:30)

Datengeschichten-Showcase

Live-Präsentationen (15:30-16:30)

• Jedes Team: 5 Minuten Demo + Q&A
• Fokus: "Vom Analog-Prototyp zur interaktiven Story"
• Peer-Voting: "Beste Story", "Beste Interaktion", "Kreativste Lösung"
• QR-Codes für alle Projekte: Sofort auf dem Handy ausprobieren

Integration & Zukunft (16:30-17:15)

• Portfoliointegration: Projekte in BFO-Arbeiten einbetten
• Weiterlernen ohne Überforderung:
• Svelte Tutorial als nächster Schritt
• Datenjournalismus-Communities
• Creative Coding Meetups Hannover
• Tool-Empfehlungen für Semester-Projekte

Abschlusskreis (17:15-17:30)

• Analog-Digital-Reflexion: "Was war überraschend anders?"
• Svelte-Confidence-Check: "Traut ihr euch an ein eigenes Projekt?"
• Gruppenfoto: Analoge Prototypen + digitale Screens
• Einladung: Projekte im Educational Newsroom permanent ausstellen

Material & Tech Stack

Analoge Materialien (pro Team)

• Lego Classic Sets: Verschiedene Größen, Telemagenta-Steine wenn möglich
• Gaffa-Tape: Schwarz, Weiß, Telemagenta (#ff00a0)
• Aludraht: 2mm, verschiedene Längen
• Wackelaugen, Knete, Karton, Filzstifte
• Datensammlung: Clipboards, Timer, Maßbänder

Digitale Tools

• Svelte REPL (svelte.dev/repl) - Hauptarbeitsplatz
• Bereitgestellte Templates: Startpunkt für verschiedene Chart-Typen
• Google Sheets: Einfache Datenbank und CSV-Export
• Datawrapper: Backup-Option für schnelle Charts
• Vercel/Netlify: Ein-Klick-Deployment

Code-Templates (vorbereitet)

// 1. Einfaches Balkendiagramm
let data = [12, 8, 15, 23];

// 2. Interaktiver Counter
let count = 0;
function increment() { count++; }

// 3. Hover-Tooltip
let hoveredItem = null;

// 4. CSV-Daten laden
import Papa from 'papaparse';

Pädagogischer Ansatz

"Think Analog, Build Digital"

• Verstehen vor Programmieren: Jedes Konzept erst haptisch erfahren
• Material als Metapher: Lego = Komponenten, Draht = Datenfluss
• Scheitern als Feature: Analoge Prototypen sind schnell korrigiert
• Iteration over Perfection: Viele kleine Verbesserungen

Creative Technology Integration

• BFO-Werte: Dokumentarische Ethik gilt auch für Datenvisualisierung
• Visual Literacy: Kompositionsregeln gelten analog und digital
• Tool-Agnostic: Svelte heute, aber Prinzipien übertragbar
• Portfolio-Building: Jedes Projekt erweitert das Creative Portfolio

Scaffolding ohne Überforderung

• Templates als Stützräder: Funktionierender Code von Anfang an
• Progressive Complexity: Von einfach zu erweitert
• Peer Learning: Starke helfen Schwächeren
• Just-in-Time Learning: Nur was gerade gebraucht wird

Assessment: Making Learning Visible

Portfolio-Dokumentation

• Tag 1: Analog-Prototyp + erste Svelte-Komponente
• Tag 2: Datenvisualisierung mit Interaktivität
• Tag 3: Vollständige interaktive Datengeschichte + Reflexion

Kompetenz-Badges

• "Analog-Digital-Translator": Erfolgreich Material-Konzept in Code übersetzt
• "Svelte-Starter": Kann eigenständig einfache Komponenten erstellen
• "Data-Storyteller": Verbindet Daten mit journalistischem Kontext
• "Interactive Designer": Schafft sinnvolle Nutzer:innen-Interaktionen

Success Metrics

Sofort messbar:

• 100% erstellen funktionsfähige Svelte-Komponente
• 90% deployen erfolgreich ihre interaktive Geschichte
• Alle verstehen Grundprinzipien von Datenvisualisierung
• Mindestens 80% fühlen sich für weitere Svelte-Projekte gerüstet

Langfristig verfolgbar:

• Integration in BFO-Semesterprojekte
• Verwendung für Praktikums- oder Abschlussarbeiten
• Grundlage für weitere Creative Technology-Kurse
• Portfolio-Bereicherung für Bewerbungen

Dieser Workshop macht Svelte durch analoge Vorerfahrung zugänglich und verwandelt BFO-Student:innen zu Creative Technologists, die sowohl mit Händen als auch mit Code Geschichten erzählen können. Der nahtlose Übergang vom Basteltisch zum Browser baut Vertrauen auf und zeigt: Programmieren ist nur ein weiteres Werkzeug für visuelle Geschichtenerzähler:innen.