Informationsvisualisierung - Informatik Uni

Informationsvisualisierung
Thema:
Dozent:
Sprechstunde:
Umfang:
Prüfungsfach:
4. Darstellung von Graphen
Dr. Dirk Zeckzer
[email protected]
nach Vereinbarung
2
Modul Fortgeschrittene Computergraphik
Medizininformatik, Angewandte Informatik
4.1 Einleitung
 Zu visualisierende Entitäten besitzen häufig inhärente Relationen
(Beziehungen oder Abhängigkeiten)
 Dann: Graphen eignen sich als Repräsentation
 Knoten stellen Entitäten dar
 Kanten stellen Relationen dar
Informationsvisualisierung
4-2
4.1 Einleitung
 Anwendungen
 Organigramm einer Firma
 Projektmanagement (z. B. Project Evaluation and Review Technique PERT)
 Soziale Netzwerke
 Taxonomie biologischer Arten (bei Abstammung: phylogenetische
Bäume)
 Biochemische Reaktionen, speziell Stoffwechselsysteme oder
Signalwege
 Ähnlichkeiten von Dokumenten
 Semantische Netzwerke und Wissensrepräsentationsdiagramme
 Webseiten und ihre Links
 Szenengraphen in der virtuellen Realität
 Datenstrukturen, insbesondere bei Compilern
 Strukturen objektorientierter Systeme (Klassenhierarchie, Datenfluss)
 Echtzeitsystem (Zustandsdiagramme)
 Schaltkreisentwurf (Very Large System Integration VLSI)
Informationsvisualisierung
4-3
4.2 Definitionen
Graphen
 Ein Graph 𝐺 = (𝑉, 𝐸) besteht aus
 𝑉: endliche Menge von Knoten
 𝐸: endliche Menge von Kanten 𝐸 ⊂ 𝑉 × 𝑉
 Wenn {𝑢, 𝑣 } eine Kante ist, so heißen u und v adjazent (benachbart)
 Nachbarn von 𝑣 ∈ 𝑉 sind alle adjazenten Knoten
 Anzahl der Nachbarn ist der Grad von 𝑣: |𝑣|
 Ein Weg im Graph 𝐺 ist die Folge (𝑣1 , 𝑣2 , … , 𝑣ℎ ) verschiedener Knoten
von 𝐺, so dass ∀ 𝑖 = 1, … , ℎ: {𝑣𝑖 , 𝑣𝑖+1 } ∈ 𝐸
 Ein Weg heißt Zyklus, falls {𝑣ℎ , 𝑣1 } ∈ 𝐸
 Ein Graph ohne Zyklus heißt azyklischer Graph.
Informationsvisualisierung
4-4
4.2 Definitionen
Graphen (Fortsetzung)
 Ein Graph (𝑉 ′ , 𝐸′) mit 𝑉′ ⊆ 𝑉 und 𝐸′ ⊆ 𝐸 ∩ (𝑉′ × 𝑉′) heißt
Teilgraph von G.
 Im Falle 𝐸 ′ = 𝐸 ∩ (𝑉′ × 𝑉′) heißt 𝐺′ der durch 𝑉′ induzierte
Teilgraph von G.
Informationsvisualisierung
4-5
4.2 Definitionen
Datenstrukturen für Graphen
 Adjazenzmatrix 𝑨
 Für 𝐺 = 𝑉, 𝐸 , V = n hat 𝐴 𝑛 × 𝑛 Einträge
 𝐴𝑢𝑣 =
1 {𝑢, 𝑣} ∈ 𝐸
0 {𝑢, 𝑣} ∉ 𝐸
 Die Adjazenzmatrix eines Graphen ist immer
symmetrisch
 Adjazenzliste L
 Für jeden Knoten 𝑣 ∈ 𝑉 erzeuge eine Liste mit allen
Nachbarn 𝑈 = {𝑢|{𝑢, 𝑣} ∈ 𝐸} von 𝑣
 Graph Drawing
 Automatisches Zeichnen von Graphen in 2D und 3D
