Principes,%20strat

1
Principes, stratégies, et patrons de conception
pour la visualisation
2
Principe

• Essayer de montrer à la fois
• Les tendences globales, et les outliers,par
  des méthodes graphiques
• Des précisions et des détails numériques,par des
  étiquettes et/ou des infobulles

3
Combiner le texte et le graphiqueles Backbars
http//elzr.com/posts/wikipedia-backbars
4
Combiner le texte et le graphiqueles Backbars
5
Combiner le texte et le graphique
À retenir!
Lequel est mieux du point de vue de l'hiérarchie
des variables graphiques?
6
Les datatips (infobulles)
http//www.adobe.com/devnet/flex/articles/charting
/fig_09.gif
7
Principe

• Montrer le plus dinformation possible sans
  interaction
• Permettre à lutilisateur de ensuite voir encore
  plus dinformation avec
• Le survol du curseur (exemples surbrilliance,
  infobulles ou datatips)
• Le clic / sélection / hyperliens
• Les glissements de souris(exemple gestes
  rapides)

8
Faceted search interfacewith rollover-preview
backbarshttp//ils.unc.edu/relationbrowser/inde
x.php?pagedemos
9
Le Relation Browser de Gary Marchionini, Rob
Capra, et d'autres(http//ils.unc.edu/relationbro
wser/index.php?pagedemos)
10
Le Relation Browser de Gary Marchionini, Rob
Capra, et d'autres(http//ils.unc.edu/relationbro
wser/index.php?pagedemos)
11
Principe
À retenir!

• Montrer plusieurs vues des données,et coordonner
  la surbrilliance, la sélection, et/ou la
  navigation à travers ces vues

12
Des vues coordonnées(Multiple, Coordinated
Views Brushing and Linking)
À retenir!
Exemple de surbrilliance et sélection coordonnées
dans 4 vues (Lopez-Hernandez, Guilmaine,
McGuffin, Barford (2010))
13
Barford, Lopez, McGuffin 2011
14
Des vues coordonnées(Multiple, Coordinated
Views Brushing and Linking)
À retenir!

• La coordination peut se faire au niveau de
• Couleurs utilisées
• Survol de curseur (surbrilliance, infobulles)
• Sélections
• Navigation

