Visualisation d’informationinteractive : Graphes

Jean-Daniel FeketeINRIA Futurs/LRIProjet IN-SITU

Représenter un arbre par un arbre (vanWijk Infovis 2001)

Définition formelle

• Un graphe est défini par• Un ensemble de sommets S={si}

• Un ensemble d’arc ou arêtes A={aj} avec a=(sd,sa) ∈ SxS

• C’est une application de S dans S• On définit des propriétés sur un graphe

qui sont à caractère topologique

Deux représentations classiques pour les Graphes

• Nœuds+Liens• Le nœud représente un

sommet• Le lien représente un

arc

• Matrices d’adjacence• Une ligne est un

sommet de départ• Une colonne est un

sommet d’arrivée• L’intersection visualise

l’existence d’un arc

AC

B D

A B C D

A X X X

B X

C X

D

Utilisation des graphes

• La modélisation de données par graphes est très (trop) flexible:• Le Web, le circuit routier, voies ferrées,

Internet, circuit de voyage, modules logiciels, réseaux sociaux (arbres généalogique), etc.

• Tout peut être modélisé comme un graphe… par toujours bien!

Exemples de tâchesdans les graphes

• Les principales tâches liées à la topologie sont:• Nœuds: degré, source (pas de lien entrant),

collecteur (pas de lien sortant), isolé, voisins (rayon)

• Chemins• Chemins (plus court, tous), cycles

• Sous-Graphes• Composants connexes, etc.

• La liste est sans fin et chaque domaine d’application spécifique ajoute des tâches propres

Attributs dans les graphes

• La structure de graphe ne définit qu’une topologie

• On peut associer des attributs aux sommets ainsi qu’aux arcs• Par exemple un nom, poids, taille, etc.

• On ajoute de nouveaux attributs calculables topologiquement :• Chemin du moindre coût, cycle contraint

• On ajoute des tâches liées aux attributs• Cycle le plus court passant par Paris, Lyon,

Marseille et Bordeaux

Les représentation Nœud-Lien

Chercher l’erreur

Problématiques

• Placement du graphe et des liens• Passage à l’échelle• Navigation

• Attention au plat de spaghettis !

Placement selon attributs

• Le placement n’est pas toujours un problème

• Les attributs peuvent permettre le placement

Styles de liens

• Lignes droites

• Courbes

• Orthogonaux

Contraintes « Esthétiques »

• Minimiser les croisement• Minimiser la longueur des liens• Minimiser les changements de

direction• Maximiser les symétries• … mutuellement contradictoires

Critères complexes

• On veut maximiser la lisibilité et on ne sait pas la définir• Symétrie ?• Forme connue ?

Placement du graphe

• Contraintes « esthétiques »

• Hiérarchisation, clustering• Positionnement par valeur d’attribut

Placement de graphe

• 3 méthodes• Simple, a-priori• Système à base de forces• Analytique

• Plusieurs méthodes complexes

Placement a-priori

• Circulaire• Sur plusieurs cercles

concentriques• Avantages

• Simple et rapide

• Inconvénients• Les liens sont difficiles

à suivre• Pas ou peu de

symétries ou motifs visuels

Système de forces ressort (Eades 84)

• Les liens se comportent comme des ressorts ayant une longueur naturelle

• On ajoute des liens faibles infiniment longs entre les nœuds non connexes (répulsifs)

• On part d’une configuration initiale

• On laisse le système converger vers un minimum local

• On ajoute de la friction pour freiner les oscillations

Système à base de forces

• Améliorations géométriques (Kamada&Kawai 89)

• Système à particules (Fruchterman Reingold 90)

• Recuit simulé (Davidson Harel 89)• Code C++ dans Graphics Gems

Avantages et inconvénients de système à base de forces

• Avantages• Facile à implémenter• Améliorations heuristiques faciles à ajouter• Evolution continue et stable• Extensible à la 3D• Fonctionne bien pour les petits graphes ayant

une structure régulière• Inconvénients

• Lent O(N2)• Pas de résultats théoriques sur la qualité• Difficile à étendre

Placement analytique de graphe

• Plusieurs méthodes compliquées• Nécessite:

• Théorie des graphes• Géométrie informatique (Computational

geometry)

• Domaine de recherche à part entière• Livres et +de 8000 articles

Plusieurs produits

• GraphViz: dot (analytique), neato (système de forces), twopi(a priori)

• Vcg (analytique)• Tulip (beaucoup)• Ilog Graph Components (C++,Java)• DaVinci, Tom Sawyer etc.

• Utilisez-les si vous devez placer des graphes!

Les graphes attribués

Eick, “SeeNet” Kuljit, Anil

Problème d’échelle

• Les diagrammes nœud-lien deviennent illisibles au-delà de 30-100 nœuds

• 3 solutions• Changer de représentation• Echantillonner• Grouper et hiérarchiser (clustering)

Clustering pour les graphes

• Grouper les sommets similaires et les traiter comme un sous-graphe

Clustering pour les graphes

Hiérarchisation après clustering

Echantillonnage et navigation

Echantillonnage et navigation (2)

• Keith Andrews

Matrices d’adjacence

• Un diagramme nœud-lien devient vite confus lorsque sa densité ou sa taille augmentent

• Utilisation de matrices

Nœud-lien vs. matrice

Nœud-lien vs. matrice

Avantages et inconvénients

• Avantages• Placement très rapide• Visibilité de tous les liens• Permet des permutations de sommets

• Inconvénients• Pas intuitif et parfois difficile à lire• Limité à la taille écran (1000x1000)• Nécessite des permutations

Passage à l’échelle

• Clustering• Difficile• Classification

automatique• Analyse factorielle• Analyse

hiérarchique

• Hiérarchisation• Facile

Hiérarchisation(vanHam Infovis 03)

Autres représentations:Liens courbes