Informationsvisualisierung
4-6
4.2 Definitionen
Digraphen
 Ein gerichteter Graph oder Digraph 𝐺 = (𝑉, 𝐸) besteht aus
 𝑉: endliche Menge von Knoten
 𝐸: endliche Menge von Kanten 𝐸 ⊂ 𝑉 × 𝑉
 Die gerichtete Kante (𝑢, 𝑣) ∈ 𝐸 ist
 ausgehende Kante für 𝑢
 eingehende Kante für 𝑣


Knoten ohne ausgehende Kanten heißen Senken
Knoten ohne eingehende Kanten heißen Quellen.


Ingrad von 𝑣 : Anzahl eingehender Kanten.
Ausgrad von 𝑣 : Anzahl ausgehender Kanten.
Informationsvisualisierung
4-7
4.2 Definitionen
Digraphen (Fortsetzung)
 Ein gerichteter Weg in G im Graph 𝐺 ist die Folge (𝑣1 , 𝑣2 , … , 𝑣ℎ )
verschiedener Knoten von 𝐺, so dass ∀ 𝑖 = 1, … , ℎ: {𝑣𝑖 , 𝑣𝑖+1 } ∈ 𝐸
 Ein gerichteter Weg heißt Zyklus, falls {𝑣ℎ , 𝑣1 } ∈ 𝐸
 Ein gerichteter azyklischer Graph (DAG, directed acyclic graph)
ist gerichteter Graph ohne Zyklus.
 Zu einem Digraph 𝐺 gibt es immer Graph 𝐺′, der durch „Vergessen
der Orientierung der Kanten“ entsteht.
Informationsvisualisierung
4-8
4.2 Definitionen
Digraphen (Fortsetzung)
 Kante (𝑢, 𝑣) eines Digraphen 𝐺 heißt transitiv, falls es einen Weg von
𝑢 nach 𝑣 gibt, der nicht durch (𝑢, 𝑣) läuft.
 Transitiver Abschluss von 𝑮:
𝐺 = 𝑉, 𝐸 , 𝐸 = 𝐸 ∪ {(𝑢, 𝑣)|∃𝑊𝑒𝑔 𝑣𝑜𝑛 𝑢 𝑛𝑎𝑐ℎ 𝑣 𝑖𝑛 𝐺}
Informationsvisualisierung
4-9
4.2 Definitionen
Digraphen (Fortsetzung)
Auch für Digraphen eignen sich Adjazenzmatrizen und Adjanzenzlisten
als Datenstrukturen. In diesem Fall ist die Adjazenzmatrix 𝐴 nicht
symmetrisch.
Informationsvisualisierung
4-10
4.2 Definitionen
Eine Zeichnung eines Graphen oder Digraphen 𝐺 ist Abbildung Γ
vom Graphen in Ebene:






Sie ordnet jedem Knoten 𝑣 einen Punkt 𝑝𝑣 und jeder Kante eine offene
Jordankurve 𝐽𝑢𝑣 zu, welche die Punkte 𝑝𝑢 und 𝑝𝑣 als Endpunkte hat.
Gerichtete Kanten eines Digraphen werden in der Regel als Pfeile
gezeichnet.
Eine Zeichnung eines Graphen oder Digraphen heißt planar, wenn Kurven
zweier verschiedener Kanten außer den Endpunkten keine gemeinsamen
Punkte haben.
Ein Graph oder Digraph heißt planar, wenn es mindestens eine planare
Zeichnung gibt.
Man beachte, dass nicht alle Graphen planar sind.
Nach der Eulerformel kann ein planarer Graph mit n Knoten höchstens
3n-6 Kanten haben!
Informationsvisualisierung
4-11
4.2 Definitionen
bett,fig1.6
Informationsvisualisierung
4-12
4.2 Definitionen





