Datenvisualisierung Bernmobil

Story

Start der Vorlesung - wir dürfen hier eine App programmieren. Das klingt doch toll. Wir wussten nicht worauf wir uns einlassen und wie viel Arbeit auf uns wartet. Apps werden in den heutigen Zeiten zu tausenden entwickelt. Aber jeder, der einmal selber mit einem App-Projekt zu tun hatte, weiss um die vielen Fragen, die vor der Realisierung stehen. Dank den Vorgaben war für uns klar, dass es sich um eine Web-App handeln wird, welche mit JavaScript, genauer der D3.js Bibliothek, erstellt wird. Doch bevor wir mit der App-Planung anfangen konnten, stellten sich andere Fragen. Grosse Fragen wie: Wie lernt man Programmieren? Welche Fähigkeiten müssen wir erlernen? Was ist möglich zu realisieren in so kurzer Zeit? Es geht um erste Programmiererfahrungen, dazu gehört auch die richtigen Foren und passende Bücher zu finden. Unsere ersten Anhaltspunkte waren etwa 20 Stunden Videomaterial, welche wir uns zu Gemüte führen durften. Es war das erste Mal, dass wir uns mit Programmieren versuchten.

So wurde es uns in der Vorlesung prophezeit:

Unser Bild nahm einen ähnlichen Verlauf:

  1. Start der Vorlesung
  2. Viedos / Bücher / Ideen sammeln
  3. Soooo viele Videos
  4. Scheitert bereits an einfachen Dingen - Wieso liest es mein external Stylesheet nicht ein?!
  5. Diagramm wird nicht ausgegeben
  6. Noch mal zusammenreissen, noch mal zurück zur Theorie
  7. Diagramm wird ausgegeben, aber es ist unmöglich die Darstellung mit unseren Daten zu verbinden
  8. D3 üben, vielleicht hilfts
  9. Neue Strategie, neues Diagramm! Daten werden eingelesen, doch der Radius als Funktion funktioniert nicht...
  10. Diagramm neu erstellt, Daten scheinen eingelesen zu werden, doch die Line erscheint nicht
  11. Mit C3 unser erstes funktionierendes Diagramm erstellt
  12. Weitere Diagramme geschafft
  13. Bootstrap ist ja gar nicht so einfach...
  14. Langsam nimmt die Sache Form an
  15. 100% motiviert mehr Programmiererfahrungen zu sammeln

Lernprozess

Wir haben zuerst alle Videos des invertet classroom durchgeschaut und durchgearbeitet. Ebenfalls haben wir weiterführende Literatur gesucht und uns in die Thematik eingelesen. Es war erst mal alles neu und wir konnten uns noch schlecht vorstellen, das Neugelernte anzuwenden.

Ideen sammeln

In einem nächsten Schritt haben wir uns gemeinsam überlegt, wie wir die Daten von Bernmobil visualisieren möchten. Unsere Visionen wurden nach den ersten Versuchen und nach tagelangem Ausprobieren ohne ersichtlichen Output, sehr eingeschränkt. Erstmal mit einem Barchart und einem Donutchart starten. Code Snippets konnten wir nur dürftig mit unseren Daten und unseren Ideen kombinieren.
Download Automatenliste.csv Download Fehlerliste.csv

C3 als unsere Rettung

Von einem Bekannten bekamen wir den Tipp mit der Libary C3, welche auf D3 aufbaut, zu arbeiten. Damit brachten wir unsere erste funktionierende Visualisierung zu Stande. Mit der noch zur Verfügung stehenden Zeit und mit unseren Fähigkeiten, mussten wir unsere Darstellungen einfach halten. Wir beschlossen, dass wir mit unseren Visualisierungen drei Ziele verfolgen werden. Es soll klar ersichtlich sein, welche Fehler am meisten innerhalb eines Jahres auftauchen, es soll ersichtlich sein, welche Automaten am meisten Fehler generieren und es soll bei den drei häufigsten Fehlern ersichtlich sein, an welchen Tagen sie am meisten aufgetreten sind.
Snippet Source Donut Chart
Snippet Source Line Chart

Design erstellen

Endlich haben wir unsere Visualisierungen realisiert. Nun geht es noch um die Website-Gestaltung. Bis die Navigation und das Karousel auf der Startseite stehen, gehen viele Nerven verloren. Die Seite responsive zu gestalten, liess uns nahezu wahnsinnig werden. Immer wieder tanzt ein Bild aus der Reihe.

    Wie bereits erwähnt fehlt es uns bis anhin an jeglicher Programmiererfahrung. Doch wir kammen mit sehr viel Interesse für Softwareentwicklung. In einem Wirtschaftsinformatikstudium hört man immer wieder, dass man mindesten ein Grundverständnis für Codes haben muss. Doch die Gründe, warum wir programmieren lernen wollen, sind auch persönlicher Natur.

  1. Software Technologie ist faszinierend
  2. Softwareentwicklung bietet viele verschiedene Facetten
  3. Es ist eine Herausforderung
  4. Programmierer werden in Zukunft noch mehr benötigt
  5. Wir haben eigene Softwareideen - Gerne würden wir eigene Webseiten oder Apps erstellen
  6. Bessere Chancen auf dem Arbeitsmarkt

Warum programmieren uns interessiert

Sollte nicht jeder programmieren können? Der Computer ist nicht mehr aus dem Leben wegzudenken und wir benutzen täglich Software, die von anderen programmiert wurde. Wie ein Programm funktioniert und wie man es umschreiben kann, sobald man einen Quellcode dafür hat, das sollte heute jeder Mensch wissen. „Die eigenen Visionen und Ideen umsetzen“. Jeder hatte bestimmt schon eine Vision oder eine Idee die er umsetzen möchte. Es gibt im Alltag immer wieder Bedarf an Software, immer wieder Prozesse, die man mit Software optimieren könnte.

Los gehts....

Motiviert sind wir. Doch es wird uns sofort bewusst wie viel Arbeit uns noch erwartet. Die Anforderungen scheinen hoch zu sein.

Videos und viel Geduld beim Üben

Was ist ein Editor? Was ist ein Tag?
Wow ich kann schon eine Überschrift und Text einfügen.

Unglaublich viele Versuche

Unsere ersten Programmiererfahrungen sind mühsam. Mal haben wir einen Chart, aber mit den falschen Daten. Mal sind die Daten eingebunden, aber das Chart wird nicht richtig ausgegeben. Jeden Tag haben wir viel Energie aufgewendet, dafür auch jeden Tag in kleinen Schritten dazu gelernt.

Unser erstes funktionierendes Chart

Die Freude war riesig und wir schöpften wieder neue Hoffnung als uns das Programm endlich ein funktionierendes Chart ausgespuckt hat.