Graph Visualisierung und Navigation. PG478 Open Graph Drawing Framework Martin Gronemann

Transkript

1 Graph Visualisierung und Navigation PG478 Open Graph Drawing Framework Martin Gronemann

2 Übersicht 1. Anwendungsgebiete 2. Layouttechniken 3. Klassische Werkzeuge der Navigation Zoom & Pan Joint pan-zoom Problem 4. Kontext-erhaltende Werkzeuge Fisheye Distortion Layout basierende Techniken

3 Anwendungsgebiete Beispiele Bioinformatik Soziale Netzwerke Wirtschaft Computernetzwerke

4 Bioinformatik Visualisierung in der Genforschung Knoten: Gruppen von Genen Kanten: Proteine der Genegruppen : hängen funktional zusammen

5 Soziale Netzwerke Freundschaften an einer High School in den USA nach Hautfarbe Weiß Schwarz Andere

6 Wirtschaft Director Interlocks Kreise: Unternehmen Größe: Anzahl der Angestellten Kante: Manager die in anderen Firmen tätig sind.

7 Netzwerk Visualisierung OPTE Projekt Visualisierung des Internets Kanten nach Kontinenten eingefärbt

8 Verschiedene Layouttechniken 1. Ballon Layout 2. Radial Layout 3. Cone Tree 4. Hyperbolische Darstellung

9 Ballon Layout Knoten liegen auf dem Kreis ihres Elter. Elter ist Kreismittelpunkt Muss nicht symmetrisch sein.

10 Radial Layout Knoten mit Tiefe k liegen auf dem selben Kreis Kreise sind konzentrisch (gleicher Mittelpunkt) 3D Version: Kreise als Kugeln

11 3D Layouts Raumnutzung + Mehr Platz - Navigation komplizierter 2D Algorithmen meist auch in 3D verwendbar (Force-Directed, Radial,...) Nutzung von Virtual Reality

12 Cone Tree Hier: Zusätzlich eine Ebene mit Schatten und Steuerelementen 3D Baumdarstellung: Elter ist Spitze des Kegels Kinder liegen am Rand der Grundfläche Jeder Pfad kann durch Rotierung der Kegel in den Vordergrund gebracht werden

13 Hyperbolisch 3D Mathematischer Hintergrund kompliziert. Algorithmus arbeitet im hyperbolischen Raum Darstellung erfolgt im euklidischen Raum Gibt es auch in 2D

14 Navigation Große Datenmengen: Ein gutes Layout reicht nicht aus Es können nicht alle Details erkannt/dargestellt werden Ansichtsfläche ist begrenzt (Fenster)

15 Klassische Werkzeuge Zoom (Vergrößerung) Es wird ein Ausschnitt des Graphen vergrößert dargestellt. Pan (Verschiebung) Der (vergrößerte) Ausschnitt wird verschoben.

16 Zoom Geometrischer Zoom Ausschnitt des Graphen wird mit einer gegebenen Skalierung nur vergrößert. Semantischer Zoom Die Detailtiefe d.h. der Informationsgehalt der einzelnen Objekte wird zusätzlich erhöht.

17 Beispiel: Webseite Knoten: Webseiten Kanten: verlinkte Seiten

18 Dateinamen nur in der Vergrößerung Bei noch stärkerer Vergrößerung Vorschau möglich Vergrößerung

19 Beispiel: UML Diagramm

20 Space-Scale Ansichtsfenster Jede mögliche Ansicht darstellbar als Punkt Raum kontinuierlich Punkt im Bild = Strahl im Raum Pan: Verschiebung auf der XY Ebene Zoom: Verschiebung entlang der Z-Achse

21 Joint pan-zoom Problem System/Interface muss von Punkt (x 1,y 1,z 1 ) zu Punkt (x 2,y 2,z 1 ) navigieren. Beispiel: Anzeigen eines Suchergebnisses Weg soll möglichst gut (= kurz) sein. Keine triviale Aufgabe!

22 Joint pan-zoom Problem: Kurzer Weg P 1 P 2 Pan Operation Zoom Operation Ansicht

23 Joint pan-zoom Problem: Noch Kürzer P 1 P 2 In Worten: Zoom verringern bis beide Punkte in der Ansicht Zoom erhöhen

24 Fokus+Kontext Ziel: Benutzer ist in der Lage eine Fokussierung vorzunehmen (wie bei Zoom&Pan) Bezug zur Umgebung bleibt aber erhalten ( Preserving the mental map ). Als Beispielmethode: Fisheye Distortion

25 Fisheye Distortion Krümmung der normalen Ansicht durch eine Störungsfunktion Störungsfaktor d interaktiv (Bild d=4)

26 Fisheye Distortion Beispiel Radial Layout Kantenschnittpunkt! Fokus Beachte: Alle Kanten nicht gekrümmt! Fisheye View

27 Fisheye View in aisee Software

28 Layoutbasierte Methoden Fisheye Distortion: Graphische Lösung Mit jedem Layout verwendbar Kann zu unerwünschten Effekten führen (Beispiel von vorhin) Alternative: Distortion (Störung) direkt in den Layout Algorithmus einbauen.

29 Beispiel: Ballon Layout Idee: fokussierten Ballon mehr Platz zuteilen. Die anderen Ballons schrumpfen lassen. Fokus

30 Beispiel Hyperbolisches Layout Kein Einbauen nötig Wurde mit dem Fokus+Kontext- Gedanken entwickelt.

31 Walrus Graph Visualization Tool Navigation erfolgt durch Drehung des Balls Ermöglicht auch große Datenmengen darzustellen Mittlerweile Open Source

32 Ende Mein Paper: I. Herman, G. Melancon und M. S. Marshall, Graph Visualization and Navigation in Information Visualization: A Survey