Techniques d’interaction

G´en´erer un dessin de graphe n’est qu’une premi`ere ´etape pour la mise en place de visualisations `a des fins d’analyse. Les utilisateurs ne veulent pas uniquement disposer d’un dessin statique, ils veulent pouvoir l’explorer et manipuler les donn´ees repr´esent´ees de mani`ere interactive. Des techniques d’interaction ont donc ´et´e ´elabor´ees pour permettre aux utilisateurs de r´esoudre un ensemble de tˆaches relatives `a l’analyse d’un graphe. Ces

(a) (b)

Figure 1.15: Exemple d’application d’une m´ethode de regroupement d’arˆetes (edge bundling) sur un graphe mod´elisant des connexions entre des villes europ´eennes. (a) Dessin original. (b) Dessin apr`es application de la m´ethode.

tˆaches peuvent ˆetre de nature variable comme par exemple celles bas´ees sur la topologie du graphe (voir D´efinition 2.3) ou encore celles bas´ees sur les attributs du graphe. Les tˆaches bas´ees sur la topologie incluent l’identification de l’adjacence d’un sommet ou encore d´eterminer si deux sommets sont connect´es. Les tˆaches bas´ees sur les attributs incluent par exemple la recherche de sommets/arˆetes ayant une valeur particuli`ere. Une taxonomie exhaustive des tˆaches li´ees `a la visualisation de graphes a ´et´e faite par Leeet al. [128], elle mˆeme bas´ee sur celle ´etablie par Amaret al. [5] pour la Visualisation d’Information. Dans la suite, nous pr´esentons quelques unes de ces techniques d’interaction.

1.2.2.1 Interactions pour la navigation

Le but de ces techniques est de faciliter l’exploration de la repr´esentation visuelle d’un graphe. Les plus fondamentales sont celles permettant de translater la vue dans n’importe quelle direction ainsi que de changer le niveau de zoom courant. Ces op´erations basiques mais essentielles pour une exploration interactive des donn´ees repr´esent´ees se retrouvent dans un grand nombre de syst`emes de Visualisation d’Information. Il existe d’ailleurs un algorithme ´elabor´e par Van Wijk et Nuij [184] permettant de r´ealiser une animation de translation/zoom fluide et optimale entre deux r´egions d’un dessin. Dans un contexte de visualisation de graphes il existe aussi une technique de navigation consistant `a se d´eplacer le long du dessin d’une arˆete. Dans [139], Moscovichet al. pr´esentent une version am´elior´ee de cette technique appel´ee Link Sliding.

Une autre m´ethode pour explorer un dessin de graphe est de naviguer de proche en proche. En effet, deux sommets connect´es dans un graphe ne sont pas forc´ement proches

dans son dessin. Ainsi, la distance entre deux sommets dans un graphe n’est pas toujours refl´et´ee par leur distance euclidienne dans son dessin. C’est l’un des d´efis que tous les algorithmes de dessin de graphe tentent de relever. La technique d’interaction Bring & Go, introduite par Tominski et al [179], depuis am´elior´ee par Moscovichet al [139], permet de r´esoudre ce paradoxe. L’op´erationBring, enclench´ee apr`es avoir s´electionn´e un sommet, rapproche temporairement les voisins du sommet de sa position dans la vue. Elle permet ainsi de r´esoudre des situations o`u l’algorithme de dessin a ´echou´e. Les Figure 1.16(a)

et 1.16(b) illustrent cette situation, le passage de l’´etape 1 `a l’´etape 2 se faisant via une animation. Les sommets voisins sont positionn´es de telle sorte que leur direction et leur distance relative par rapport au sommet s´electionn´e est pr´eserv´ee. Une fois que les voisins ont ´et´e repositionn´es autour du sommet d’int´erˆet, l’op´erationGo laisse l’utilisateur d´ecider d’une nouvelle direction vers laquelle se d´eplacer en s´electionnant un voisin. Apr`es avoir choisi un des voisins, une animation de zoom et de translation est effectu´ee jusqu’`a ce que la visualisation soit recentr´ee sur le voisin cible (voir Figure1.2.2.1). Moscovichet al [139] ont r´ealis´e une ´evaluation empirique de cette technique d’interaction. Leurs r´esultats montrent que cette technique est jug´ee facile `a apprendre et plaisante `a utiliser. Cette technique peut ´egalement ˆetre class´ee dans les techniques d’interaction dites Focus+Contexte.

1.2.2.2 Interactions Focus+Contexte

