Séminaire 8INF952 Visual Analytics – Cours II Dessin de graphes Arbres, graphes Cartes interactives Graphes

Dessin de graphes Un graphe et sa topologie G = (V, E) Calculer une position pour chaque sommet respectant certains critères « esthétiques » Symétrie spatiales des sous-graphes isomorphes Minimisation des croisements d’arêtes Longueur des arêtes similaires En gros: bonne lecture de la « structure » du graphe, respect des distances entre les sommets

Dessin de graphes Bonne lecture de la structure du graphe (?)

Dessin de graphes Bonne lecture de la structure du graphe (?)

Dessin de graphes Bonne lecture de la structure du graphe (?)

Dessin de graphes Bonne lecture de la structure du graphe (?)

Dessin de graphes Bonne lecture de la structure du graphe (?)

Dessin de graphes Bonne lecture de la structure du graphe (?)

Dessin de graphes Bonne lecture de la structure du graphe (?)

Dessin de graphes Bonne lecture de la structure du graphe (?)

Aesthetics (1) What is a nice drawing ? What makes drawings understandable or readable? How can we measure quality? Can we formalize aesthetics ? Tutorial F. Brandenburg

Aesthetics (1 bis) What is a nice drawing ? / What makes drawings understandable or readable? How can we measure quality? / Can we formalize aesthetics ? Chinese proverb ”A picture is worth a thousand words“ R. Feynman (Nobel prize in Physics) ”It’s all visual“ R.A. Earnshaw (a poineer in computer graphics, 1973) ”visualization uses interactive compute graphics to help provide insight on complicated problems, models or systems“. ”Scientific visualization is exploring data and information graphically, gaining understanding and insights into the data“ R. Hamming (1973) "the purpose of computing is insight not numbers"

Aesthetics (2) recognize complex situations faster learn things more easily (sketch of a proof) H. Purchase with students experiments on graph drawings (GD97) chess players recognize patterns recognize graph properties a path between two nodes connectivity Hamilton cycle (on the outer face) interactive graph drawing competition (GD2003 ) Tutorial F. Brandenburg

