Gelungene Visualisierungen ermöglichen den freien Blick aufs Detail – aber ohne Verlust des Gesamtüberblicks! Mit Browsen, Zoomen und Navigieren hält sich DeltaMaster 6 konsequent an dieses Paradigma. Wir prüfen in einem zweiteiligen Blogbeitrag, ob sich die zugrundeliegende Technik des Browsens auch für andere Szenarios einsetzen lässt.

Ein Liebling unserer Kunden zur Visualisierung von Daten ist der Hyperbrowser, der im Hintergrund des Browsens wirkt (klicken Sie bitte auf die Grafik für eine vergrößerte Darstellung!):

Der Hyperbrowser in der Startposition

Sämtliche Elemente aller Dimensionshierarchien lassen sich in einer einzigen Darstellung mit ihrem Beitrag – hier zu einer Umsatzänderung – erfassen.

Auf der Grafik lassen sich interessante Elemente zur genaueren Inspektion in den Fokus ziehen – wie etwa die Produkthauptgruppe „Sondermodelle“, die ein aus der Art geschlagenes Element „EF Drehst. Nova“ beherbergt, das gegen den allgemeinen Trend einen Umsatzrückgang zu verzeichnen hatte. Die zugehörigen Produktgruppen und Produkte, die eben noch etwas verschämt am Bildrand platziert waren, sind nun inklusive ihres Beitrags zur Umsatzänderung klar und deutlich zu erkennen.

Ruht der Mauszeiger auf dem Knoten „EF Drehst. Nova“, bietet DeltaMaster augenblicklich die zugehörigen Daten zur Detailanalyse an:

Der Hyperbrowser bei der Analyse

Diese beiden Screenshots geben leider das erhabene Gefühl, das den Anwender beim Dirigieren dieser Baumstruktur ergreift, nur eingeschränkt wieder. Auf unserer DeltaMaster-Homepage können Sie sich im Video „Browsen“ einen Eindruck der bewegten Darstellung verschaffen.

Befassen wir uns für einen Moment mit der Technik: Was wird dargestellt und wie ist es denn überhaupt möglich, diese Fülle an Informationen auf begrenztem Platz unterzubringen?

Es handelt sich mit dem Baum technisch gesehen um einen Spezialfall eines Graphen. Ein Baum hat eine Wurzel (im Beispiel der zentrale Knoten „Aug 2016“) und von diesem gehen Kanten zu den Kindern aus. Von diesen gibt es wiederum Kanten zu den eigenen Kindern (also den Enkeln der Wurzel) usw.

Wichtig ist, dass sich von der Wurzel ausgehende Kantenzüge nie mehr treffen. Jeder Knoten kann deshalb auch nur auf einem einzigen Weg von der Wurzel aus erreicht werden.

Die Darstellung eines Baumes kann aus folgendem Grund kompliziert werden: Wenn jeder Knoten n Kinder hat, dann wächst die Gesamtanzahl der Kinder einer Ebene exponentiell: Bei n = 5 gibt es über alle Dimensionen hinweg in der ersten Ebene 5 Knoten, in der zweiten 25 Knoten, dann bereits 125, 625, …

Im normalen euklidischen Raum, den Sie und ich täglich erleben, gibt es somit unweigerlich Probleme der graphischen Unterbringung, wenn versucht wird, alle Elemente einer Ebene auf einem Kreis zu platzieren, dessen Radius proportional mit der Tiefe der Ebene wächst (also 1. Ebene mit Radius r, 2. Ebene mit Radius 2r, 3. Ebene mit Radius 3r, …). Dies liegt daran, dass die Anzahl der Knoten exponentiell wächst, aber der zur Verfügung stehende Platz mit dem Kreisumfang nur linear. Wenn die Dichte der Platzierung der Elemente aber konstant sein soll, bliebe nur die Lösung, den Radius ebenfalls exponentiell zu vergrößern. Mit jeder weiteren anzuzeigenden Ebene vervielfachte sich dann aber der benötigte Platz und ein vorgegebener Rahmen, der für die graphische Darstellung zur Verfügung steht, wäre schnell gesprengt:

Im euklidischen Raum wird es eng, egal, ob man a) Knoten immer dichter auf Kreisen mit linear wachsenden Radien (links) oder b) Knoten gleichmäßig auf Kreisen mit exponentiell wachsenden Radien platziert (rechts)

Hier in diesem Beispiel gibt es pro Knoten 5 Kinder und wir gehen von einer Tiefe von 4 aus. Dabei haben wir noch ein wenig Extraabstand zwischen den einzelnen Zweigen eingebaut, um diese optisch besser zu trennen.

Es gibt nun aber einen mathematischen Raum, den sogenannten Hyperbolischen Raum, in dem Kreisumfänge mit dem linear wachsenden Radius ebenfalls exponentiell ansteigen, also genügend Platz für unsere Knoten zur Verfügung steht. Leider ist es nicht so einfach, sich einen solchen Raum mit seinen Eigenschaften plastisch vorzustellen. Zum Glück existiert aber eine Abbildung aus diesem Raum in den gut vorstellbaren zweidimensionalen Raum und zwar auf die sogenannte Poincaré’sche Kreisscheibe, die wir in DeltaMaster verwenden und die je nach Form des Fensters meistens zu einer Ellipse mutiert.

Im unendlich großen Hyperbolischen Raum könnten wir uns frei bewegen und ohne klaustrophobische Anwandlungen deutlich mehr Objekte bequem platzieren, die lokal auch untereinander ähnliche Abstände besitzen. Die erwähnte Abbildung auf die zweidimensionale Kreisscheibe ist nun so konstruiert, dass Objekten in der Mitte der Scheibe mehr Platz gegönnt wird und Objekte zum Rand hin gedrängt erscheinen. Tatsächlich landen unendlich weit entfernte Objekte im Hyperbolischen Raum auf dem Rand der Kreisscheibe. Eine unendlich große Fläche lässt sich somit in einer kompakten Kreisscheibe unterbringen.

Wenn wir uns nun im Hyperbolischen Raum zu einem Objekt des Interesses bewegen, ist dies in der Darstellung mithilfe der Kreisscheibe gleichbedeutend damit, diesen Knoten in das Zentrum der Scheibe zu ziehen. Der Algorithmus ist so angelegt, dass Abstände zu Nachbarknoten ungefähr gleich groß erscheinen, egal welcher Knoten in die Mitte gezogen wird. Diese Bedingung zu erfüllen stellt den kniffligsten Teil der Visualisierung dar.

Der Anwender muss natürlich nichts von diesen Hintergründen wissen. Er erfreut sich daran, dass er auf begrenztem Raum leicht und flott auch komplexe Baumstrukturen darstellen kann.

Nach diesem kleinen theoretischen Exkurs, der zeigt, dass hinter einfach zu bedienenden Tools im wahrsten Sinne des Wortes komplexe Mathematik stecken kann, kommen wir zur angekündigten Untersuchung, ob es Anwendungen außerhalb der Baumstruktur geben kann. Naheliegend ist es, beliebige zusammenhängende Graphen zu untersuchen.

Als Untersuchungsobjekt haben wir den U-Bahn-Plan von München ausgewählt, der schematisch folgendermaßen dargestellt werden kann:

Schematische Darstellung des U-Bahn-Planes von München

Wir wollen schauen, wie weit wir mit dem bereits implementierten Hyperbrowser-Algorithmus aus DeltaMaster kommen. Ziel ist es, die Verbindungen zwischen den Stationen zu visualisieren. Nun liegt aber ein Graph vor, auf dem sogar Rundfahrten möglich sind. Wie gelangen wir zu einem Baum, der alle Stationen abdeckt?

Dazu gehen wir folgendermaßen vor: Zunächst wählen wir willkürlich eine der zentral gelegenen Stationen als Wurzel. Wir entscheiden uns für das Sendlinger Tor und schauen zunächst, welche Stationen von hier aus erreichbar sind. Ungefähr den Himmelsrichtungen entsprechend erreicht man Marienplatz (Nord), Fraunhoferstraße (Ost), Goetheplatz (Süd) und Hauptbahnhof (West). Diese vier Richtungen entsprechen den sonst in DeltaMaster üblichen Dimensionen.