Tiré de lAppendix B de la thèse doctorale Chris
North, A User Interface for Coordinating
Visualizations based on Relational Schemata
Snap-Together Visualization, (2000),
http//www.cs.umd.edu/hcil/snap/
Voir aussi les actes de la conférence
International Conference on Coordinated and
Multiple Views (CMV), et en particulier Jonathan
Roberts, State of the Art Coordinated
Multiple Views in Exploratory Visualization, CMV
2007.
15
La surbrilliance vsles lignes de repère("leader
lines")
Griffin, Amy L., and Anthony C. Robinson.
"Comparing Color and Leader Line Highlighting
Strategies in Coordinated View Geovisualizations."
 Visualization and Computer Graphics, IEEE
Transactions on 21.3 (2015) 339-349.
16
Steinberger, M., Waldner, M., Streit, M., Lex,
A., Schmalstieg, D. (2011). Context-preserving
visual links. Visualization and Computer
Graphics, IEEE Transactions on, 17(12), 2249-2258.
17
Les requêtes dynamiques(dynamic queries)
18
Dynamic Queries HomeFinder (Ben Shneiderman,
1993)
19
Dynamic Queries FilmFinder(Ben Shneiderman)
20
Dynamic Queries TimeSearcher (Hochheiser et
Shneiderman 2004)
21
Principe

• Si possible, montrer dabord une vue densemble
  (ou plusieurs vues densemble) de toutes les
  données
• Permettre ensuite à lutilisateur de
• Filtrer
• Zoomer
• Faire des recherches ou requêtes
• Aller chercher les détails associés avec un
  élément donné

22
Le Mantra de Ben Shneiderman
Tiré de Ben Shneiderman (1996), The Eyes Have
It A Task by Data Type Taxonomy for Information
Visualizations, Proceedings of IEEE Symposium on
Visual Languages (VL) 1996, pages 336-343. Voir
aussi Brock Craft et Paul Cairns (2005) Beyond
Guidelines What Can We Learn from the Visual
Information Seeking Mantra?, IV 2005.
23
Une alternative au Mantra
Search, Show Context, Expand on Demand(vam Ham
et Perer, 2009)
24
Quelques questions deconception et de
recherche,et des possibilités pour lavenir
25
Comment montrerplus dinformations sur
lécran(techniques de  focuscontext )
26
Vue en oeil de poisson ("fisheye")
Image Keahey et Robertson
27
H3 (Tamara Munzner, 1998)

• On calcule la disposition dun graphe dans un
  espace hyperbolique 3D, ensuite on calcule une
  projection vers un espace euclidien 3D
• (voir vidéo)

28
Table Lens (Rao et Card, 1994)
29
Le zooming et les ZUIs( Zooming User
Interfaces )
30
Le zooming Seadragon(Vidéo présentation de
Blaise Aguera y Arcas à TED 2007
http//www.ted.com/index.php/talks/blaise_aguera_y
_arcas_demos_photosynth.html )
31
Lanimation pour montrer des transitions fluides
32
Les animations entre les vuesJeff Heer et
George Robertson, 2007
33
Des techniques dinteraction rapide
34
Glissement de souris pour montrer ou cacher des
sous-arborescences(Michael McGuffin et Ravin
Balakrishnan, 2005)
35
Hotbox (McGuffin et Jurisica, 2009)
Question Quels autres widgets pourraient être
développés pour la visualisation ?
36
Interfaces bimanuelles ou multitactiles
http//www.3m.com/multitouch/
Kurtenbach et al., 1997
Quelles applications de ces interfaces sont
possibles pour la visualisation ?
37
Le 3D
38
Visualisation en 3D une arborescence
http//profs.logti.etsmtl.ca/mmcguffin/research/co
netree/
Est-ce vraiment mieux de visualiser des
informations en 3D quen 2D ?Le 3D implique
souvent une navigation et une interface plus
compliquée, et des problèmes docclusion. De
plus, les écrans, souris, et interfaces tactiles
habituelles se prêtent pas tellement au 3D. (Par
contre, avec les données multidimensionnelles qui
ont 3 dimensions spatiales, comme les images
médicales 3D, on a pas vraiment le choix on doit
visualiser en 3D.)
39
3D interaction animations Christopher
Collins et Sheelagh Carpendale, 2007
40
3D interaction animations Michael McGuffin
et al., 2003
41
3D interaction animations Michael McGuffin
et al., 2003
42
Des visualisations hybrides
43
Elastic Hierarchies un hybride de diagramme
nœud-lien et de Treemaps, pour visualiser des
arborescences (Zhao, McGuffin, et Chignell 2005)
44
Elastic Hierarchies un hybride de diagramme
nœud-lien et de Treemaps (Zhao, McGuffin, et
Chignell 2005)
Taxonomie des hybrides possibles
Capture décran du prototype logiciel
45
Taxonomie des hybridesElastic Hierarchies
46
NodeTrix un hybride de diagramme nœud-lien et de
matrices, pour visualiser des graphes(Henry,
Fekete, et McGuffin 2007)
47
Trois façons de dessiner un graphe
Diagramme noeud-lien (Node-Link Diagram)
Matrice dadjacence (Adjacency Matrix)
NodeTrix
48
Tendances futures?

• Des ensembles de données toujours plus grands
  (exemple données bioinformatiques)
• Les utilisateurs vont vouloir regarder leurs
  données via plusieurs moyens différents, parfois
  avec plusieurs vues simultanées et coordonnées
• Plus danimation
• Plus de zooming
• Une interaction rapide (gestuelle, etc.)
• Le 3D, lorsque cest approprié (exemple avec des
  données multidimensionnelles ayant 3 dimensions
  spatiales)
• Travail collaboratif, en équipes, à distance
• Un grand défit actuel comment visualiser
  lincertitude dans les données
• Un autre grand défit comment visualiser des
  différences entre deux ensembles de données qui
  sont semblables, et/ou comment visualiser
  lévolution dun ensemble de données à travers le
  temps (exemples graphes, code source, etc.)

49
Quelques blogues et sites web

• Podcast _at_datastories
• http//infosthetics.com
• http//flowingdata.com
• http//eagereyes.org
• http//www.visualcomplexity.com/vc/blog/
• http//manyeyes.alphaworks.ibm.com/blog/
• http//www.gapminder.org/
• Business Intelligence
• http//www.perceptualedge.com/blog/
• http//timoelliott.com/blog/

50
Quelques librairies et logiciels

• InfoVis Toolkit (librairie Java, 2004/2005)
  http//ivtk.sourceforge.net/
• Prefuse (librairie Java, 2004/2005)
  http//prefuse.org/ et http//vimeo.com/19278481
  et Flare (librairie ActionScript, 2008)
  http//flare.prefuse.org/
• Protovis (librairie JavaScript, 2009)
  http//vis.stanford.edu/protovis/ et
  http//eagereyes.org/tutorials/protovis-primer-par
  t-1
• D3 (librairie JavaScript, 2011) http//d3js.org/
  et http//vimeo.com/29862153
• Many Eyes (site web pour partager des visus de
  données) http//manyeyes.alphaworks.ibm.com/
• Pour visualiser des graphes
• Tulip (logiciel) http//www.tulip-software.org/
• Gephi (logiciel) http//gephi.org/
• WebCoLa / cola.js (librairie JavaScript)
  http//marvl.infotech.monash.edu/webcola/
• Pajek (logiciel) http//pajek.imfm.si/
• Walrus (logiciel) http//www.caida.org/tools/visua
  lization/walrus/
• NetworkX (librairie Python) http//networkx.lanl.g
  ov/
• OGDF (librairie C) http//www.ogdf.net
• Boost Graph Library (BGL) (librairie C)
  http//www.boost.org/doc/libs/release/libs/graph/
  
• Graphviz (logiciels et librairies)
  http//www.graphviz.org/
• JUNG (librairie Java) http//jung.sourceforge.net/
  
• JGraph (librairie Java) http//www.jgraph.com/
• yFiles (librairie Java) http//www.yworks.com
• Pour les données multidimensionnelles

51
Quelques survols visuels de travaux

• http//treevis.net (arbres)
• http//dynamicgraphs.fbeck.com (graphes
  dynamiques)
