Sminaire 8 INF 952 Visual Analytics Cours II

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

Dessin de graphes Un graphe et sa topologie G = (V, E) n Calculer une position pour chaque sommet respectant certains critères « esthétiques » n n n 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 (? ) http: //www. kitware. com/Infovis. Wiki n

Dessin de graphes Bonne lecture de la structure du graphe (? ) http: //visualizationtools. net/ n

Dessin de graphes Bonne lecture de la structure du graphe (? ) http: //bioinf. mpi-inf. mpg. de/ n

Dessin de graphes n Bonne lecture de la structure du graphe (? ) http: //www. dnnforms. com

Dessin de graphes n Bonne lecture de la structure du graphe (? ) http: //tulip. labri. fr

Dessin de graphes Bonne lecture de la structure du graphe (? ) http: //kegg. jp n

n Bonne lecture de la structure du graphe (? ) http: //www. cs. umd. edu/hcil/Infovis. Repository/contest-2004 Dessin de graphes

Dessin de graphes n Bonne lecture de la structure du graphe (? ) http: //www. aaronsw. com/weblog/blogviz

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

Aesthetics (1 bis) n n 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) n n H. Purchase with students experiments on graph drawings (GD 97) chess players recognize patterns recognize graph properties n a path between two nodes connectivity Hamilton cycle (on the outer face) n interactive graph drawing competition (GD 2003) n n Tutorial F. Brandenburg

Aesthetics (3) D. E. Knuth (GD' 1996) n ”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! n R. Tamassia (IEEE SMC 1988, p. 62) n aesthetics are criteria for graphical aspects of readability

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

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

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

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

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

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

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

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

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

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

Walker 1990 Dessin d’arbres

Walker 1990 Dessin d’arbres

Walker 1990 Dessin d’arbres

Dessin d’arbres Walker 1990

Dessin d’arbres n n n 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 … n Eades 1992 Radial view

http: //visualizationtools. net/ Radial Tree Drawings

Radial Tree Drawings http: //meganbesecker. wordpress. com/2008/10/06/mind-mapping/.

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

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

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

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

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

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

Dessin d’arbres n RINGS Teoh, Ma 2005

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

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

Dessin d’arbres n Algorithmes performants à tous points de vue n n 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 n n n Les sommets sont naturellement ordonnés On les dispose « par niveaux » On cherche à minimiser les croisements d’arêtes

Graphes acycliques n n n 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 n n Trouver un ordre des sommets du niveau k+1 qui minimise le nombre de croisements d’arêtes NP-difficile

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

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

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

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

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

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

Tree. Maps - Smart. Money www. peets. com http: //www. smartmoney. com/map-of-the-market/

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

Cartes arborescentes / Tree. Maps Johnson & Schneiderman 1991

Cartes arborescentes / Tree. Maps n Comparaison aisée des feuilles n n 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, … Smart. Money Peets coffee www. smartmoney. com www. peets. com

Tree. Maps – Peet’s Coffee www. peets. com

Tree. Maps n Pebbles n Voronoi

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

Beam. Trees

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

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

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

Arbres de grande taille n Le dessin ne suffit pas

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

Arbres de grande taille n Interaction (Space. Tree) http: //www. cs. umd. edu/hcil/spacetree/

Hyperbolic layout Arbres de grande taille - Hyperbolic geometry Euclidean geometry is used in all Graph Drawing techniques n What if we draw in hyperbolic geometry? n n n H 3 Viewer Potential gain in space: n n 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: 5 th 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 Hyperbolic geometry What if the 5 th postulate was logically independent from other axioms? 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 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 Negation of 5 th postulate is valid Lines M and N are parallel to line L L M A B N Impact on measures of lengths (distance) and angles Segments AB and A’B’ are congruent B’ A’

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

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

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

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