Visualisation d’informationinteractive

Jean-Daniel Fekete & Frédéric Vernier

INRIA Futurs/LRI & LIMSIJean-Daniel.Fekete@inria.fr & Frederic.Vernier@limsi.fr

Visualisation

The eye…

the window of the soul,

is the principal means

by which the central sense

can most completely and

abundantly appreciate

the infinite works of nature.

Leonardo da Vinci (1452 - 1519)

Visualisation : 3 domaines

Visualisationscientifique

Visualisationd’informatio

nCartographie

•Communauté à part entière

•2000 ans d’histoire

•Sous communauté de l’Informatique Graphique

•20 ans d’histoire

•Sous communauté de l’Interaction Homme-Machine

•10 ans d’histoire

Visualisation : 3 disciplines

Informatique

PsychologieDesign

•Algorithmes et structures de données

•Géométrie

•Infographie

•Perception

•Cognition

•Interaction

•Nouvelles représentation

•Communication

Visualisation d’information :Définition

• Utilisation de l’informatique graphique interactive pour représenter visuellement de données abstraites afin d’amplifier la cognition

Définition 2 / Objectifs

• Représentation graphique compacte et interface utilisateur pour : manipuler un grand nombre d’items (102 - 106)

éventuellement extraite d’une base de donnée plus grande• Permettant aux utilisateurs de

faire des découvertes prendre des décisions, ou trouver des explications

• sur des motifs (tendances, groupes, trous, points isolés) des groupes d’items des items individuels

• Fouille de données visuelle Données abstraites, généralement pas de représentation canonique

Centres de recherche principaux

• Xerox PARC3-D cone trees, perspective wall, spiral calendartable lens, hyperbolic trees, document lens,

butterfly• Univ. of Maryland

dynamic queries, range sliders, starfields, treemapszoombars, tight coupling, dynamic pruning, lifelines

• IBM Yorktown, AT&T-Lucent Technologies• Georgia Tech, MIT Media Lab• Univ. of Wisconsin, Minnesota, Calif-Berkeley

Le problème

Web, livres, articlesdonnées scientifiquesprix, liste de personnes,Cours de la bourseInformations

Données

HumainTransfert de données

Vision: 100 MB/sAudition: <100 b/sTélépathieHaptique/tactileOdoratGoût

Comment ?

Propriétés de la vision

• Sens ayant la plus grande bande passante• Rapide, parallèle • Reconnaissance de formes• Pré-attentif• Etend les capacités cognitives et

mémorielles (teste de multiplication)

• On pense visuellement

Super. Utilisons-la !

Utilisons la vision !

Utilisons la vision !

Trouvez le rectangle vert !

Perception préattentive (1)

Perception préattentive (2)

Perception préattentive

• Beaucoup de caractéristiques visuelles peuvent être perçues préattentivement : Orientation de ligne/blob, longueur, épaisseur, taille, courbure,

cardinalité, terminaisons, intersections, inclusion, teinte, clignotement, direction de mouvement, profondeur stéréoscopique, indices 3D, direction de l’éclairement

• Problèmes : Les caractéristiques préattentive interfèrent entre elles

On pensait même que toutes les caractéristiques préattentives étaient incompatibles entre elles

Les caractéristiques sont préattentives dans certaines limites 7 couleurs max (Healey, 96) 2 ou 3 formes Etc.

Perception préattentive (3)

Perception préattentive : théorie

• Notre système visuel de bas niveau (25 millions de cellules) fait de la reconnaissance de motif en parallèle en permanence

• Les caractéristiques préattentives sont reconnues à ce niveau• Les autres nécessitent un parcours séquentiel !• On a parfois besoin de données visuelles non préattentives

Labels/étiquettes sur les données Représentations traditionnelles acceptables par les utilisateurs

novices• Excellents théories psychologiques

Information Visualization: Perception for Design de Colin Ware

• Besoin de conception et réalisation de techniques qui fonctionnent Recours au designer / informaticien

Mouais, quel intérêt ?

