Tag Archives: visualization


Visualizations i love

In the making of our room booking software we’ve invested a huge amount of time in interactive visualizations. Enjoy!

Visualizing supply and demand during the semester’s planning phase (blogged).


Schedules of selected room and possible alternatives. This booking page can be controlled via text input as well as drag&drop – both at the same time interacting with each other!


Densely aggregated occupancy stats for each room per semester. (Thanks to mbostock’s calendar view)

Lessons learned

  • I will no longer chose colors by myself, since there’s a lot of psychology behind colors and our perception thereof. Try: colorbrewer, colorpicker
  • Thoughtfully design and then stick to your own APIs. Interacting with visualizations dangerously leads to a messy codebase since there are (too) many technologies involved.
  • Force users to use a modern browser.

Project visualization with redesigned Gantt charts

When reading the Edward Tufte forum on Project Management Graphics I was surprised (and relieved) that a lot of people seem to have their problems with Gantt charts and their doubtful usefulness for project management.

After some thoughts on the topic I’d like to present my proposal for visualization of project flows. In case it matters: I’m currently part of a half a billion Euro construction project in Austria.

The real world example

The image below shows one Gantt chart of the project I’m currently involved in.

Actual Gantt chart of “my” current project.

Aside from its professional look it transports surprisingly little content. My main points of criticism are:

  • On the one hand, with more than a hundred tasks on the left I get overwhelmed by things I’m not responsible for anyway.
  • On the other, my 15 tasks lack important detail.
  • Since it’s not possible to combine overview with sub-project specific detail I have to manage my tasks in parallel.
  • I easily lose track between tasks and the bars on the far right. Gridlines would be a bad idea as well since they add too much clutter.
  • Data is sparse and the chart needs too much space for the presentation thereof.
  • In my context of software development the chart’s implicit focus on sequential, waterfall-like project flows does not fit my reality of ever-changing project plans.
  • I definitely need to print it out to be able to use it.

What would I need?

First of all: Everybody can read a Gantt chart so let’s stick to some reasonable habits: bars that encode project duration by length and diamond symbols that mean milestones, i.e. important dates.

When I think of project management, the whole story is about one core task: Align your output and handover dates with those of others.

As a member of any project team I simply cannot be interested in the task of each individual. However the Gantt chart’s focus lies on the presentation of single tasks. I state that any visualization for project management should focus on people or teams, i.e. responsibilities, rather than tasks.

My second point revolves around overview and detail: My own tasks should be presented in greater detail than data of other teams. My only concern with them is deliverables when we approach mutual handover dates.

The Redesign

Here’s some example data taken from one of my schedules:

Responsible Task Start End
Construction Define location Sun Jan 01 2012 Sun Apr 15 2012
Construction Finish site Thu Aug 01 2013 Milestone
IT Develop prototype Sun Jan 15 2012 Sat Jun 02 2012
IT Testing Sun Jun 03 2012 Sun Jul 01 2012
Business Process Give feedback Sun Jun 03 2012 Sun Jul 01 2012
Supplier Deliver parts (prototype) Thu Mar 01 2012 Sun Aug 05 2012
IT Update integration Sun Jul 01 2012 Tue Aug 14 2012
IT Evaluate prototype (hands-on) Wed Aug 15 2012 Mon Oct 01 2012
IT Evaluate prototype (remote monitoring) Tue Oct 02 2012 Wed May 01 2013
IT Production Mon Aug 19 2013 Wed Jan 01 2014
Business Process Launch prototype environment Wed Aug 15 2012 Milestone
Business Process Go live Mon Aug 19 2013 Milestone
Procurement Procure Mon Apr 01 2013 Wed May 01 2013
Supplier Deliver parts (production) Wed May 01 2013 Mon Aug 12 2013

Classic Gantt chart

And here goes the corresponding Gantt chart:

Gantt chart encoding the tabular data above. (Written in JavaScript).

My version, aka: Gantt90

My enhanced version is shown below. Instead of single tasks I only show the responsible team. Additionally I rotate by 90 degrees – thus Gantt90 – to shift the attention from process flow to responsibility, from a mechanical point of view to a more social one if you want to put it like this.