Eine planare Zeichnung eines Graphen oder Digraphen zerlegt die Ebene in
topologisch verbundene Regionen. Diese werden Facetten genannt.
Die unbegrenzte Facette wird äußere Facette genannt.
Eine planare Zeichnung bestimmt zirkuläre Ordnung der inzidenten Kanten
an jedem Knoten durch Umlauf gegen/im Uhrzeigersinn.
Zwei planare Zeichnungen heißen äquivalent, wenn sie die gleiche
zirkuläre Ordnung an allen Knoten festlegen.
Eine planare Einbettung eines Graphen oder Digraphen 𝐺 ist die
Äquivalenzklasse von planaren Zeichnungen:
•
•

Wird durch Festlegen der zirkulären Ordnungen der inzidenten Kanten an
jedem Knoten festgelegt
Auf der vorherigen Folie liefern a,b,c die gleiche, d dagegen eine andere
Einbettung des Graphen.
Ein eingebetteter Graph / Digraph ist ein Graph / Digraph mit festgelegter
planarer Einbettung.
Informationsvisualisierung
4-13
4.2 Definitionen
Der Dualgraph 𝐺 ∗ zu einer Einbettung eines planaren Graphen 𝐺 besitzt
 einen Knoten für jede Facette der Einbettung und
 eine Kante (𝑓, 𝑔) zwischen zwei Facetten, wenn diese Facetten eine
gemeinsame Kante in der Einbettung haben
Informationsvisualisierung
4-14
4.2 Definitionen



Ein Graph heißt zusammenhängend,
wenn es Weg zwischen beliebigen Knoten
𝑢 ≠ 𝑣, 𝑢, 𝑣 ∈ 𝑉 gibt.
Ein maximaler zusammenhängender
Teilgraph von 𝐺 heißt
Zusammenhangskomponente.
Ein Schnittknoten eines Graphen 𝐺 ist ein
Knoten, dessen Entfernen (einschließlich
der inzidenten Kanten) den Graphen 𝐺 in
mehrere Zusammenhangskomponenten
teilt.
 Ein Graph ohne Schnittknoten heißt
doppelt zusammenhängend.
 Maximale doppelt zusammenhängende
Teilgraphen heißen Blöcke.
Informationsvisualisierung
4-15
4.2 Definitionen


Ein Paar (𝑢, 𝑣) von Knoten eines Graphen heißt trennendes Paar, falls das
Entfernen von 𝑢 und 𝑣 den Graphen teilt .
Ein doppelt zusammenhängender Graph ohne trennendes Paar heißt
dreifach verbunden (dreifach zusammenhängend).
Informationsvisualisierung
4-16
4.2 Definitionen

Satz: Das Skelett (Ecken und Kanten) eines Polyhedrons im Raum ist ein
planarer, dreifach zusammenhängender Graph.

Satz: Ein planarer, dreifach zusammenhängender Graph hat eine eindeutige
Einbettung (bis auf Umdrehung der zirkulären Ordnung an allen Knoten).
Informationsvisualisierung
4-17
4.2 Definitionen
Weitere Graphentypen

Multigraphen. Sowohl bei gerichteten als auch bei ungerichteten Graphen
können mehrfache Kanten zwischen gleichen Knoten und Kanten von
einem Knoten zu sich selbst auftreten.

Hypergraphen. Eine Kante verbindet mehr als zwei Knoten:
Ein Tupel (𝑉, 𝐸) mit einer endlichen Menge von Knoten 𝑉 und einer
endlichen Menge von Hyperkanten 𝐸 ⊆ 𝑃𝑜𝑡(𝑉).
Jede Hyperkante verbindet eine Ausgangsmenge von Knoten mit einer
Eingangsmenge von Knoten.
Hypergraphen können gerichtet und ungerichtet sein.


Informationsvisualisierung
4-18
4.2 Definitionen
Bäume
 Werden auch als Hierarchien bezeichnet.
 Spezielle Beziehungen
 Eltern-Kind Beziehung
 Geschwisterbeziehung
Informationsvisualisierung
4-19
4.2 Definitionen
Bäume





