CiAgICA8IS0tIExpbmtlZEluIC0tPgogICAgPHNjcmlwdCB0eXBlPSJ0ZXh0L2phdmFzY3JpcHQiPgogICAgICAgIF9saW5rZWRpbl9wYXJ0bmVyX2lkID0gIjEyMzUwNzMiOwogICAgICAgIHdpbmRvdy5fbGlua2VkaW5fZGF0YV9wYXJ0bmVyX2lkcyA9IHdpbmRvdy5fbGlua2VkaW5fZGF0YV9wYXJ0bmVyX2lkcyB8fCBbXTsKICAgICAgICB3aW5kb3cuX2xpbmtlZGluX2RhdGFfcGFydG5lcl9pZHMucHVzaChfbGlua2VkaW5fcGFydG5lcl9pZCk7CiAgICA8L3NjcmlwdD48c2NyaXB0IHR5cGU9InRleHQvamF2YXNjcmlwdCI+CiAgICAgICAgKGZ1bmN0aW9uKCl7dmFyIHMgPSBkb2N1bWVudC5nZXRFbGVtZW50c0J5VGFnTmFtZSgic2NyaXB0IilbMF07CiAgICAgICAgICAgIHZhciBiID0gZG9jdW1lbnQuY3JlYXRlRWxlbWVudCgic2NyaXB0Iik7CiAgICAgICAgICAgIGIudHlwZSA9ICJ0ZXh0L2phdmFzY3JpcHQiO2IuYXN5bmMgPSB0cnVlOwogICAgICAgICAgICBiLnNyYyA9ICJodHRwczovL3NuYXAubGljZG4uY29tL2xpLmxtcy1hbmFseXRpY3MvaW5zaWdodC5taW4uanMiOwogICAgICAgICAgICBzLnBhcmVudE5vZGUuaW5zZXJ0QmVmb3JlKGIsIHMpO30pKCk7CiAgICA8L3NjcmlwdD4KICAgIDxub3NjcmlwdD4KICAgICAgICA8aW1nIGhlaWdodD0iMSIgd2lkdGg9IjEiIHN0eWxlPSJkaXNwbGF5Om5vbmU7IiBhbHQ9IiIgc3JjPSJodHRwczovL3B4LmFkcy5saW5rZWRpbi5jb20vY29sbGVjdC8/cGlkPTEyMzUwNzMmZm10PWdpZiIgLz4KICAgIDwvbm9zY3JpcHQ+CiAgICA8IS0tIEVuZCBMaW5rZWRJbiAtLT4KICAgIA==
Generic filters
Exact matches only
Search in title
Search in excerpt
Search in content

Visualisierung: Raum in der kleinsten Hütte (II)


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.

In Teil I dieses Beitrags hatten wir untersucht, ob sich die beim Browsen verwendete Hyperbrowser-Technik direkt auf die Visualierung von allgemeinen Graphen anwenden lässt. Im Prinzip war dies möglich, aber es gab einige Schwächen, da z. B. nicht jede vorhandene Kante beim Layout der Lage der Knotenpunkte berücksichtigt werden konnte.

Wir verwenden weiterhin den U-Bahn-Plan von München als Vertreter eines darzustellenden Graphen.

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

Der bisherige Ansatz litt auch unter der Tatsache, dass nur die Erreichbarkeit einer Station von einer anderen in den Algorithmus einging, aber nicht unbedingt die tatsächlichen Entfernungen und die genaue Lage der Stationen. In der Tat hätte jede stetige Deformation des U-Bahn-Netzplans zur gleichen Darstellung im Hyperbrowser geführt.

Deshalb versuchen wir nun, beim initialen Layout die tatsächlichen Koordinaten der U-Bahn-Stationen aus dem Netzplan zu verwenden. In unserem neuen Ansatz gehen wir von einer beliebig großen Karte aus (beispielsweise wie die oben dargestellte), die so transformiert werden muss, dass sie innerhalb der Poincaré-Kreisscheibe landet. Wir möchten weiterhin erreichen, dass Kartenteile, die in das Zentrum gezogen werden, immer den gleichen Maßstab erhalten.

Es gibt beim verwendeten Ansatz einen frei zu bestimmenden Parameter. Dieser beschreibt den Zoomfaktor in der Mitte der Kreisscheibe und steuert das Verhältnis von Detail zu Übersicht.

Die folgende Abbildung zeigt drei verschiedene Zoomfaktoren und ihren Einfluss auf die Lage der dargestellten U-Bahn-Stationen in der Startansicht (bitte klicken Sie auf die Grafik für eine vergrößerte Darstellung!):

Einfluss des Zoomfaktors auf die Startansicht
Einfluss des Zoomfaktors auf die Startansicht

In der ersten Stufe hat man den Überblick über den kompletten Plan und die Verformung gegenüber der Ausgangskarte ist gering. Je höher der Zoomfaktor in der Kreisscheibenmitte, umso einfacher ist es, dort lokal Informationen wie z. B. die Stationsnamen unterzubringen. Die Schriftgröße verändert sich hier dynamisch mit dem Abstand zum Fokus:

Darstellung mit Stationsnamen

Darstellung mit Stationsnamen

Natürlich wäre es auch denkbar, den Zoomfaktor variabel zu halten.

Der folgende Film simuliert eine Fahrt von der Münchner Freiheit zum Ostbahnhof. Links ist die zentrierte Startansicht zu sehen, in der sich die U-Bahn bewegt, rechts das mögliche Aussehen im Hyperbrowser. Für das Video wurde der mittlere Zoomfaktor verwendet.

YouTube

Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren

Video laden

PHA+PGlmcmFtZSBzcmM9Imh0dHBzOi8vd3d3LnlvdXR1YmUtbm9jb29raWUuY29tL2VtYmVkLzBHUjc2UU9BNTdFIiB3aWR0aD0iNTYwIiBoZWlnaHQ9IjMxNSIgZnJhbWVib3JkZXI9IjAiIGFsbG93ZnVsbHNjcmVlbj0iYWxsb3dmdWxsc2NyZWVuIj48L2lmcmFtZT48L3A+

Hier zum Abschluss noch ein zweites Video, das eine Fahrt im Südwesten zeigt:

YouTube

Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren

Video laden

PHA+PGlmcmFtZSBzcmM9Imh0dHBzOi8vd3d3LnlvdXR1YmUtbm9jb29raWUuY29tL2VtYmVkL0l3ZjdiLXFyWmRZIiB3aWR0aD0iNTYwIiBoZWlnaHQ9IjMxNSIgZnJhbWVib3JkZXI9IjAiIGFsbG93ZnVsbHNjcmVlbj0iYWxsb3dmdWxsc2NyZWVuIj48L2lmcmFtZT48L3A+

Das sieht doch schon ganz passabel aus und kann Ausgangspunkt für weitere Optimierungen sein. Wenn der gewünschte zentrale Ausschnitt in einem gesunden Verhältnis zur Gesamtansicht steht, sollte es möglich sein, Detail und Gefühl für das Ganze gleichzeitig berücksichtigen zu können.