Umgebung des Sendlinger Tors

Nun arbeiten wir uns schrittweise vor: Im nächsten Schritt erreichen wir die roten Stationen – vom Marienplatz aus nur den Odeonsplatz und vom Hauptbahnhof aus vier Stationen, unter anderem den Karlsplatz. In der folgenden Iteration zu den grünen Stationen wird es spannend: Die Verbindung vom Karlsplatz zum Odeonsplatz wird für die Konstruktion ignoriert, da ansonsten ein für einen Baum verbotener Kreis entstünde, aber wir behalten im Hinterkopf, dass es diese Verbindung gibt.

Von einem Knoten aus erreichbare Stationen werden diesem untergeordnet; bereits von anderen Stellen erreichte Knoten werden ignoriert. Falls eine Station gleichzeitig von 2 oder mehr Stationen erreicht werden kann, entscheiden wir uns willkürlich für eine der möglichen Zuordnungen. Wir arbeiten uns durch den Fahrplan, bis wir nach der 15. Iteration den Bahnhof ganz im Norden (Garching-Forschungszentrum) erreicht haben.

Wie sieht das Ergebnis in DeltaMaster aus? Die räumliche Anordnung wird nur qualitativ berücksichtigt. Entfernungen spielen keine Rolle, aber die Unterscheidung von rechts und links kann berücksichtigt werden. In der folgenden Abbildung sind die gemerkten Kanten, die nicht Teil des Baumes waren, gepunktet in Orange dargestellt. Außer der bereits erwähnten Kante Karlsplatz/Odeonsplatz gibt es unter anderem noch das auffällige Paar Scheidplatz/Bonner Platz. Während der Scheidplatz über den Hauptbahnhof in 6 Schritten erreichbar ist, gelangt man zum Bonner Platz in ebenfalls 6 Schritten über den Marienplatz. Die Verbindung zwischen den beiden Stationen ist nicht Bestandteil des Baumes.

Startdarstellung

Wie ersichtlich ist, liegen die beiden Stationen Scheidplatz und Bonner Platz ziemlich weit auseinander. Wir ziehen nun einmal den Scheidplatz in den Fokus:

Konzentration auf Scheidplatz

Während die Umgebung des Scheidplatzes gut einsehbar ist, wird die eigentlich benachbarte Station Bonner Platz in einen anderen Teil der Zeichenfläche projiziert. Dies liegt darin, dass sich der Algorithmus darauf konzentriert, die Beziehung zu den Kindern und den Eltern innerhalb eines Zweiges gut wiederzugeben.

Es hilft auch nicht, den Bonner Platz in den Fokus zu bewegen:

Konzentration auf Bonner Platz

Wenn man in der Visualisierung an Dimensionen denkt, möchte man ja nur schnell zu jedem Element navigieren können (diese Bedingung ist erfüllt) und die Beziehung zu den unmittelbaren Nachbarn in der Hierarchie (Geschwister, Kinder, Elternknoten) erfassen. Hier hapert es bei der U-Bahn-Netz-Visualisierung, da es Nachbarschaftsbeziehungen zwischen Knoten gibt, die bei der Konstruktion des Baumes nicht berücksichtigt wurden.

Es gäbe nun einige Erweiterungen, die aber eher als Krücken bezeichnet werden müssen. Beispielsweise wäre es möglich, an den beiden Knoten einer fehlenden Kante Knöpfe zu hinterlegen, bei deren Betätigung eine animierte Fahrt zur jeweils anderen Station stattfinden könnte.

Als Zwischenfazit bleibt zu konstatieren, dass Graphen, die sich nicht als Bäume darstellen lassen, bei einer direkten Verwendung des Hyperbrowser-Algorithmus nur suboptimal wiedergegeben werden können.

Im zweiten Teil dieses Beitrags werden wir versuchen, räumliche Beziehungen beim Layout quantitativ zu berücksichtigen.