Spezieller Graph mit Einschränkungen
Ein Baum ist ein Graph ohne Zyklen mit einem ausgezeichneten Knoten, der
Wurzel.
Knoten mit Grad 1 heißen Blatt
Alle anderen Knoten heißen innere Knoten
Ungerichtete Bäume
 Ungerichtete Bäume haben keine weiteren Einschränkungen

Gerichtete Bäume
 Gerichtete Bäume müssen zusätzlich schwach zusammenhängend sein,
insbesondere gibt es immer nur maximal einen Weg von einem Knoten 𝑢 zu
einem anderen Knoten 𝑣
 Die Kanten sind immer von der Wurzel zu den Blättern oder von den Blättern zur
Wurzel gerichtet
Informationsvisualisierung
4-20
4.2 Definitionen
Eigenschaften von Graphen, Knoten, Kanten

Graph







Zyklisch, azyklisch
Gerichtet, ungerichtet
Multigraph
Hypergraph
Planar
Baum
Knoten
 Typ
 Zusätzliche Information

Kanten




Gerichtet, ungerichtet
Gewichte
Typ
Zusätzliche Information
Informationsvisualisierung
4-21
4.3 Graph Drawing
Graphenzeichnen (Graph Drawing)
 Eigene Forschungsgemeinschaft
 Sehr großes Gebiet
 Literatur
 Graph drawing conference
 Visualization conferences and journals
 Web:
http://graphdrawing.org
 Graph Visualization Software:
http://www.graphviz.org
Informationsvisualisierung
4-22
4.3 Graph Drawing
Graphenzeichnen (Graph Drawing)
 Literatur:
 Giuseppe Di Battista, Peter Eades, Roberto Tamassia,
Ioannis G. Tollis.
Graph Drawing - Algorithms for the Visualization of
Graphs.
Prentice Hall Engineering, Science & Math. 1999. ISBN
0-13-301615-3
 Handbook of Graph Drawing and Visualization
Roberto Tamassia, ed.
CRC Press 2014.
 Herman, Melancon, Marshall. Graph Visualization and
Navigation in Information Visualization: A Survey. IEEE
TVCG 6(1): 24-43, 2000
Informationsvisualisierung
4-23
4.3 Graph Drawing
 Forschungsgebiete











Graph Layout und Position der Knoten
Skalierbarkeit
Navigation (besonders in großen Graphen)
Fokus & Kontext Methoden
Dynamische Graphen
Heterogene Knoten- und Kanten-Typen
Knoten mit großem Grad
Einbettung zusätzlicher Information
Visualisierung von isomorphen Teilgraphen
Vergleich von Graphen
…
Informationsvisualisierung
4-24
4.3 Graph Drawing
Visuelle Darstellung
 Knoten
 Form
 Farbe
 Größe
 Position
 Bezeichnung
Informationsvisualisierung
4-25
4.3 Graph Drawing
Visuelle Darstellung
 Kanten






Farbe
Größe
Dicke
Richtung
Bezeichner
Form
 Gerade
 Gekrümmt
 Planar
 Orthogonal
Informationsvisualisierung
4-26
4.3 Graph Drawing
Konventionen

Es gibt verschiedene Zeichenkonventionen mit entscheidenden Einfluss
auf die Auslegealgorithmen von Graphen. Die gebräuchlichen Konventionen
sind:



Geradlinige Zeichnung. Jede Kante wird als gerade Linie gezeichnet.
Polylinienzeichnung. Jede Kante wird als Polygonzug gezeichnet.
Orthogonale Zeichnung: Jede Kante wird als Polygonzug achsenparalleler
Linien gezeichnet.
Gitterzeichnung. Knoten, Schnittpunkte und Kantenknicke haben
ganzzahlige Koordinaten bzgl. eines festgelegten kartesischen Gitters.
Planare Zeichnung. Kanten schneiden sich höchstens an Knoten.
Aufwärtszeichnung / Abwärtszeichnung. Für azyklische gerichtete
Graphen (DAGs) wird jede Kante als monoton ansteigende / absteigende
Kurve gezeichnet.



