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