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

Présentation au sujet: "Séminaire 8INF952 Visual Analytics – Cours II Dessin de graphes Arbres, graphes Cartes interactives Graphes."— Transcription de la présentation:

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

2 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

3 Dessin de graphes Bonne lecture de la structure du graphe (?) http://www.kitware.com/InfovisWiki

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

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

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

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

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

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

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

11 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

12 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"

13 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

14 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

15 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

16 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

17 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

18 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)

19 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

20 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. 1998 with permission.

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

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

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

24 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

25 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

26 Dessin d’arbres Walker 1990

27 Dessin d’arbres Walker 1990

28 Dessin d’arbres Walker 1990

29 Dessin d’arbres Walker 1990

30 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

31 Radial Tree Drawings http://visualizationtools.net/

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

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

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

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

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

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

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

39 Dessin d’arbres RINGS Teoh, Ma 2005

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

41 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

42 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 »

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

44 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

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

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

47 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 »

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

49 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

50 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)

51 TreeMaps - SmartMoney www.peets.com http://www.smartmoney.com/map-of-the-market/

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

53 Cartes arborescentes / TreeMaps Johnson & Schneiderman 1991

54 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 www.smartmoney.com www.peets.com

55 TreeMaps – Peet’s Coffee www.peets.com

56 TreeMaps Pebbles Voronoi

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

58 BeamTrees

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

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

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

62 Arbres de grande taille Le dessin ne suffit pas

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

64 Arbres de grande taille Interaction (SpaceTree) http://www.cs.umd.edu/hcil/spacetree/

65 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

66 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

67 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

68 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

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

70 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

71 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

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