While the information conveyed is almost equal, the charts size is halved. Hence even the thumbnail becomes readable.

Proposed redesign of a Gantt chart: teams instead of tasks and rotation by 90 degrees.

Adding detail

Since I’m a member of IT, the two blue bars on the right should now convey more information than the others. I do that by highlighting my team and showing the specific tasks along the time axis. Enough detail for the team, and I manage to simultaneously keep track of other teams’ schedules.

Overview and detail combined. The chart could even be made recursive with sub-teams of IT on the right. (…)

Thinking of my big example from the beginning it will be necessary to further divide the detail view on the right. Since projects – tasks as well as teams responsible – fit into hierarchical, tree-like data structures my chart would recursively expand to the right. (IT would then be divided into developers, testers, administrators, etc. and the new chart would resemble its left neighbour – both aligned with the common time axis.)

What about connecting lines?

You may have noticed that I skipped the connecting lines between the taks. I’m convinced that a proper visualization should signalize the project’s inherent structure on its own. Even if the lines are not there, you can see the dependencies between tasks and/or milestones anyway. Your brain does quite a good job at pattern recognition.

tldr: Like spreadsheets, Gantt charts are used to visualize business fiction rather than to manage projects. I’ve proposed a modified Gantt chart to better visualize projects by drawing attention to responsibility rather to single tasks.

Thanks to Elena Reitman’s tweet I stumbled upon the Tufte forum.

I highly recommend the book Envisioning information by Edward Tufte. The charts and the source code used can be found here.


Campus-Tetris revisited

Ich habe bereits über die Raumbuchung am Campus WU und eine damit verbundene Visualisierung der Belegung gebloggt. Hier in aller Kürze eine Visualisierung der Nachfrage nach Räumen.

Das Raumbuchungstool des Campus WU ist darauf ausgelegt, dass Mitarbeiter_innen wie Studierende – also etwa 30.000 Personen – selbständig und unbürokratisch Räume buchen können. Das dadurch drohende Chaos eines heillos belegten Gebäudes verhindern wir durch mehrere Parameter, wie etwa schrittweises Freigeben von Ressourcen, Speichern von Bedarfen in Raumgruppen anstatt in spezifischen Räumen, automatisierte Allokation, oder individuelle Berechtigungen. (Viele der hier genannten Dinge haben wir uns übrigens bei der Konkurrenz simulieren lassen.)

Anyway – wir sind nun seit genau einer Woche online und haben rund 8.000 Termine und somit bereits die Hälfte des kommenden Wintersemesters eingesammelt. Die Frage liegt also nahe, welche Räume (Raumgruppen) stark nachgefragt werden, und – am allerwichtigsten – wo etwaige Konflikte auftreten. Nach ein paar Stunden Python und Javascript kam dann mein Erfolgserlebnis, das ich auch gleich auf Twitter verewigen musste.

Programmieren mit d3.js (Data Driven Documents) macht also Spaß.

      .attr("id", "application-frame")
      .attr("class", "application_frame")
      .attr("x", function(d) { return linear_scale(time_to_float(d.start) ) })
      .attr("y", function(d) { return POOL_POS[d.pool_id].y } )
      .attr("height", function(d) { return POOL_POS[d.pool_id].height } )
      .style("fill", function(d) { return occupancy_to_color(d.occupancy) })
        .duration(500) // this is 1s
        .delay(function() { i = i +1; return i * 2; })         

Ergebnis der Bastelarbeiten ist ein interaktives Diagramm, das mit dem Kalender-Widget oben gesteuert wird. Entlang der Tageszeit wird pro Raum-Pool (die Kapazität ist anhand der Fläche codiert) die Belegung inkl. der angefragten Termine visualisiert. Je stärker die Nachfrage, desto dunkler der Blauton. Liegt die Nachfrage über dem Angebot, wird das Blau zu einem gefährlichen Rot – hier gibt’s also dann etwas zu bereinigen.

Visualisierung der angefragten und verfügbaren Kapazitäten pro Datum.