La représentation est la clef !

Tufte et l’histoire de la graphique

Histoire

• Visualisation pour décrire (Tufte)• Visualisation pour décider (Bertin)• Visualisation sur écran• Visualisation Interactive

Coupler visualisation, filtrage et sélection

Bertin et laSémiologie graphique

• Utilisation des propriétés rétiniennes (Bertin 67):

Spatial ObjetSupport Position

TailleNiveau de gris

Différen-tiel

Orientation CouleurTextureForme

Visualisation interactive

Plus qu’un transfert

• Permet la perception de phénomènes de plus haut niveau

• Favorise la découverte

Eclairage (Insight)

Modèle fonctionnel de base

Données VisualisationProjection visuelle

Interaction

Modèle complet (Ed. CHI)

Illustration de J. Heer

Interaction

InfoVis ToolkitRéutiliser / généraliser

www.lri.fr/~fekete/InfovisToolkit• Construire des visualisations est

difficile et long

• Composant pour la visualisation de : Tables

Scatter plots, séries temporelles, coordonnées parallèles

Arbres Treemaps, node-link diagrams,

Icicle trees Graphes

Matrices, node-link diagrams

• Plusieurs mécanismes sont génériques et peuvent être réutilisés avec toutes les représentations graphiques Requêtes dynamiques Fisheyes Labels dynamiques

Techniques de visualisation

• Projection + représentation + interaction• Dépend de la structure de données

1D - Linéaires2D - Cartes3D - ScènesMultidimensionnelleTemporelleArbresRéseauxDocumentsAlgorithmes

1D : Séries temporelles

1D : Diagrams en Arcs (Watenberg03) http://www.bewitched.com/

Visualisation d’information : exemples

• Spotfire et les requêtes dynamiques

• Smartmoney et la carte du marché boursier

Famille des techniques

• Orientées points• Orientées lignes• Orientées surfaces• Remplissage de surface

Techniques par remplissage de formes

• Seesoft/SeeSys• Compus• Treemap• DBVis

Techniques d’interaction

• Data sliders• Interfaces zoomables et navigation• Déformation de l’espace et

navigation• Labeling

Domaines de recherche

• Nouvelles techniques de visualisation

• Nouvelles techniques d’agrégation• Nouvelles techniques d’interaction• Le 3D est-il utile à quelque chose ?• Passage à l’échelle• Animation

Co-citations en visualisation(Börner 04)

Retombées industrielles (extraits)

• Principales sociétés faisant des produits de visualisation d’information ILOG (Discovery téléchargeable gratuitement) Spotfire AT&T (GraphViz) IBM (DX explorer)

• Sociétés utilisant journellement la visualisation d’information NASA EOSDIS (portail accès aux données capteurs sur la Terre) 3M (analyse de composants chimiques) SmartMoney (http://www.smartmoney.com/marketmap/) ChevronTexaco (analyse de production pétrolière)

Bibliographie• Readings in Information Visualization, Card, Mackinlay,

Shneiderman, Morgan Kaufmann, 1999• Information Visualization: Perception for Design, Colin Ware,

Morgan Kaufmann, 2000 (2e édition prévue pour 2004)• Sémiologie Graphique, Bertin, 1967, Réimpression EHESS 2000• The Visual Display of Quantitative Data, Tufte, 1983, Cheshire,

CT: Graphics Press.• otal.umd.edu/Olive• http://www.csc.ncsu.edu/faculty/healey/PP/index.html• Excentric Labeling: Dynamic Neighborhood Labeling for Data

Visualization, Fekete, J.-D., Plaisant, C. Proceedings of the Conference on Human factors in Computer Systems (CHI'99), ACM , New York, pp. 512-519.

• Interactive Information Visualization of a Million Items, Fekete, J.-D., Plaisant, C., Proceedings of IEEE Symposium on Information Visualization 2002 (InfoVis 2002), Boston, USA, Octobre 2002.

• The Infovis Toolkit. http://www.lri.fr/~fekete/InfovisToolkit