Informationsvisualisierung
4-27
4.3 Graph Drawing
Bett, fig 2.1 fig 2.2
Informationsvisualisierung
4-28
4.3 Graph Drawing
Ästhetikkriterien I

Ästhetische Kriterien formulieren Wünsche an die Zeichnung eines Graphen,
die die Zeichnung möglichst gut erfüllen soll
 Oft sind nicht alle Kriterien, manchmal keines zu erreichen;
es wird ein guter Kompromiss gesucht.



Fläche: Graph wird auf möglichst kleiner Fläche gezeichnet. Dabei wird
entweder das Gitterzeichnen oder ein Mindestabstand von Knoten vereinbart.
Kantenschnitte: Minimierung der Anzahl der Schnittpunkte von Kanten
Kantenlänge
 Gesamtkantenlänge: Gesamtkantenlänge wird minimiert. Auch dies ist nur bei
Gitterzeichnen oder Knotenmindestabstand sinnvoll.
 Maximale Kantenlänge. Länge der längsten Kante wird minimiert. Wieder muss
man Gitterzeichnen oder Knotenmindestabstand vereinbaren.
 Gleichförmige Kantenlänge. Varianz der Kantenlängen wird minimiert.
Informationsvisualisierung
4-29
4.3 Graph Drawing
Ästhetikkriterien II

Knicke
 Gesamtanzahl Knicke. Zahl aller Knicke aller Kanten soll minimiert werden. Dies
ist besonders bei orthogonalem Zeichnen sinnvoll.
 Maximale Knickanzahl. Maximum von Knicken einer Kante wird minimiert.
 Gleichmäßige Knickanzahl. Varianz der Knickanzahl wird minimiert.



Winkelauflösung. Kleinster auftretender Winkel zwischen zwei Kanten wird
maximiert.
Seitenverhältnis. Seitenverhältnis des kleinsten umschriebenen Rechtecks
soll nahe 1 sein.
Symmetrie. Symmetrien des Graphen sollen möglichst gut abgebildet
werden.
Aber:
 Ästhetikkriterien widersprechen sich oft.
 Einzelne Kriterien können nicht immer erfüllt werden.
Informationsvisualisierung
4-30
4.3 Graph Drawing
Einschränkungen
 Festlegen von Teilgraphen oder Teilzeichnungen, um bestimmte
Konventionen einzuhalten
 Häufige Beispiele in der Visualisierung




Zentrum. Gegebener Knoten wird im Zentrum der Zeichnung fixiert
Außen. Bestimmter Knoten wird der äußeren Facette benachbart
Cluster. Gegebene Menge von Knoten wird nah beieinander angeordnet
Links-Rechts-Folge. Vorgegebener Weg wird von links nach rechts
gezeichnet (auch vertikal möglich)
 Form. Zeichne gegebenen Teilgraphen mit vorgegebener Form
Informationsvisualisierung
4-31
4.3 Graph Drawing
Topologie-Form-Metrik-Ansatz
Dieser Ansatz zielt vor allem auf orthogonale Gitterzeichnungen und basiert auf
drei Verfeinerungsebenen:
 Topologie. Zwei orthogonale Zeichnungen haben gleiche Topologie, wenn
sie durch
 stetige Deformation ohne Vertauschen von Facetten ineinander überführt
werden können

Form. Zwei orthogonale Zeichnungen haben gleiche Form, wenn sie
 gleiche Topologie haben und
 eine Zeichnung aus der anderen nur durch Längenänderungen der
Liniensegmente hervorgeht.

Metrik. Zwei orthogonale Zeichnungen haben gleiche Metrik, wenn sie
 kongruent sind, also durch
 Verschieben und Drehen ineinander überführt werden können.
Informationsvisualisierung
4-32
4.3 Graph Drawing
Topologie-Form-Metrik-Ansatz/2
Umsetzung erfolgt durch drei entsprechende Schritte, bei denen nacheinander
Topologie, Form und Metrik optimiert werden:
 Planarisierung legt die Einbettung des Graphen, also seine Topologie fest:
 Minimierung der Anzahl der Kantenschnitte:
 Oft wird zunächst ein maximaler planarer Untergraph gesucht und