Das Ergebnis mit der traumhaft-schönen Animation auf YouTube. Das Diagramm ist erstaunlich responsive – immerhin werden mit jedem Klick eine Tabelle mit einer halben Million Einträge sechsmal durchsucht, der Tag in 60 Viertelstunden zerteilt und anschließend die Auslastung live berechnet.


IT explained

Gutes Office, schlechtes Office

Ich schimpfe an dieser Stelle immer wieder einmal über Office-Dokumente, weil sie meist zwar leicht zu erstellen, beinahe immer aber schwer zu pflegen sind. Insbesonders dann, wenn

  • Daten oftmals aktualisiert werden müssen,
  • mehrere Personen diese Änderungen durchführen,
  • man Versionen vergleichen möchte oder
  • Daten aus anderen Systemen importiert werden könnten

zahlt es sich aus, nach Alternativen Ausschau zu halten.

Hier ein sehr schönes Beispiel von Sabine Hörmannsdorfer, die meinen Kurs an der FH Wien besucht hat. Einen sich schneller ändernden Datensatz, als das Beziehungschaos bei GZSZ kann man sich ohnehin nicht vorstellen. Ideal also, um Graphviz statt Powerpoint zur Hand zu nehmen.

Zunächst werden die Daten textuell definiert. Das hat den Vorteil, dass man dafür keine spezielle Software benötigt. So etwas kann man daher auch stressfrei kopieren, am Handy tippen oder Vorlagen aus dem Web klauen.

digraph G
	"Beziehungswirrwarr bei GZSZ" [shape=box, style=filled, color=darkorchid, fontcolor=white, fontname=verdana, fontsize=20.0]
	"in einer Beziehung" [shape=box, style=filled, color=red]
	"verwandt" [shape=box, style=filled, color=forestgreen]
	"ex-Beziehung" [shape=box, style=filled, color=blue]
	"Sabine Hoermannsdorfer, PWOE 2013, Vertiefung IT-Systeme" [shape=none, fontcolor=gray20, fontsize=10.0];
	Ayla -> Philip [dir=both, color=red];
	Philip -> John [dir=both, color=forestgreen];
	Philip -> Emily [dir=both, color=forestgreen];
	John -> Pia [dir=both, color=red];
	Leon -> Pia [dir=both, color=red];
	John -> Emily [dir=both, color=forestgreen];
	Emily -> Patrick [dir=both, color=blue];
	Patrick -> Jasmin [dir=both, color=blue];
	Patrick -> Dominik [dir=both, color=forestgreen];
	Jasmin -> Dominik [dir=both, color=blue];
	Dominik -> Jo [dir=both, color=forestgreen];
	Jo -> Katrin [dir=both, color=blue];
	Jasmin -> Kurt [dir=both, color=red];
	Katrin -> Jasmin [dir=both, color=forestgreen];
	Katrin -> Kurt [dir=both, color=blue];
	Ayla -> Tayfun [dir=both, color=forestgreen];
	Zac -> Tanja [dir=both, color=blue];
	Vince -> Tanja [dir=both, color=blue];
	Lilly -> Tanja [dir=both, color=forestgreen];
	Maren -> Lilly [dir=both, color=forestgreen];
	Lilly -> Vince [dir=both, color=blue];
	Maren -> Tanja [dir=both, color=forestgreen];
	Maren -> Alexander [dir=both, color=red];
	Vince -> Leon [dir=both, color=forestgreen];
	Tuner -> Emily [dir=both, color=blue];
	Ayla -> Tayfun [dir=both, color=red];
	Kurt -> Tanja [dir=both, color=forestgreen];
	Alexander -> Katrin [dir=both, color=blue];
	Maren -> Kurt [dir=both, color=blue];
bgcolor=lightcoral //hintergrundfarbe ändern//

Läuft sogar unter Windows.

Die fertige *.dot-Datei wird anschließend mit dem Programm dot (.exe unter Windows) in ein Bild gerendert. Outputformat ist hier etwa PNG, es sind aber auch PDF und zahlreiche andere möglich.

Fertig ist der Output.

