Abstract
Driven By Data ist ein interaktives Dashboard, das Bewegungsdaten eines Rennwagens in Echtzeit visualisiert. Durch verschiedene Graphen, 3D Elemente und eine Satellitenkarte werden Zusammenhänge zwischen Daten wie Gaspedalanschläge, Stromstärke und Spannung sichtbar. Dadurch kann das Team vergangene Rennen nicht nur besser auswerten, sondern Rennsport auch der Öffentlichkeit zugänglicher machen. Zusätzlich entstand im Rahmen des Projekts ein Entwurf für das HUD des neuen Rennwagens „Apollo“.
Driven by Data is an interactive Dashboard which visualizes racing data in realtime. Various graphs, 3D-Elements and a satellite map make coherences between data like gas pedal stop, current strength and voltage visible. Hence, the team is able to analyze past races intuitively while also being able to provide easy to understand insights to the public. Moreover, a new HUD was created for the freshly presented racecar „Apollo“.
Links & Code
Projekt live abrufbar über
https://drivenbydata.netlify.app/?t=1785188541495
GitHub Repo (für michael.zoellner@hof-university.de freigeschaltet)
https://github.com/coldheartcloud/DrivenByData
Präsentationsvideo
Exponat
Pitch Deck
Userflow
––––––––––––––––––––––––––––––––––––––
KW31| VS Code, Git, Netlify Workflow
Workflow vorher:
- HTML Datei per Terminal auf lokalem Server hosten und im Webbrowser previewen
- Claude Code Desktop und Sublime Editor im Splitscreen nebeneinander
Workflow nachher:
- VS Code mit Claude Code Plugin als präziser 2in1 KI Editor
- HTML Files werden per Git auf GitHub gepushed und live auf Netlify gehosted
KW28| Werkschauwoche mit Claude Code Pro Abo
Fazit vorweg: mit Claude Code Pro ist sehr viel mehr und schneller möglich als mit Claude Web.
Ich konnte mit Claude live an einer einzelnen HTML Datei arbeiten und schneller alle Funktionen einbauen, die ich mir vorstellen konnte. Claude hat die Architektur geschrieben und für mich erklärt/kommentiert, während ich die den Code parallel im Editor kontrollieren und Parameter selbst anpassen konnte. Claude Code Pro am Desktop ist außerdem wesentlich präziser, erkennt Fehler besser und kann sie leichter beheben
KW27| Grenzen von Claude Web, erstes Styling
eine Woche vor der Werkschau. Ich merke, dass ich mit Claude Code im Web an einige Grenzen stoße. Nach ca 5 Prompts sind die free Tokens verbraucht, wodurch ich kaum größere Interaktionen und Funktionen einbauen kann. Ich finde mich zwar ganz gut im kommentierten Code zurecht, trotzdem tauchen ab und zu Fehler auf, für die ich unverhältnismäßig viel Zeit aufbringen muss.
Das Styling des Dashboards hat ganz gut funktioniert, indem ich claude für jedes Objekt, jede Farbe, etc. kommentierte Parameter im Code habe erstellen lassen, die ich jederzeit händisch finden und anpassen konnte.
KW26| Gestaltung der Elemente in Figma
Um genauer zu planen, wie ich das Dashboard visuell mit Claude Code bauen will, habe ich in Figma Entwürfe erstellt und dabei das Branding (Farben, Typografie) von HofSpannung mit einbezogen.
So konnte ich genauer bestimmen, welche Funktionen, Buttons und Parameter ich brauche, um das Dashboard später auch im Code schnell und leicht anpassen zu können.
KW25| Live-Grafiken bauen
Workflow:
1. Python Script anpassen: gewünschte Spalten aus der Master CSV per Terminal in eine neue CSV kopieren, evtl. neu umrechen
2. HTML für eine Grafik erstellen
3. Parameter anpassen, damit die Werte korrekt angezeigt werden
Next-up:
Grafiken gestalten per Promt, Figma Entwurf oder Markdown File
https://designmd.me/discover/anthropic
https://goprotelemetryextractor.com/
https://www.youtube.com/watch?v=YTGiw3tjhYk
Done
2D Grafiken erstellt:
- Racetrack mit currentPos Marker
- G-Force Panel für x und y mit Schweif
Reflexion
aktuell sind es leider nur Standard-Grafiken, die ich nicht einmal bewusst gestaltet habe. Bisher ging es lediglich darum die relevanten Daten aus der Master CSV in meine CSV zu extrahieren und umzurechnen und sie in der HTML so anzupassen, dass sie korrekt dargestellt werden.
Kritik:
- ich kann nie lange am Stück arbeiten, bevor ich mein 5h Limit in Claude erreiche (6 Promts)
- Aktuell: was ist der Unterschied zu YouTube mit Telemetry Overlay?
Nötig, damit es ein Designprojekt wird:
- verschiedene Ebenen mit detallierteren Infos (zoom in)
- außergewöhnliche / experimentelle Darstellung der Daten für eigene Ästhetik: Wellen, G-Force als Screen-Distortion
- Interaktivität: Gestensteuerung als immersives Erlebnis
- Storytelling: per Mapbox
HUD im Vergleich:
- bewusst gestaltet für usability mit branding in mind
- dafür nicht funktional / würde Programmierer benötigen, um genau so zu laufen
zwei Wege:
ich hätte meine Ideen detailliert ausarbeiten und visualisieren können, allerdings wäre es dann nicht funktional
oder
ich erstelle es funktional per Claude, verbringe dafür die meiste Zeit in der Umsetzung und habe wenig bis keine Zeit für bewusste Gestaltung
Learnings
- wenig Gestaltung, wenig UX, wenig Storytelling
- dafür Umgang mit großen Datensätzen
Mögliche Lösung?
--> evtl. erst Gestalten / Idee möglichst konkret visualisieren und dann Claude per Screenshot exakt so umsetzen lassen? Als würde man einen Programmierer anstellen
Vorgehen / Gefahren bis zur Werkschau
Option A: weitermachen
notfalls Claude Abo holen. Möglichst viele Elemente (Grafiken, 3D, Deck.gl, Gestensteuerung, Poster) umsetzen.
Gefahr: alles zusammenfügen und alle Elemente bewusst gestalten / visuell einheitlich machen könnte nicht mehr möglich sein
Option B: stoppen und verfeinern
alle entstandenen Visualisierungen zusammenfügen und versuchen mit Claude bewusst zu gestalten (Layout, Typo, Farben, Form,...)
Option C: HUD weiter ausarbeiten
weitere Screens bewusst gestalten. Dafür als nicht funktionale Entwürfe, die erst später von HofSpannung umgesetzt werden, möglicherweise aber nicht umsetzbar sind
KW24|
Skizze:
großer Screen bestehend aus verschiedenen Grafiken, die live-Daten visualisieren. Mit einer Timeline kann durch das Rennen gescrubbed werden
Prio-Liste:
1. 2D Grafiken umgesetzt bekommen und nötige Daten in CSV sammeln
2. Gestensteuerung (scrubbing, zoom-in, move Window,…)
3. Print Lap als Poster (wie Strava)
Technik:
3D Grafik mit deck.gl als iframe eingebunden
2D Grafiken in html/css
CSV:
Rundenerkennung läuft ✅
Laptime und LapCount als einzelne Spalten ✅
Ausstellung:
Apollo zu uns bringen klappt vermutlich seitens HofSpannung ✅
Claude Promt
zum weiteren Projektverlauf:
die Kartenfunktion, mit der man sich auf die einzelnen gefahrenen Rennen klicken kann, muss ich erstmal hinten anstellen. Auch die interaktiven 3D Modelle stelle ich hinten an
Der Fokus liegt vorerst darauf weitere datenreaktive Infografiken zu bauen.
Grafiken, die ich bauen will:
Racetrack als simple 2D Linie, die immer bestehen bleibt und mit einem einzelnen Punkt die aktuelle Position anzeigt
Balkendiagramme: ganz simpel zb für Gaspedal etc
ein Diagramm mit x (Zeit) y (Ampere und Volt), das die aktuelle Spannung und den gezogenen Strom zeigt
G-Kräfte visualisieren. entweder als Kreisdiagramm, idealerweise aber out-of-the-box gedacht evtl als leichter Glitch/Verzerrung des Screens
--> Ideal wäre als Endprodukt:
alle Grafiken in einem 3D Raum zu platzieren und alle Grafiken zeigen Daten basierend auf der Timeline. Sobald alle Grafiken stehen, liegt der Fokus darauf die Gestensteuerung zu implementieren.
Per Gesten muss folgendes möglich sein:
Zoom auf einzelne Grafiken. wenn man auf eine bestimmten Faktor hineingezoomed hat, könnten weitere, detalliertere Infos erscheinen
Rotate der 3D Track-Visualisierung
Timeline-Scrubbing: Per Geste vor und zurückspulen
Screen wenn reingezoomed verschieben
evtl einzelne Grafiken als Pop-Up Overlay anklicken können und auf dem Screen verschieben und größer/kleiner ziehen können
KW23| 3D Racetrack in Deck.gl; HUD
deck.gl mit mapbox api token als html mit cursor ai
KW22| Kepler.gl, interaktives Konzept per Gesten, Sidequest: HUD
Sidequest: HUD
Konzept
Option A — MediaPipe (empfohlen): Google-Bibliothek, läuft direkt im Browser per Webcam, erkennt Handgesten und Fingerpositionen. Kein TouchDesigner, keine extra Hardware, keine Installation. Deine Aufsteckkamera reicht völlig. Aufwand: überschaubar, gut dokumentiert.
Option B — Leap Motion Controller: Kleiner USB-Sensor speziell für Handgesten, sehr präzise, Fingererkennung möglich. Kostet ~100€, hat eine JavaScript-API. Einfacher als Kinect.
Mapbox GL JS + deck.gl + MediaPipe, alles JavaScript, alles im Browser.
Weg 1 — Selbst coden mit KI-Unterstützung
VS Code + Claude/Cursor als Co-Pilot. Du schreibst kein komplexes JS alleine, sondern beschreibst was du willst und iterierst. Für jemanden mit deinem Hintergrund heute deutlich realistischer als noch vor zwei Jahren. Aufwand hoch, Kontrolle maximal, Lernkurve steil aber machbar.
Weg 2 — Observable Notebooks
observablehq.com ist eine browserbasierte Umgebung speziell für Datenvisualisierung. deck.gl und Mapbox sind dort direkt integrierbar, du schreibst JavaScript-Schnipsel statt vollständige Apps. Einsteigerfreundlicher als blankes VS Code, aber MediaPipe-Integration wird schwierig.
Filtern der CSV per Script
Initialisierungswerte des GPS raus
Auflösung von 500HZ auf 10HZ
Bounding Box
alle GPS Punkte, die bei Geschwindigkeiten unter 2,3ms aufgezeichnet wurden raus
3D Visualisierung
Höhe: Geschwindigkeit
Farbe: Bremspedal
Lokalisierung der relevanten GPS Positionen
ich habe die GPS Spur mit Google Earth gegengecheckt und dabei den Flugplatz entdeckt, auf dem wir auch für die letzte Testfahrt waren.
--> Größe der GPS-Punkte auf 0.001 reduziert --> tatsächliche Strecke sichtbar
KW20-21| CSV per Script reduzieren
Fokus: GPS Daten in Kepler.gl
Da ich die ursprüngliche CSV in keinem Spreadsheet Programm öffnen konnte, habe ich mich zuerst auf die Visualisierung der GPS Daten in Kepler konzentriert
So sahen die Daten in Kepler aus:
- Kepler lief nur sehr laggy, da die Daten immer noch zu groß waren
- Das Rennen fand nur bei Konradsreuth statt. Die Ausschläge über Hof hinaus sind hier noch merkwürdig
Problem: Limit von 1.000.000 Zeilen
Google Sheets, Excel und Numbers haben alle ein Zeilenlimit, sodass ich die CSV nicht importieren konnte – auch wenn die Filesize inzwischen passt
Lösung: CSV per Script reduzieren
Mit Claude Code habe ich ein Python Script nach und nach weiterentwickelt, um per Terminal die CSV Datei weiter zu reduzieren
KW19| Tools testen, Daten visualisieren
Tools Plan
ich habe mir eine Liste aller Tools angelegt, die in Frage kommen, um meine Daten zu visualisieren und versuche diese nun nach und nach auszuprobieren
Tool / Wofür / Mood
gefilterte Daten erhalten ✅
Endurance Rennen, gefahren von Ben Mouser
als CSV (jetzt 678 MB, vorher 1,42 GB)
reduziert auf nur für mich relevanten Daten
inkl. Dokumentation der Bedeutung der Daten
KW18| Datenfilter anlegen, neue Story-Ansätze
Treffen mit Moser in Werkstatt
Ich hab mit mit Moser gemeinsam in der Werkstatt getroffen, um gezielt in Canoe alle vorhandenen Daten zu besprechen und zu filtern. Dabei konnte ich auch weiteren Input und Inspiration für Data-Stories sammeln
- relevante Daten gefiltert
- Sheet zur Erklärung der Daten
- 3D Modelle gesichtet
Call mit Nils & Tom -> Tool realistisch oder nicht
KW17| Track Day, riesige Datensätze
Trackday
Diese Woche war ich mit dem Team auf dem Flugplatz Hof/Plauen, als das Businessplan Pitch Video gedreht werden sollte. Dabei konnte ich beobachten, wie das Team arbeitet, welche Probleme auftreten und was außenrum passiert:
- Fahrzeug geht wiederholt aus --> Nils holt Daten vom Fahrzeug und ließt sie aus, um den Fehler zu finden
- Track wurde selbst aufgebaut; schräg liegende Cones markieren Kurven
Erste Daten
Moser hat mir einen 5-minütigen Ausschnitt aller Daten/Signale geschickt, die während eines Rennens aufgezeichnet wurden.
Herausforderung: Die Daten sind 1,5gb groß und haben mein Macbook direkt zum einfrieren gebracht. Damit zu arbeiten ist kaum möglich.
Ausblick: die meisten der Daten sind irrelevant und können herausgenommen werden. Bspw wird für jede einzelne der ca. 60 Batteriezellen eine eigene Spalte Daten erstellt. Als nächstes werde ich also versuchen die relevanten Daten rauszufiltern, sodass ich einen Datensatz für ein vollständiges Rennen bearbeiten kann
Entscheidung Tool vs Storytelling
Die Needs des Teams und die Daten sind sehr komplex. Um ein wirklich nützliches Analyse-Tool/Desktop Dashboard zu bauen müsste ich sehr viel tiefer Recherchieren, oft Testen und intensiv mit dem Sprechen. Risiko: zu Aufwändig für das Semesterprojekt, während ich sehr eingeschränkt in der Gestaltung/Umsetzung wäre.
--> Entscheidung für Datadriven-Storytelling
INITIAL PITCH
KW15&16| Call mit Niklas Moser (Experte für Telemetriedaten @Hofspannung)
Erkenntnisse aus Call:
Sie nutzen aktuell zwei Tools: CANoe und Matlab
CANoe
- Daten von .mf4 Datei in CSV umwandel
- zum Fehler auslesen genutzt
Matlab
- Programmieroberfläche, um Visualisierungen zu erstellen (Bspw: einzelne gefahrene Runden miteinander vergleichen)
Außerdem:
Rennen fahren ist nur eine Disziplin. Formular Students ist wenig kompetitiv. Im Ranking werden zusätzlich Konstruktion des Wagens, Wirtschaftlichkeit des Teams usw. bewertet.
Das Team würde eher nach Gefühl fahren und die Daten hauptsächlich nutzen, um Fehler auszulesen. Für das Training müssten sie Daten im Millisekundenbereich auslesen und das wäre übertrieben für sie.
das Dashboard hat zwei Screens
- Interface beim Fahren zeigt Batteriekapazität, Spannung und Rundenzahl
- weiteres Interface, um Boardcomputer zu steuern (Bspw. Stromlimit einstellen)
Außerdem gibt es außen herum einige Knöpfe und Signallichter
KW14| Entscheidung für Hofspannung Motorsports
KW13| Recherche zu Themen
KW12| Themensammlung