Dans une visualisation de graphe, l’utilisation d’op´erations de zoom pour se concen-trer sur une r´egion d’int´erˆet du dessin se fait au d´etriment de la perte d’informations contextuelles. Un ensemble de techniques permettant `a l’utilisateur de se concentrer sur des d´etails de la repr´esentation tout en conservant le contexte global ont donc ´et´e mis au point. Ce type de techniques est d´enomm´e par le terme Focus+Contexte. Des exemples de ce type de technique sont la loupe et le Fisheye. La loupe permet de pr´esenter une vue d´etaill´ee d’une petite r´egion du dessin par dessus celui li´e au niveau de zoom courant (voir Figure 1.17(a)). Une g´en´eralisation de ce type de techniques a ´et´e faite par Bier et al. [20]. Le Fisheye permet ´egalement d’obtenir des d´etails sur une r´egion du dessin via l’utilisation d’une d´eformation continue de la repr´esentation. Ce concept a ´et´e g´en´eralis´e par Furnas [80] et exp´eriment´e pour la premi`ere fois sur une visualisation de graphe par Sarkar et Brown [159]. La r´ef´erence dans ce domaine reste les travaux de Carpendale et al [36, 37, 38] qui ont longuement ´etudi´es les diff´erentes m´ethodes de d´eformation ainsi que leurs combinaisons pour les interactions de type Focus+Contexte sur tout type de visualisation. Il se pr´esente g´en´eralement sous la forme d’une lentille circulaire. Dans un cercle de petite taille autour du centre de la lentille, le grossissement de la repr´esentation est tr`es important. Ce grossissement d´ecroit ensuite continuellement jusqu’`a la p´eriph´erie de la lentille. Un exemple d’interaction de type Fisheye est pr´esent´e `a la Figure 1.17(b).

(a) (b)

(c)

Figure 1.16: Illustration de l’interaction Bring & Go. (a) Bring (´etape 1) – La s´elec-tion d’un nœud (ici ”Bordeaux”) estompe les ´el´ements du graphe ne faisant pas partie de son voisinage. (b) Bring (´etape 2) – Les sommets voisins sont rapproch´es du nœud s´electionn´e. La transition entre les deux ´etapes est anim´ee. (c) Go – Apr`es avoir s´elec-tionn´e un voisin (ici le sommet ”Glasgow”, mat´erialis´e en vert dans la Figure1.16(b)), une animation de translation et de zoom change le focus vers un nouveau voisinage.

Ces techniques peuvent ˆetre utilis´ees pour obtenir une estimation du degr´e des sommets. Elles permettent ´egalement de se faire une id´ee de l’organisation spatiale des voisinages.

Un autre type de techniques Focus+Contexte sont celles permettant de mettre en ´evidence le voisinage d’un sommet d’int´erˆet. Plusieurs techniques ont ´et´e ´elabor´ees pour cela. Dans [95], Heer et Boyd modifient interactivement les couleurs des sommets du graphe en fonction du sommet s´electionn´e. Les sommets atteignables depuis ce sommet sont color´es en fonction de leur distance au sommet d’int´erˆet en fonction d’une ´echelle de couleur tandis que ceux non atteignables voient leurs couleurs d´esatur´ees. Dans le logiciel de visualisation de graphes Tulip [9, 10, 120], une autre strat´egie est utilis´ee. Un cercle transparent, centr´e sur le sommet d’int´erˆet, est affich´e par dessus la visualisation pour

(a) (b)

Figure 1.17: Techniques d’interaction loupe et Fisheye. (a) La loupe montre une vue d´etaill´ee sur une r´egion locale du dessin. (b) Le Fisheye applique une d´eformation continue sur une petite r´egion du dessin pour inspection locale.

mettre en exergue son voisinage. Les sommets non connect´es au sommet d’int´erˆet sont temporairement estomp´es par le cercle tandis que ceux connect´es (et les arˆetes associ´ees) sont dessin´es par dessus (voir Figure 1.18(a)). Le rayon du cercle transparent est calcul´e de telle sorte que tous les voisins imm´ediats du sommet d’int´erˆet dans le dessin de graphe soient contenus dans le cercle. L’utilisateur peut ensuite choisir de visualiser le voisinage d’un sommet en fonction de diff´erentes distances. La taille du cercle transparent s’ajuste alors en cons´equence (voir Figure 1.18(b)).

(a) (b)