Der Output kann nach Belieben immer wieder aus der Textdatei erstellt werden. Änderungen sind so sehr schnell durchgeführt. Technisch und optisch ist so ziemlich alles möglich und sogar noch mehr.


Tetris 3D!

Vor kurzem habe ich über die Tetris-Maschine, einen Algorithmus zum Finden optimaler Raum-Zeit-Kombinationen in Reservierungssystemen, gebloggt. Diesmal ist die Aufgabe dieselbe, der Lösungsweg allerdings ein gänzlich anderer.

März oder Oktober – die WU plant – wie andere Universitäten ebenso – Lehrveranstaltungstermine des jeweils kommenden Semesters. Der Prozess gleicht dem Einräumen meines Kühlschranks nach dem Großeinkauf: Zuerst müssen große Veranstaltungen fixiert werden, kleinere müssen sich an die Gegebenheiten anpassen – also nehmen, was noch übrig ist. Mit zunehmender Fragmentierung durch Blockveranstaltungen oder Prüfungstermine wird es somit immer schwieriger, einen fixen Raum oder auch nur eine stabile Beginn- und Endzeit für Veranstaltungen zu finden. In diesem Fall kann eine Visualisierung der Belegung sinnvoll sein.

Doch wie soll man knapp 20.000 Veranstaltungen in 150 Räumen pro Semester übersichtlich darstellen?

Die Referenz

Anbei ein Screenshot vom aktuellen Buchungssystem: Wochentagsweise werden die Belegungen dargestellt – pro Raum gibt es eine derartige Auswertung. Die einzelnen Kürzel codieren die Veranstaltungen, ein Überblick über den gesamten Campus ist allerdings so nicht möglich.

Belegung eines Raums über ein ganzes Semester nach Wochentagen. ASCII-Art rules!

Der Re-Write

Trotz des geekigen Charmes der obigen ASCII-Darstellung lautete der Plan, die Belegungen interaktiv zu visualisieren. Typische Anwendungsfälle sind etwa:

  • “Ich benötige kommendes Semester einen 60er-Raum am Donnerstag Nachmittag.”
  • “Ich benötige in der ersten Semesterhälfte einen 30er-Raum am Montag und Mittwoch zur selben Beginnzeit.”
  • “Ich benötige für Termine 1, 2, 3, 4 und 5 einen Hörsaal.”

Die Idee: Die Belegung sollte Raum, Uhrzeit und Datum dreidimensional darstellen, also Datum über Datum legen. Mit semitransparenten Balken pro Belegungen könnte die Farbintensität somit die Dichte der Buchungen codieren. Durch Zu- und Wegschalten einzelner Tage, wäre es außerdem möglich, schnell in der Datenmenge zu navigieren.

Mock-up Dez. 2011: Meine ursprüngliche Idee, wie man dreidimensional durch die Buchungen am Campus blicken sollte.
Low-Fidelity Prototype auf Papier. Die Achsen für Uhrzeiten und Räume sind nun vertauscht, denn eine variable Anzahl an Räumen expandiert besser nach unten als nach rechts.

Nach einigen Spielereien mit absoluter Positionierung von <div>-Elementen im DOM fiel die Wahl doch recht schnell auf das weitaus effektivere d3.js. Diese Javascript-Library ermöglicht das Erstellen interaktiver SVG-Dokumente. Meine Hassliebe zu Javascript war jedenfalls überwunden, als das method chaining der Library endlich von den Fingern ins Gehirn übergegangen war:

