VISUALISIERUNG

VON OPEN DATA




WILLKOMMEN AUF UNSERER PLATTFORM ZUR VISUALISIERUNG VON STÖRUNGSMELDUNGEN DER BERNMOBIL. ENTWICKLET WURDE DIESE APPLIKATION IM RAHMEN DER VORLESUNG "OPEN DATA" AN DER UNIVERSITÄT BERN.

Vorgehen



Schritt 1

Erhalt der Daten vom Datacoach

Wir haben die Daten als Excel-File erhalten. Durch Text-Mining und diversen Umformungen haben wir ein CSV-File erstellt, welches unseren Anforderungen für die Visualisierung am Besten entsprach.

Die Original-Daten sowie das CSV-File kriegst du hier:

Download .xlsx
Download .csv


Schritt 2

Suche nach einem Code Snippet

Die Suche nach einem passenden und aussagekräftigen Snippet war ein aufwändiger, doch auch spannender Prozess. Wir haben einige Prototypen "gebaut" und sind so unserem Ziel immer etwas näher gekommen. Einer unserer ersten Prototypen, welcher in eben diesem Prozess entstanden ist, möchten wir euch nicht vorenthalten. Visualisiert werden Daten, die aufwendig sortiert und rangiert wurden. Resultat davon ist ein "Ranking" der Linien über das Jahr 2015, wobei Platz eins an diejenige Linie geht, welche, im Vergleich zu den anderen aufgeführten Linien, am wenigsten Störungen im jeweiligen Monat aufwies.

Das Original-Snippet, sowie den Rankingversuch kriegst du hier:

Ranking Versuch
Weitere Entwürfe und Versuche
Snippet Source


Schritt 3

Customizing des/der Code-Snippets/Daten

Nach ein paar ersten (erfolglosen) Versuchen konnten wir die Daten ein erstes Mal korrekt einlesen und visualisieren. Sofort stachen Eigenheiten heraus. Allerdings mussten wir uns mit voreiligen Schlüssen zurückhalten. Die Daten reichen von Dezember 2014 bis März 2016, was einen sinnvollen, direkten Vergleich der Jahre sinnlos macht. Auf der Suche nach einer Lösung für das Vergleichsproblem (und damit auch die Aussagekraft) sind wir auf eine zweite Darstellung der Daten mittels "Treeview" gestossen. In diesem "Treeview" stecken Filterfunktionalitäten, welche, ab einer Fensterbreite von 1150 Pixeln, den Nutzerinnen und Nutzern die genauere Betrachtung einzelner Hierarchiestränge ermöglichen. So können beispielsweise die verschiedenen Störungsarten im Juni 2015 anteilsmässig miteinander verglichen werden.

Bootstrap Treeview


Schritt 4

Letzter Schliff

In einem letzten Schritt haben wir unsere Visualisierung in ein ansprechendes One-Page-Design eingepasst und mit Informationen, sowie Zusatzfeatures (Carousel, License im Tooltip, Twitter Live-Feed etc.) ausgeschmückt. Zudem haben wir unter der Haube nochmal kräftig am CSS des Basis-Designs (von blacktie.co) und an unserer JavaScript-Datei gearbeitet.

Download our code as ZIP-File


Einige erste Entwürfe und Ideen



ALS ÖFFENTLICHER TRANSPORTDIENSTLEISTER DER STADT BERN BLEIBT AUCH BERNMOBIL NICHT VON STÖRUNGEN UND EINSCHRÄNKUNGEN DES FAHRBETRIEBS VERSCHONT. TAGTÄGLICH WERDEN ETLICHE STÖRUNGSMELDUNGEN DURCH DIE LEITSTELLE REGISTRIERT UND VERARBEITET. DABEI REICHT DIE BANDBREITE VON WINTERLICHEM SCHNEEFALL BIS HIN ZU SOMMERLICHEN VERANSTALTUNGEN.

UNSERE VISUALISIERUNG BELEUCHTET STÖRUNGSMELDUNGEN ANTEILSMÄSSIG IM ZEITLICHEN KONTEXT. DAS SUNBURST-DIAGRAMM BAUT AUF EINE HIERARCHISCHE STRUKTUR, WOBEI DAS JAHR, GEFOLGT VON MONAT, KATEGORIE UND LINIE, DIE HÖCHSTE EBENE BILDET. DER FILTER, WELCHER AB EINER FENSTERBREITE VON 1150 PIXELN ERSCHEINT, ERMÖGLICHT DEN NUTZERINNEN UND NUTZERN DIE GENAUERE BETRACHTUNG EINZELNER HIERARCHIESTRÄNGE. SO KÖNNEN BEISPIELSWEISE DIE VERSCHIEDENEN STÖRUNGSARTEN IM JUNI 2015 ANTEILSMÄSSIG MITEINANDER VERGLICHEN WERDEN:

AKTUELLE STÖRUNGSMELDUNGEN VIA TWITTER LIVE-FEED.

Über uns



SILVAN SCHWEGLER

Student BSc Business Administration, Nebenfach Psychologie, 6. Semester, Universität Bern

JONAS BRÜNIGER

Student BSc Business Administration, Nebenfach Sozialwissenschaften, 4. Semester, Universität Bern

essential design credits to BLACKTIE.CO