Principes, stratégies, et patrons de conception pour la visualisation
description
Transcript of Principes, stratégies, et patrons de conception pour la visualisation
Principes, stratégies, et patrons de conception pour la visualisation
PrincipeEssayer 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
Combiner le texte et le graphique:les “Backbars”
http://elzr.com/posts/wikipedia-backbars
Combiner le texte et le graphique:les “Backbars”
Combiner le texte et le graphique À retenir!
Lequel est mieux du point de vue de l'hiérarchie des variables graphiques?
Les “datatips” (infobulles)
http://www.adobe.com/devnet/flex/articles/charting/fig_09.gif
Principe
• Montrer le plus d’information possible sans interaction
• Permettre à l’utilisateur de ensuite voir encore plus d’information avec– Le survol du curseur (exemples: surbrilliance,
infobulles ou “datatips”)– Le clic / sélection / “hyperliens”– Les glissements de souris
(exemple: gestes rapides)
Faceted search interfacewith rollover-preview “backbars”
http://ils.unc.edu/relationbrowser/index.php?page=demos
Le “Relation Browser” de Gary Marchionini, Rob Capra, et d'autres
(http://ils.unc.edu/relationbrowser/index.php?page=demos)
Le “Relation Browser” de Gary Marchionini, Rob Capra, et d'autres
(http://ils.unc.edu/relationbrowser/index.php?page=demos)
Principe
• Montrer plusieurs vues des données,et coordonner la surbrilliance, la sélection, et/ou la navigation à travers ces vues
À retenir!
Des vues coordonnées(Multiple, Coordinated Views; Brushing and Linking)
Exemple de surbrilliance et sélection coordonnées dans 4 vues (Lopez-Hernandez, Guilmaine, McGuffin, Barford (2010))
À retenir!
[Barford, Lopez, & McGuffin 2011]
Des vues coordonnées(Multiple, Coordinated Views; Brushing and Linking)
Tiré de l’Appendix 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/
La coordination peut se faire au niveau de …
• Couleurs utilisées• Survol de curseur
(surbrilliance, infobulles)
• Sélections• Navigation
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.
À retenir!
La surbrilliance vs
les 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.
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.
Les requêtes dynamiques(“dynamic queries”)
Dynamic Queries: HomeFinder (Ben Shneiderman, 1993)
Dynamic Queries: FilmFinder(Ben Shneiderman)
Dynamic Queries: TimeSearcher (Hochheiser et Shneiderman 2004)
Principe
• Si possible, montrer d’abord une vue d’ensemble (ou plusieurs vues d’ensemble) de toutes les données
• Permettre ensuite à l’utilisateur de– Filtrer– Zoomer– Faire des recherches ou requêtes– Aller chercher les détails associés avec un élément
donné
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.
Une alternative au Mantra“Search, Show Context, Expand on Demand”(vam Ham et Perer, 2009)
Quelques questions deconception et de recherche,
et des possibilités pour l’avenir
Comment montrerplus d’informations sur l’écran
(techniques de « focus+context ») …
Vue en oeil de poisson ("fisheye")
Image: Keahey et Robertson
H3 (Tamara Munzner, 1998)• On calcule la disposition d’un graphe dans un
espace hyperbolique 3D, ensuite on calcule une projection vers un espace euclidien 3D
• (voir vidéo)
Table Lens (Rao et Card, 1994)
Le zooming et les ZUIs(« Zooming User Interfaces ») …
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 )
L’animation pour montrer des transitions fluides …
Les animations entre les vues:Jeff Heer et George Robertson, 2007
Des techniques d’interaction rapide …
Glissement de souris pour montrer ou cacher des sous-arborescences
(Michael McGuffin et Ravin Balakrishnan, 2005)
Hotbox (McGuffin et Jurisica, 2009)
Question: Quels autres widgets pourraient être développés pour la visualisation ?
Interfaces bimanuelles ou multitactiles
Quelles applications de ces interfaces sont possibles pour la visualisation ?
http://www.3m.com/multitouch/Kurtenbach et al., 1997
Le 3D …
Visualisation en 3D :une arborescence
Est-ce vraiment mieux de visualiser des informations en 3D qu’en 2D ?Le 3D implique souvent une navigation et une interface plus compliquée, et des problèmes d’occlusion. 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.)
http://profs.logti.etsmtl.ca/m
mcguffin/re
search/con
etree/
3D + interaction + animations :Christopher Collins et Sheelagh Carpendale, 2007
3D + interaction + animations :Michael McGuffin et al., 2003
3D + interaction + animations :Michael McGuffin et al., 2003
Des visualisations hybrides …
Elastic Hierarchies: un hybride de diagramme nœud-lien et de Treemaps, pour visualiser des arborescences
(Zhao, McGuffin, et Chignell 2005)
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
Taxonomie des hybrides“Elastic Hierarchies”
NodeTrix: un hybride de diagramme nœud-lien et de matrices, pour visualiser des graphes
(Henry, Fekete, et McGuffin 2007)
Trois façons de dessiner un graphe
NodeTrix
Diagramme noeud-lien (“Node-Link Diagram”)
Matrice d’adjacence (“Adjacency Matrix”)
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 d’animation• Plus de zooming• Une interaction rapide (gestuelle, etc.)• Le 3D, lorsque c’est approprié (exemple: avec des données
multidimensionnelles ayant 3 dimensions spatiales)• Travail collaboratif, en équipes, à distance• Un grand défit actuel: comment visualiser l’incertitude 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 d’un ensemble de données à travers le temps (exemples: graphes, code source, etc.)
Quelques blogues et sites web
• Podcast: @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/
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-part-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/visualization/walrus/ – NetworkX (librairie Python) http://networkx.lanl.gov/ – 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– Tableau (logiciel) http://www.tableausoftware.com– plot.ly (librairie JavaScript) https://plot.ly/ – ggplot2 (librairie R) http://ggplot2.org/ – matplotlib (librairie Python) http://matplotlib.org/ – Google Charts (librairie JavaScript) https://developers.google.com/chart/ – NVD3 (librairie JavaScript) http://nvd3.org/ – XmdvTool (logiciel) http://davis.wpi.edu/~xmdv/ – Spotfire (logiciel) http://www.cs.umd.edu/hcil/spotfire/ – Polaris (logiciel) http://window.stanford.edu/projects/polaris/ – Mondrian (logiciel) http://rosuda.org/Mondrian
Quelques survols visuels de travaux
• http://treevis.net (arbres)• http://dynamicgraphs.fbeck.com (graphes dynamiques)• http://www.setviz.net et http://www.cvast.tuwien.ac.at/~alsallakh/SetViz/literature/www/ (ensembles)• http://www.sci.utah.edu/~shusenl/highDimSurvey/website/ (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)
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.
Une bibliographie de livres et d’articles
http://profs.logti.etsmtl.ca/mmcguffin/bib/vis.txt
Group “meet up” à Montréal
• http://www.meetup.com/vismtl/
Des “tweeteurs” à Montréal sur http://twitter.com
• @chezvoila - entreprise• @datacratic – entreprise• @d3visualization – Christophe Viau• @ffunction (Sébastien Pierre) - entreprise• @infoactive ( https://infoactive.co/ ) - entreprise• @MJMcGuffin - prof• @plotlygraphs - entreprise• @vismtl – groupe de rencontres
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