eingebettet.
 Anschließend werden verbleibende Kanten einzeln eingefügt,
wobei jeweils möglichst wenig Überschneidungen erzeugt werden.
 An Überschneidungen werden Dummy-Knoten eingefügt.
[Jeron, Jard. 3D Layout of Reachability Graphs of Communicating Processes. Graph Drawing '94 Proceedings, 1995, 25-32],
[Jünger, Leipert, Mutzel. Pitfalls of using PQ-trees in automatic graph drawing. Graph Drawing '97 Proceedings, 1997, 193-204]
[Battista, Eades, Tamassia, Tollis. Graph Drawing. Prentice-Hall, 1999]
Informationsvisualisierung
4-33
4.3 Graph Drawing
Topologie-Form-Metrik-Ansatz/3


Orthogonalisierung legt die Form fest:
 Orthogonale Repräsentation des Graphen
 Knoten ohne Koordinaten
 Kanten lediglich Winkellisten, zur Festlegung ihrer Knicke
 Minimierung der Knicke ist in der Regel das Hauptziel
Kompaktifizierung legt endgültige Koordinaten der Kanten und der
Kantenknicke fest:
 In der Regel wird die Fläche des Graphen minimiert.
[Jeron, Jard. 3D Layout of Reachability Graphs of Communicating Processes. Graph Drawing '94 Proceedings, 1995, 25-32],
[Jünger, Leipert, Mutzel. Pitfalls of using PQ-trees in automatic graph drawing. Graph drawing '97 Proceedings, 1997, 193-204]
[Battista, Eades, Tamassia, Tollis, Graph Drawing, Prentice-Hall, 1999]
Informationsvisualisierung
4-34
4.3 Graph Drawing
Bett fig2.6
Informationsvisualisierung
4-35
4.3 Graph Drawing
Sichtbarkeitsansatz
Der Sichtbarkeitsansatz dient dem Auslegen beliebiger Graphen mit Polylinien
 Planarisierung gleicht dem Topologie-Form-Metrik-Ansatz;
Ziel ist Schnittvermeidung
 Der Sichtbarkeitsschritt schafft eine Sichtbarkeitsrepräsentation des
Graphen
 Jedem Knoten wird horizontales und jeder Kante {u,v} vertikales Segment
zugeordnet
 Kantensegment hat Anfang und Ende innerhalb Knotensegmente
 Kantensegmente schneiden einander nicht

Ersetzungsschritt erzeugt endgültige Zeichnung des Graphen
 Ersetzen jedes horizontalen Segments durch Punkt
 Ersetzen jedes vertikalen Segments durch Polylinie
 Mögliche Strategien / Ästhetikkriterien: Knickminimierung, Symmetriebetonung,
gleichmäßige Verteilung der Knoten
Informationsvisualisierung
4-36
4.3 Graph Drawing
Informationsvisualisierung
4-37
4.3 Graph Drawing
Verfeinerungsansatz
Betrachtet Polylinienzeichnungen
 Planarisierung gleicht Topologie-Form-Metrik-Ansatz;
Ziel ist Schnittvermeidung
 Verfeinerung fügt geeignete Anzahl von Kanten (evtl. auch Knoten) in
Einbettung ein, um einen maximalen planaren Graphen zu erzeugen:
 Alle Facetten haben dann drei Kanten - Triangulierung
 Qualität des Zeichnens maximaler Graphen hängt in der Regel vom
Knotengrad ab
 Minimierung des maximalen Knotengrad
 Triangulierungszeichnung erzeugt Zeichnung durch
 Auslegen aller Dreiecke und
 anschließendes Entfernen der Dummy-Kanten und ggf. DummyKnoten
Informationsvisualisierung
4-38
4.3 Graph Drawing
Verfeinerungsansatz/2

Alle Algorithmen nutzen spezielle Triangulierungseigenschaften durch
 überschneidende aufspannende Bäume oder
 kanonische Knotenaufzählungen
(Beim Entfernen der Dummy-Knoten können Knicke und Schnitte
entstehen.)
Informationsvisualisierung
4-39
4.3 Graph Drawing
Informationsvisualisierung
4-40
4.3 Graph Drawing
Kraftbasierter Ansatz
Kraftbasierte Ansätze sind intuitive Methoden für geradlinige Zeichnungen
ungerichteter Graphen.
 Simuliert System von Kräften auf Eingabegraphen und gibt Zeichnung
minimaler Energie aus.
 Zwei Knoten stoßen sich ab
 Eine Kante hält zwei Knoten zusammen („anziehende“ Kraft)
 Oft weitere Kräfte
 Zentrumskraft um Zeichnung im View zu halten
 Energieminimierung: einfache iterative Ansätze zur Lösung
Informationsvisualisierung
4-41
4.3 Graph Drawing
Divide-and-Conquer Ansatz
Beliebtes Informatikprinzip wird auch bei Zeichnungen von Graphen gerne
benutzt
 Zerlegt Graph in Teilgraphen, zeichnet diese und erhält letztlich eine
Zeichnung des gesamten Graphen
 Besonders geeignet für Bäume
Informationsvisualisierung
4-42
4.3 Graph Drawing
Topologischer Ansatz
[Archambault, Munzner, Auber. TopoLayout: Multi-Level Graph Layout by Topological Features.
IEEE Transactions on Visualization and Computer Graphics 13(2):305—317, 2006]

Idee:
1. Zerlege den Graphen in Teilgraphen entsprechend verschiedener
Typen
2. Berechne das Layout basierend auf der Zerlegung
a) Zeichne jeden Teilgraphen mit dem best-möglichen Algorithmus
b) Reduziere Kanten-Schnitte
c) Entferne Überlappungen von Knoten
Informationsvisualisierung
4-43
4.3 Graph Drawing
Topologischer Ansatz
1. Zerlege den Graphen in Teilgraphen entsprechend verschiedener Typen
a) Auswahl der Typen
a)
b)
c)
d)
e)
Bäume
Bi-Connected Components
HDE
Fast vollständig
Cluster
b) Reihenfolge der Erkennung wichtig
Informationsvisualisierung
4-44
4.3 Graph Drawing
Topologischer Ansatz
1. Beispiel
Informationsvisualisierung
4-45
4.3 Graph Drawing
Topologischer Ansatz
2. Berechne das Layout basierend auf der Zerlegung
a. Zeichne jeden Teilgraphen mit dem best-möglichen Algorithmus
b. Reduziere Kanten-Schnitte
Rotieren der Subgraphen
c.
Entferne Überlappungen von Knoten
Informationsvisualisierung
4-46
4.3 Graph Drawing
Topologischer Ansatz
Komplexität