Figure 1.18: Illustration de l’interaction de mise en ´evidence du voisinage impl´emen-t´ee dans le logiciel Tulip [9, 10, 120]. (a) Mise en ´evidence du voisinage direct – la s´election d’un sommet met en exergue ses voisins et estompe les autres ´el´ements du graphe. (b) En utilisant la molette de la souris, le voisinage est ´etendu aux sommets dont la distance est sup´erieure `a 1.

1.2.2.3 Interactions sur la repr´esentation

Ce type de techniques permet un ajustement de la repr´esentation visuelle du graphe et de ses param`etres. La technique la plus basique consiste `a s´electionner un ensemble d’´el´ements et de les mettre en exergue dans la visualisation. Plusieurs strat´egies peuvent ˆetre employ´ees comme utiliser une couleur particuli`ere pour les ´el´ements s´electionn´es ou encore l’utilisation d’enveloppes convexes ou concaves [95, 43]. La Figure 1.19 pr´esente deux techniques classiques de s´election d’´el´ements dans une visualisation de graphe.

(a) (b)

Figure 1.19: Deux techniques d’interaction pour s´electionner des ´el´ements dans la visualisation d’un graphe. Deux strat´egies de s´election sont possibles. Soit tous les ´el´ements situ´es dans la zone de s´election sont s´electionn´es, soit uniquement les sous-graphes induits par les sommets s´electionn´es. Les ´el´ements s´electionn´es seront ensuite mis en exergue dans la visualisation par un changement d’encodage visuel. (a) S´elec-tion par boite : les ´el´ements situ´es sous le rectangle seront s´elecS´elec-tionn´es. (b) S´elecS´elec-tion par lasso : cette technique permet d’effectuer des s´elections plus fines, pouvant ˆetre impossibles `a effectuer via une s´election par boite.

Un autre type de m´ethode sont celles effectuant du zoom s´emantique. Elles consistent `

a augmenter le niveau de d´etail de la repr´esentation des donn´ees (en plus de celui de l’encodage visuel) lors d’une op´eration de zoom. Elles sont g´en´eralement utilis´ees sur des graphes o`u des ensembles d’´el´ements ont ´et´e agr´eg´es selon plusieurs niveaux. L’op´eration de zoom s´emantique dans ce cas consiste `a repr´esenter le niveau d’agr´egation associ´e au niveau de zoom demand´e. Un exemple de technique est celle utilis´ee par Elmqvistet al. [65] afin de visualiser une repr´esentation matricielle d’un tr`es grand graphe. Les cases de la matrice sont agr´eg´ees en groupe de quatre selon plusieurs niveaux. Un zoom s´emantique

permet alors de descendre/remonter dans ces diff´erents niveaux d’agr´egation.

Il existe ´egalement des techniques permettant de modifier le dessin d’un graphe o`u son type de repr´esentation interactivement. Dans [135], McGuffin et Jurisica pr´esentent un ensemble d’outils de s´election et de manipulation de sous-graphes. Leur technique d’interaction permet entre autre d’appliquer un algorithme de dessin sur un sous-graphe s´electionn´e de mani`ere interactive. Un autre exemple est la technique de Henry et al. [96] permettant de passer d’une repr´esentation de type nœud-lien vers une repr´esentation ma-tricielle d’un graphe et vice-versa. Ce changement de repr´esentation est visualis´e `a l’aide d’une animation.

1.2.2.4 Interactions avec les donn´ees

Dans ce type de techniques, l’utilisateur modifie interactivement les donn´ees couram-ment visualis´ees. Dans un contexte de visualisation de graphes, cela consiste `a modifier la structure du graphe ou la valeur des attributs de ces ´el´ements. Ces modifications de donn´ees peuvent ˆetre r´ealis´ees via des interactions sur la repr´esentation (e.g. suppression d’un sommet en cliquant dessus), des interfaces graphiques d’´edition d´edi´ees ou une ex´e-cution de scripts. Les logiciels GUESS [2] et Tulip [9, 10, 120] fournissent par exemple une interface d’´edition et d’ex´ecution de scripts pour modifier interactivement les graphes visualis´es.

Un autre type de techniques influant sur les donn´ees du graphe `a visualiser sont celles permettant de modifier de mani`ere interactive une d´ecomposition hi´erarchique d’un graphe. Une telle d´ecomposition permet de visualiser une version simplifi´ee d’un grand graphe par des m´ethodes d’agr´egation. Un exemple de ce type de technique peut ˆetre trouv´e dans le syst`eme de visualisation de hi´erarchie de sous-graphes GrouseFlocks [8]. Ce syst`eme permet de modifier interactivement la hi´erarchie de sous-graphes soit en in-teragissant directement sur la visualisation soit via une interface graphique d´edi´ee.