function actually_draw(data) {

      .attr("id", "day" + data.day)
      .attr("class", "booking")
      .attr("width", function(d) {
        return linear_scale(time_to_float(d.end)) - linear_scale( time_to_float(d.start))
      .attr("height", R_AXIS.incr - 2)
      .attr("x", function(d) { return linear_scale( time_to_float(d.start) ) } )
      .attr("y", function(d) { return  room_y(d.room)});  

Exzessives method chaining gepaart mit einigen wenig intuitiven Methoden wie .selectAll() (macht man, obwohl noch nichts vorhanden ist) oder .data(data).enter() (“steigt” hinein in die Daten). Ist man da mal durch, ist plötzlich alles möglich!

Endergebnis: Über 2000 Termine auf einer Seite visualisiert, interaktiv mit dem Kalender zu steuern. Echte Daten der WU im Sommersemester 2013.

Auch wenn der Screenshot noch nicht toll aussieht: Der Browser holt sich mehrere tausend Termine und rendert diese ohne Performance-Probleme bei jedem Klick im Kalender. Sourcecode und Live-Demo sind verfügbar unter:




CO2-Messung für Personenzählung

Die Idee ist ebenso genial wie einfach zugleich: Personen produzieren CO2. Der Gehalt des Gases in der Raumluft lässt daher Rückschlüsse auf die Anzahl der Atmenden zu. Soweit die Hypothese – Zeit für einen Reality Check.

Am Campus WU ist die Klimatisierung in eine umfassende Gebäudeleittechnik integriert. Wo früher mühsam verkabelt wurde, da reicht heute ein einziges TCP/IP-Signal aus. Zu Testzwecken haben wir einen CO2-Sensor mit Webserver ausgestattet und in einem Hörsaal (2.18) der WU platziert.

Im Hörsaal befindet sich ein CO2-Sensor, der Rückschlüsse auf die Raumbelegung liefern soll.

Von der Decke des Hörsaals aus wird nun ununterbrochen gerochen, in einer Datenbank wird der CO2-Wert protokolliert.

It works!

Die Freude war jedenfalls groß, als heute das Setup in Betrieb genommen wurde und auch sofort “angeschlagen” hat.

Unter dem CO2-Sensor stehen und sprechen, kurz rausgehen, direktes Hineinatmen, Raum verlassen. It works!

Was nun?

Nun folgt eine mathematische Aufgabe: Wie kommen wir von einem Co2-Level (eigentlich einer elektrischen Spannung) zu einer Personenzahl? Der Wert wird stark von der tatsächlichen Kubatur des Raums abhängen, von Faktoren wie Zustand der Fenster und der Klimatisierung; bösartig könnte man auch noch den Inhalt der Lehrveranstaltung als Faktor ansehen. Meine Meinung: Menschen können Muster ohnehin sehr gut erkennen; der Mockup des künftigen Raumbuchungs-Systems zeigt bereits ohne errechnete Werte, was Sache ist:

Kleine Diagramme visualisieren den Verlauf des CO2-Gehalts; Menschen sind ohnehin gute Muster-Erkenner bei geeigneter Darstellung.


Mit 3. Oktober konnte ich das Setup erstmals mit echten Lehrveranstaltungen testen. Laut Vorlesungsverzeichnis gab es zwei Lehrveranstaltungen, die gebuchten Zeiten habe ich farblich hinterlegt. LV1 hat 15 Minuten verspätet begonnen, es gab zusätzlich ein paar Pausen oder geöffnete Fenster. LV2 lief lediglich rund 20 Minuten – durchaus üblich zu Semesterbeginn, wo beispielsweise nur der Ablauf erklärt wird.

CO2-Verlauf im Raum während des Tages und zwei gebuchten Lehrveranstaltungen.

Redesign SAP Finanzbericht

Zur Thematik, dass erfolgreiche ERP-Systeme nicht zwangsweise durch einfach bedienbare User Interfaces glänzen, habe ich bereits gebloggt. Spätestens, seitdem ich meine eigene Kostenstelle verantworte, war’s nun aber höchste Zeit, den Bericht, der mir Überblick über meine Finanzen geben sollte, zu überarbeiten.

Zu allererst ein Blick auf den Status Quo

Nach einigem Herumgeklicke und der Erkenntnis, dass SAP-Jahre aus 16 Monaten bestehen, erreiche ich Woche für Woche den Überblick über meine Kostenstelle im Look & Feel von Teletext, aka SAP GUI.

Der Bericht listet alle von mir unterschriebenen Rechnungen mit Betrag, Datum, Belegtext sowie Kostenart. Um den Leser nicht mit Details zu verwirren (so interessant sind meine Zahlen nun auch wieder nicht), habe ich die Berichtsstruktur hervorgehoben:

Der Bericht zeigt auf Kontierungselemente (Kostenstellen) gebuchte Kosten aufgeschlüsselt nach Kostenarten (Konten). Die Logik des Berichts orientiert sich mMn zu stark am System.

Im Großen und Ganzen befinden sich auf der Seite zwei interessante Blöcke: eine Übersicht oben links, sowie eine Tabelle mit den Buchungen darunter.

Wenn ich mir nun überlege, welche Aufgaben ich mit dem Bericht abwickeln muss, dann sind das nach absteigender Wichtigkeit:

  1. Überblick über Planungs- sowie Ist-Stand meiner Finanzen
  2. Details zu einzelnen Rechnungen (z.B.: im Falle von Reklamationen)
  3. Analyse meiner Kostenstruktur nach Zeit und Kostenart

Traurig, aber wahr: bereits der erste Task ist mit dem Bericht nicht ohne Weiteres möglich. Die Transaktion, also der SAP-Name für eine Bildschirm-Maske, listet entweder Plan- oder Ist-Daten. Die jeweils andere Ansicht erreicht man durch Beenden und Neustart des Berichts nach anderen Auswahlkriterien. (…)

Finanzbericht Marke Eigenbau

Eine kleiner Entwurf auf einer McDonalds-Rechnung (ein so genannter Low-Fidelity Mockup) und ein paar Stunden Datenexport, HTML, SQL, Javascript und Python später ist die Alternative fertig: Eine Webseite, die die drei oben genannten Tasks auf einen Blick ermöglicht.

Der Kasten oben links bietet mir die Gesamtsummen von Ist und Plan als Zahlen, zusätzlich verdeutlicht ein Prozentwert das Verhältnis (Wieviel ist schon weg?).  Darüber ein einziges Auswahlfeld für das Berichtsjahr, kein Formular-Moloch. Rechts daneben befindet sich Säulendiagramm, das mir dieses Plan/Ist-Verhältnis nochmal grafisch verdeutlicht. Bei mehreren Jahren – bei mir nicht der Fall – sieht man so automatisch den Budgetverlauf.

Die Details zu einzelnen Rechnungen finden sich darunter. Die Tabelle verwendet das jQuery-Plugin DataTables, welches Such-, Sortierfunktion und Pagination bietet. So sind ein Sortieren nach Datum, oder das Suchen einer bestimmten Rechnung keine große Hexerei. Die rein Client-seitige Umsetzung sorgt dafür, dass das Ding responsive bleibt.

Alternativvorschlag: Ein Überblick über Plan und Ist (gleichzeitig!) oben links, eine Tabelle aller Buchungen mit Sortier- und Suchfunktion darunter. Oben rechts ein paar grafische Darstellungen eben jener Daten.

Den Zuckerguss stellen die drei Diagramme im TabbedView oben rechts dar. Neben dem bereits besprochenen Jahresüberblick, gibt es noch ein Liniendiagramm, welches den Planungsstand mit dem Iststand unterjährig vergleicht. Dadurch dass auf Jahresebene geplant wird, ist eine kumulative Auswertung sinnvoll.

Die wichtigste Frage auf einen Blick beantwortet: Bin ich drüber oder drunter?

Abschließend noch eine Auswertung nach Kostenarten, die eine hierarchische Datenstruktur mit variabler Tiefe darstellen. In diesem Fall habe ich mich für eine Treemap entschieden. Diese codiert zwei Variable (Größe des Rechtecks entspricht der Summe; Farbe ist die Abweichung) in eine klickbare Fläche. Das “Entdecken” der Kostenzusammensetzung macht so richtig Spaß.

Sehr schöne Visualisierung einer hierarchischen Datenstruktur: die Größe entspricht der Summe, die Farbe der Plan/Ist-Abweichung

Die hier dargestellte Kritik an aktuellen Berichten ist positiv gemeint und soll keineswegs als SAP-Bashing missverstanden werden. Dass die Software derart erfolgreich war, ist und vermutlich bleiben wird, hat schon seine guten Gründe. Ich bin selbst überrascht, wie sich mein Blick auf eben jenen Bericht verändert hat, seitdem ich auch wirklich ein Anwender bin. (…)