𝑟𝑖 : maximaler Grade eines Knotens im Teilgraphen der Ebene 𝑖
𝑑: Dimension des Raumes bei HDE
Algorithmus
Komplexität
Erkennung
Baum
𝑂(𝑁𝑖 + 𝐸𝑖 )
Biconnected Component
𝑂(𝑁𝑖 + 𝐸𝑖 )
Connnected Component
𝑂(𝑁𝑖 + 𝐸𝑖 )
HDE
𝑂(𝑑 ∙ (𝑁𝑖 + 𝐸𝑖 ))
𝑂(1)
Vollständig
𝑂(𝑟𝑖 ∙ 𝐸𝑖 )
Cluster
Informationsvisualisierung
4-47
4.3 Graph Drawing
Topologischer Ansatz
Komplexität


𝑑: Dimension des Raumes bei HDE
𝐿: Anzahl Ebenen um Drehung zu berechnen
Algorithmus
Komplexität
Initiales Layout
Bubble Tree
𝑂(𝑁𝑖 ∙ log 𝑁𝑖 )
Walker Tree
𝑂(𝑁𝑖 )
Zirkulär (vorgegebene Fläche)
𝑂(𝑁𝑖 )
GEM (vorgegebene Fläche)
𝑂(𝑁𝑖 3 )
HDE (vorgegebene Fläche)
𝑂(𝑑 ∙ (𝑁𝑖 ∙ log 𝑁𝑖 + 𝐸𝑖 ))
Verfeinerung
Kreuzungsminimierung
𝑂(𝐿 ∙ 𝑁𝑖 ∙ 𝐸)
Überlappungsentfernung
𝑂(𝑁𝑖 ∙ log 𝑁𝑖 )
Informationsvisualisierung
4-48
4.3 Graph Drawing
Topologischer Ansatz
Ergebnisse
Informationsvisualisierung
4-49
4.3 Graph Drawing
Hierarchischer Ansatz
Der hierarchische Ansatz eignet sich besonders für das Layout von Bäumen und
gerichteten azyklischen Graphen (DAGs) und verwendet ebenfalls drei Schritte
1. Der Schichtungsschritt verwandelt einen DAG in einen geschichteten
Digraphen, bei dem jedem Knoten eine Schicht 𝐿𝑖 zugeordnet wird, so dass
für alle Kanten (𝑢, 𝑣) gilt: 𝑢 ∈ 𝐿𝑖 ∧ 𝑣 ∈ 𝐿𝑗 ∧ 𝑖 < 𝑗

