Dimensional Charting für das Kolibri Web UI Toolkit

Das Kolibri Web UI Toolkit erhält mit einem neuen Dimensional Charting-System eine leistungsfähige Erweiterung zur interaktiven Datenvisualisierung – modular und ideal für explorative Analysen.

Ausgangslage

Die Ausgangslage zeigt, dass das Kolibri Web UI Toolkit zwar eine modulare Grundlage für UI-Komponenten bietet, jedoch keine integrierte Lösung für interaktive, multidimensionale Diagramme enthält. Dimensional Charting ist jedoch ein zentraler Bestandteil moderner Datenvisualisierung, besonders für explorative Analysen. Bestehende Bibliotheken wie dc.js oder Crossfilter sind nicht mit dem modularen Ansatz von Kolibri kompatibel. Ziel ist es daher, Kolibri um eine erweiterbare und wiederverwendbare Lösung für interaktive Diagramme zu ergänzen, die dynamische Filterung, Interaktivität und zukünftige Erweiterungen unterstützt.

Zielsetzung

Ziel der Arbeit ist die Entwicklung eines modularen Dimensional Charting-Systems für das Kolibri Web UI Toolkit. Es unterstützt diverse Diagrammtypen und nutzt MVC- sowie Projector-Pattern für eine skalierbare Architektur. Neben interaktiven Visualisierungen werden dynamische Achsen und visuelle Hilfsmittel wie Durchschnitts- und Medianindikatoren integriert, um die Datenanalyse zu verbessern.

Ergebnisse

Die Bachelor-Thesis führte zur erfolgreichen Entwicklung einer modularen, skalierbaren Dimensional Charting-Lösung für das Kolibri Web UI Toolkit. Die auf MVC- und Projector-Pattern basierende Architektur überzeugte durch klare Trennung von Logik, Daten und Darstellung. Usertests bestätigten eine intuitive Bedienbarkeit sowie starke Performance auch bei grossen Datenmengen. Die Ergebnisse zeigen: Die Umsetzung bietet eine solide Grundlage für zukünftige Erweiterungen – sowohl funktional als auch architektonisch.

Technische Schlüsselbegriffe

• Dimensional Charting Ermöglicht die interaktive Darstellung und Filterung von Daten entlang mehrerer Dimensionen – ideal für explorative Analysen.
• Kolibri Web UI Toolkit Ist ein modulares UI-Framework der FHNW, das wiederverwendbare Komponenten und Best Practices für Webanwendungen bereitstellt.
• JavaScript Bildet die technische Basis der Implementierung und ermöglicht eine dynamische, responsive Interaktion im Browser.
• Projector-Pattern Trennt Darstellung von Logik, wodurch sich UI-Komponenten flexibel mit Datenquellen verknüpfen lassen.
• MVC Model-View-Controller sorgt für eine klare Trennung von Daten, Darstellung und Benutzerinteraktion und verbessert so Wartbarkeit und Erweiterbarkeit.

Team