• http//www.setviz.net et http//www.cvast.tuwien.a
  c.at/alsallakh/SetViz/literature/www/
  (ensembles)
• http//www.sci.utah.edu/shusenl/highDimSurvey/web
  site/ (visualisations à plusieurs dimensions)
• http//multivis.net (multifaceted data)
• http//survey.timeviz.net (temps)
• http//spacetimecubevis.com (cube espace-temps)
• http//financevis.net (finances fait à lÉTS)
• http//bivi.co/visualisations (visualisations
  biologiques)
• http//textvis.lnu.se (texte)
• http//aviz.fr/physvis (visus physiques)
• http//idav.ucdavis.edu/ki/STAR (performances)

52
Quelques livres

• Jacques Bertin (1967), Sémiologie graphique Les
  diagrammes, Les réseaux, Les cartes.
• Jacques Bertin (1977), La graphique et le
  traitement graphique de l'information.
• John Wilder Tukey (1977), Exploratory Data
  Analysis.
• Edward R. Tufte (1983), The Visual Display of
  Quantitative Information.
• Edward R. Tufte (1990), Envisioning Information.
• Edward R. Tufte (1997), Visual Explanations
  Images and Quantities, Evidence and Narrative.
• Di Battista, Giuseppe and Peter Eades and Roberto
  Tamassia and Ioannis G. Tollis (1999), Graph
  Drawing Algorithms for the Visualization of
  Graphs.
• Leland Wilkinson (1999), The Grammar of Graphics.
• Stuart K. Card and Jock D. Mackinlay and Ben
  Shneiderman (1999), Readings in Information
  Visualization Using Vision to Think.
• Colin Ware (2000), Information Visualization
  Perception for Design.
• Robert Spence (2001), Information Visualization.
• Tamara Munzner (2014), Visualization Analysis and
  Design.

53
Une bibliographie de livres et darticles
http//profs.logti.etsmtl.ca/mmcguffin/bib/vis.txt
54
Group meet up à Montréal

• http//www.meetup.com/vismtl/

55
Des tweeteurs à Montréal sur http//twitter.com

• _at_chezvoila - entreprise
• _at_datacratic entreprise
• _at_d3visualization Christophe Viau
• _at_ffunction (Sébastien Pierre) - entreprise
• _at_infoactive ( https//infoactive.co/ ) -
  entreprise
• _at_MJMcGuffin - prof
• _at_plotlygraphs - entreprise
• _at_vismtl groupe de rencontres

56
Quelques entreprises pour lesquelles la
visualisation est un aspect important, ou bien
leur activité principale

• Autodesk (Montréal et ailleurs)
• CAE et PRESAGIS (Montréal et ailleurs)
• ORS http//www.theobjects.com (Montréal)
• Uncharted http//uncharted.software
  (anciennement Oculus Info) (Toronto)
• Inxight (USA) acheté par Business Objects acheté
  par SAP
• ILOG (USA / France) acheté par IBM
• Kitware (USA) http//www.kitware.com
• SpotFire (USA)
• Tableau Software (USA) http//www.tableau.com
• guavus.com
• palantir.com