Nach Einfügen von Dummy-Knoten auf Kanten, die über mehr
als eine Ebene laufen - so dass jede Kante von einer Schicht 𝑖 zur
Schicht 𝑖 + 1 läuft - ist die ein echt geschichteter Digraph.
2. Bei Schnittreduzierung erhält jede Schicht eine Reihenfolge (Ordnung)

Reihenfolge bestimmt Topologie des Layouts.

Dabei wird Anzahl der Kantenschnitte minimiert.
3. Festlegen der x-Koordinaten legt x-Koordinaten der Knoten in den
Ebenen fest

Für endgültige Zeichnung ersetzt man Dummy-Knoten durch Knicke

Knicke können minimiert oder Symmetrien betont werden
Informationsvisualisierung
4-50
4.3 Graph Drawing
Hierarchischer Ansatz/2


Für gerichtete Graphen wird eine minimale Anzahl von Kanten umgedreht,
um einen DAG zu erzeugen.
Diese werden aber in ihrer ursprünglichen Richtung gezeichnet.
Informationsvisualisierung
4-51
4.3 Graph Drawing
Bett fig 2.7
Informationsvisualisierung
4-52
4.3 Graph Drawing
 Klassischer Algorithmus von Sugiyama, 1981
[K. Sugiyama, S. Tagawa, and M. Toda. “Methods for Visual Understanding of Hierarchical
Systems Structures”, IEEE Trans. on Systems, Man, and Cybernetics, 11(2), pp. 109-125, 1981]
 Sugiyama, 1989
[K. Sugiyama, S. Tagawa, and M. Toda, „Methodes for Visual Understanding of Hierarchical
Systems Structures“, IEEE Trans. Systems, Man, and Cybernetics, vol. 11, no. 2, pp. 109-125,
1989]
 Problem der Schnittminimierung zwischen zwei Ebenen ist bereits NPhart
 Heuristiken werden benötigt
Informationsvisualisierung
4-53
4.3 Graph Drawing
 Tutte, 1963
[W. Tutte, „How to Draw a Graph“, Proc. London Math. Soc., vol. 3, no. 13, pp. 743-768, 1963]
 Heuristik legt eine Ordnung der ersten und letzten Ebene fest
 Jeder Knoten soll im Schwerpunkt seiner Nachbarn (im Graphen) liegen
 Die führt zu einem linearen Gleichungssysten
 Vergleich von Heuristiken
[M. Laguna and R. Marti, „Heuristics and Meta-Heuristics for 2-Layer Straight Line Crossing
Minimization“,
URL: http://www-bus.colorado.edu/Faculty/Laguna/, 1999].
Informationsvisualisierung
4-54
4.3 Graph Drawing
Informationsvisualisierung
4-55