Aesthetics (3) D.E. Knuth (GD' 1996) ”Graph drawing is the best possible field I can think of: It merges aesthetics, mathematical beauty and wonderful algorithms. It therefore provides a harmonic balance between the left and right brain parts.“ “A good graph drawing algorithm should leave something for the user‘s satisfaction.” No perfect algorithm! R. Tamassia (IEEE SMC 1988, p.62) aesthetics are criteria for graphical aspects of readability

Aesthetic Criteria (1) visual complexity how long does it take to ”see everything“, to get the overview regularity repetitions, fractals symmetry geometric symmetry by rotation, reflection, translation consistence coincidence of the picture and the intended meaning Tutorial F. Brandenburg

Aesthetic Criteria (2) form, size and proportionality common drawing styles e.g. biochemical pathways, organigrams, ER- diagrams, algorithmic efficiency seconds, not hours/years Tutorial F. Brandenburg

Drawing Styles polyline drawings reduce bends, no sharp angles, polish by with Bezier splines straight-line uniform (short) edge length orthogonal drawings minimize bends planar drawings minimize crossings and bends grid embeddings grid coordinates for nodes and bend-points Tutorial F. Brandenburg

Aesthetics Formalized resolution or geometric criteria area (2D) / volume (3D), height, width, aspect ratio edge length (sum, max) grid drawings angular resolution (avoid small angles)

Aesthetics Formalized discrete criteria crossings bends load factor (overlaps of nodes) congestion (parallel edges) edit complexity (insertions, deletions, moves) symmetry center father above the children geometric symmetry (rotation, reflection) graph symmetry, graph isomorphy Tutorial F. Brandenburg

Dessin de graphes Layout Rank Assignment Grid Layout Compaction Augment. (Two Layer) Crossing minimization Subgraph (extraction) EdgeInsertion Hierarchy Layout Hierarchy ranking DFS ranking Median heuristic Barycenter heuristic Split heuristic Greedy switch Greedy insert Cross. Min. Opt. Fast Hierarchy Layout Planar subgraph Tree Layout Sugiyama Layout Spring Layout Tutte Layout Planar Layout Visibility representation Convex Layout FPP Layout Schnyder Layout Ranking Cross. Min. Compute coord. Planar Grid Layout Shortest Path Planarize subgraph Insert edges No crossings Acyclic subgraph Planarization Background of Graph Drawing - an Overview Adapted from Mutzel et al with permission.

Visualisation de structures arborescentes Classifications / Taxonomies Structures et représentations usuelles Structures de données et algorithmes performants

Tree of Life: 10M espèces Pour tenir compte d’attributs sémantiques David Hillis, Science 300:1687 (2003)

Dessin d’arbres Published in Wired Magazine. Source: Lucent Technologies

Dessin d’arbres Dessin le plus « naïf » L’ordonnée d’un sommet correspond à sa profondeur dans l’arbre L’abscisse correspond à son rang parmi les feuilles

Dessin d’arbres Wetherell 1979 Reingold Tilford 1981 Walker 1990 Dessin le plus « classique » L’ordonnée d’un sommet correspond à sa profondeur dans l’arbre Economie d’espace entre sommets cousins éloignés

Dessin d’arbres Walker 1990

Dessin d’arbres Walker 1990

Dessin d’arbres Walker 1990

Dessin d’arbres Walker 1990

Dessin d’arbres Eades 1992 Cercles concentriques: le rayon sur lequel se trouve un sommet correspond à sa profondeur dans l’arbre Meilleure occupation de l’écran (« les coins ») Certains « secteurs » restent inoccupés … Radial view

Radial Tree Drawings

Radial Tree Drawings

Dessin d’arbres Variantes (radial) Sunburst Stasko, Zhang 2000

Dessin d’arbres Variantes (top-down) Icicle plot Kruskal Landwehr 1983

Dessin d’arbres Variantes Nested boxes (Onion graphs) Sindre 1993 H-tree (Eades 1992)

Dessin d’arbres Variantes (oignons) Information Cube. Courtesy of J. Rekimoto, Sony Computer Science Laboratory, Japan

Dessin d’arbres Balloon / Bubble layout Kazman 1995 Melançon Herman 1998

Dessin d’arbres Balloon / Bubble layout Grivet, Auber, Domenger, Melançon 2004

Dessin d’arbres RINGS Teoh, Ma 2005

Dessin d’arbres : 3D Cone Trees Ombres, transparence Rotation pour accéder aux éléments Xerox PARC

3DSoftVis, Technical University of Vienna, Nokia (EC project), Courtesy of Claudio Riva. Image courtesy of Dave Snowdon, Nottingham University Image courtesy of M. Hemmje, GMD, Germany Cones Trees

Dessin d’arbres Algorithmes performants à tous points de vue Le nombre d’arêtes est proportionnel au nombre de sommets Il suffit de parcourir les sommets et arêtes un nombre constant de fois (complexité linéaire) – l’algorithme tient compte de la topologie du graphe Les représentations sont « lisibles » (pas de croisement d’arêtes – planarité) La disposition des sommets est facilement « interprétable »

Graphes acycliques Les sommets sont naturellement ordonnés On les dispose « par niveaux » On cherche à minimiser les croisements d’arêtes

Graphes acycliques On les dispose « par niveaux » On cherche à minimiser les croisements d’arêtes La disposition optimale des sommets revient à résoudre un problème d’ordonnacement Trouver un ordre des sommets du niveau k+1 qui minimise le nombre de croisements d’arêtes NP-difficile

Graphes acycliques Introduction de courbes splines pour améliorer la lisibilité des diagrammes

Graphes acycliques Nettement moins performants que le dessin d’arbres Introduction de sommets additionnels le long de certaines arêtes

Dessin ou interaction ? Insatisfiabilité des critères esthétiques Minimisation du nombre de croisements NP- complet … Apport de l’interaction Essentiel dans l’activité d’exploration et de « découverte »

Graphes: représentations matricielles S’appuie sur la matrice d’adjacence « Lisibilité » de la structure du graphe: bon ordonnancement des sommets

Graphes: représentations matricielles Les entrées peuvent encoder des attributs des sommets Passent aux graphes contenant un très grand nombre d’arêtes

Dessin ou interaction ? Cartes arborescentes Meilleure occupation de l’écran Les attributs des feuilles de l’arbre sont mis en avant-plan (par opposition à la topologie du graphe)

TreeMaps - SmartMoney

Cartes arborescentes / TreeMaps « Space filling » Lisibilité des attributs des feuilles Proportion relative des rectangles (aspect ratio) Délimitation des rectangles

Cartes arborescentes / TreeMaps Johnson & Schneiderman 1991

Cartes arborescentes / TreeMaps Comparaison aisée des feuilles Les sommets internes ne sont là que pour incarner la classification L’accent est mis sur les attributs des feuilles à l’aide d’artifices graphiques simples: couleurs, aires des rectangles, … SmartMoney Peets coffee

TreeMaps – Peet’s Coffee

TreeMaps Pebbles Voronoi

TreeMaps : variation Beamtrees : améliorer le rendu par artifice graphique F. Van Ham 2002

BeamTrees

DAGS: combinaison de moyen Extension au cas de graphes acycliques orientés Héritage multiple Lorsque les clusters se chevauchent

DAGS: combinaison de moyen Déploiement du DAG en arbre

DAGS: combinaison de moyen Développement d’interaction adaptées

Arbres de grande taille Le dessin ne suffit pas

Arbres de grande taille Identification de sous-arbres atypiques Le nombre de feuilles suit une loi gaussienne Calcul de paramètres combinatoires et seuillage

Arbres de grande taille Interaction (SpaceTree)

Arbres de grande taille - Hyperbolic geometry Euclidean geometry is used in all Graph Drawing techniques What if we draw in hyperbolic geometry? H3Viewer Potential gain in space: exponential area in Euclidean geometry become linear area in Hyperbolic geometry Hyperbolic layout

Euclidean geometry is built upon a set of axioms One of which asserts: 5th postulate. Given a line and a point outside of this line, there is only one line going through that point and parallel to the original line Hyperbolic layout

Change it: Given a line and a point outside of this line, there is more than one line going through that point and parallel to the original line Hyperbolic geometry What if the 5th postulate was logically independent from other axioms? Hyperbolic layout

A two-dimensional model: the Klein model Points are points in an open disk Lines are (euclidean) line segments in the disk Intersection is the usual (euclidean) intersection A’ B’ B A L M N Lines M and N are parallel to line L Negation of 5th postulate is valid Impact on measures of lengths (distance) and angles Segments AB and A’B’ are congruent Hyperbolic layout

Impact on layout of graphs. An example: benefits when laying out a tree. Courtesy T. Munzer, Stanford University, Hyperbolic layout Xerox Parc

1. Divide the available space into wedges according to the width of subtrees 2. Place successors at fixed distance from their ancestor. Recursively cut their respective wedges, defined using parallel lines to ancestor’s cut. P P QRS Q R S Unveiling the mystery Where are the benefits? Look at a layout algorithm — in Euclidean geometry (first). Hyperbolic layout

Unveiling the mystery Where are the benefits? Now look at the layout algorithm — in hyperbolic geometry. P Q R S Wedges meet at infinity P QRS Hyperbolic layout

Hyperbolic layout as an alternative Computation in hyperbolic geometry and translation to Euclidean model relies on graphics hardware Hyperbolic layout Summary — Hyperbolic Layout