sign in sign up
<<
Home , Prefuse

Required Readings Further Reading Toolkits

Prefuse: A Toolkit for Interactive Information . Jeffrey Readings in Information Visualization: Using Vision To Think, imperative: how Heer, Stuart K. Card, James Landay. Proc ACM CHI, 421-430, Chapter 1. Stuart K. Card, Jock Mackinlay, and . low-level rendering: Processing, OpenGL 2005. Morgan Kaufmann, 1999. parameterized visual objects: prefuse Lecture 12: Toolkits also flare: prefuse for Flash A Taxonomy of Visualization Techniques using the Data State Information Visualization Protovis: A Graphical Toolkit for Visualization. Michael Bostock Reference Model. Ed H. Chi. Proc. InfoVis 2000. declarative: what and Jeffrey Heer. IEEE Trans. Visualization & CPSC 533C, Fall 2011 Protovis, D3, ggplot2 (Proc. InfoVis), 2009. Wrangler: Interactive Visual Specification of Data Transformation separation of specification from execution Scripts. Sean Kandel, Andreas Paepcke, Joseph Hellerstein, Jeffrey D3: Data-Driven Documents. Michael Bostock, Vadim Ogievetsky, Heer. Proc. CHI 2011. considerations Jeffrey Heer. IEEE Trans. Visualization & Computer Graphics UBC Computer Science expressiveness (Proc. InfoVis), 2011. can I build it? Wed, 19 October 2011 efficiency how long will it take? accessibility do I know how?

1 / 24 2 / 24 3 / 24 4 / 24 OpenGL Processing prefuse Prefuse

graphics library layer on top of /OpenGL infovis toolkit, in Java separation: abstract data, visual form, view pros visualization esp. for artists/designers fine-grained building blocks for tailored visualizations data: tables, networks (nodes, edges) power and flexibility, complete control for graphics pros pros visual form: layout, color, size, ... hardware acceleration great sandbox for rapid prototyping heavily used many language bindings: C, C++, Java (w/ JOGL) view: multiple renderers cons huge user community, great documentation very powerful abstractions big learning curve if you don’t know already cons quickly implement most techniques covered so far! no vis support, must roll your own everything poor widget library support cons

V AL U E V AL U E example app: TreeJuxtaposer example app: MizBee S T AG E no longer under active development Stage Description O P E R AT O R chrI chrI chrUn nontrivial learning curve chrI chr10 chrII Value The raw data. D A T A 7,522,019 10,194,592 TRANSFORMATION chr20chr21 chr19 chrI chrIII Analytical Data about data, or information, a.k.a. chrXXI chr18 example app: DOITrees Revisited chr17 chr1 Abstraction meta-data. chrXX chrIV chr16 ANALYTICAL ANALYTICAL 10Mb chrXVIII S T AG E Visualization Information that is visualizable on the chr15 ABSTRACTION chr2 chrIX O P E R AT OR chr14 Abstraction screen using a visualization chrXVII chr3 chrV chr13 chrXVI 7,552,761 10,162,878 technique. chr4 chrVI VISUALIZATION out in chr12 invert chrXV TRANSFORMATION chr5

View The end-product of the visualization chr11 chr6 chrVII

chrXIX chr10 chr7 mapping, where the user sees and chr9 chr8 chrXIV chrVIII orientation: VISUALIZATIONmatch line chrX inversion saturation VISUALIZATIONchrXIII go to: interprets the picture presented to her. - + chrXII chrXI S T AG E [Fig 2. Heer, Card, and Landay. Prefuse: A Toolkit for Interactive Information ABSTRACTION 1: Data Stages in the Data State Model O P E R AT OR [Fig 5. Munzner et al. TreeJuxtaposer: Scalable Tree Comparison using [Fig 3. Heer, Card, and Landay. Prefuse: A Toolkit for Interactive Information Visualization. Proc. CHI 2005, 421-430] Processing Step Description [Fig 1. Meyer et al. MizBee: AVISUAL Multiscale MAPPING Synteny Browser. Proc. InfoVis 2009.] Focus+Context with Guaranteed Visibility. Proc SIGGRAPH 2003, pp 453-462.] 5 / 24 TRANSFORMATION 6 / 24 7 / 24 8 / 24 Data Generates some form of analytical Visualization. Proc. CHI 2005, 421-430] Transformation abstraction from the value (usually VIEW STAGE by extraction). V IE W O P E R AT O R InfoVis Reference Model Visualization Takes an analyticalData abstraction and State Model Prefuse Design Implications Prefuse Validation Transformation further reduces it into some form of Figure 1: Information Visualization abstraction, which is State Reference Model visualizable content. Filter V alue w eb page conceptual model underneath prefuse designVisual Mapping Takes information that is in a collection Va lu e separating abstraction, visual form, view wide set of old/new app examples Transformation visualizable format and presents a heavily influenced much of infovis (incl nested model) graphical view. supports linked multiple views expressiveness, effectiveness, scalability c reate D a ta Table 2: Transformation Operators w eb page Transformation supports novel visual encoding design aka infovis pipeline, data state model [Chi99] linkdage qualitative usability for system API Within each Data Stage, there are also operators Analytical actions: operator composition nice methodology! that do not change the underlying data structures. graph Abstraction These are the Within Stage Operators, of which there supports distortion: layout modification vs for specific application are four types, corresponding to the four Data Stages: breadth depth first f irs t Visualization supports animated transitions Within Value, Within Analytical Abstraction, Within trav ers al trav ers al Transformation Visualization Abstraction, and Within View. multiple renderers Figure 2 shows an example of the Data State Model applied to the problem of visualizing the connections hierarc hy Visualization supports semantic zooming Abstraction between a set of Web pages. This example shows that: (1) some operators create new kinds of data sets, Dis k Tree Cone Vis u a l whereas some operators create filtered subsets, which Tree Dis k Tree Ma p p in g many/most common methods well supported is the difference between Transformation and Within Transformation Stage operators, and (2) that the same Visualization visualization abstractions well to infovis concerns Abstractions can be mapped using a variety of Visual nevertheless takes time to wrap head around it Mapping Transformation operators. For example, f oc us Vie w rotate [Redrawn Fig 1.23. Card, Mackinlay, and Shneiderman. ReadingsDisk in InformationTrees or Cone Trees can both be applied to a good choice for local app Visualization: Using Vision To Think, Chapter 1. Morgan Kaufmann,hierarchy 1999.] of interconnected nodes. [Fig 2. Chi. A Taxonomy of Visualization Techniques using the Data State Reference 4. TAXONOMY Figure 2: Data State Model applied to Web sites Model. Proc. InfoVis 2000.] By isolating dependencies,9 / 24 we can more easily Visualization Spreadsheet [Chi97, Chi99] and have 10 / 24 11 / 24 12 / 24 reuse different parts of the pipeline to construct new enabled reuse and rapid development. information visualizations. Therefore, we have taken The following table presents the taxonomy using Declarative Toolkits this model and used it to taxonomizeProtovis various the Data State Model. A row represents a single Protovis Validation D3 visualization techniques. The idea is to analyze the visualization technique or system. The cells in that various techniques, thus increasing our knowledge of row describe the operators that comprises that how each technique can be built using various technique. Non-italic items refer to the operators, imperative: toolkits/libraries discussed sooperators. far In the following, we used this modeldeclarative to while infovis Italic items toolkit, refer toin example Javascript data sets within wide set of old/new app examples declarative infovis toolkit, in Javascript analyze some 36 visualization techniques. say exactly how to do it (alsothat later Data JavaStage. version)The columns are the seven types of expressiveness, effectiveness, scalability Protovis meets Document Object Model / CSS With a clearer understanding of the interactions operators described in Figure 1: within and non- familiar programming model between the data and the operators, implementersmarks withwithin inherited stage operators. properties accessibility pros will be more equipped to construct new interactionspros In certain cases below, cells marked with Å have no declarative: other possibility or new visualizations. In practice, these analysis analysis with cognitive dimensions of notation seamless interoperability with Web runscorresponding in browser Abstractions or Operators at that stage, just say what to do techniques have been applied in a system called the because the data is already in a visualizable format. closeness of mapping, hidden dependencies, explicit transforms of scene with dependency info matches mark/channel mental model Protovis, D3 role-expressiveness, visibility, consistency, cons also much more: interaction, geospatial, trees, ... viscosity, diffuseness, abstraction, even more different from traditional programming model cons hard mental operations not all kinds of operations supported example app: calendar (gallery of many) example app: NapkinVis (2009 course project)

[Fig 1a. Bostock, Oglievestky, and Heer. D3: Data-Driven Documents. Proc InfoVis [Fig 1, 3. Chao. NapkinVis. 2011.] http://www.cs.ubc.ca/ tmm/courses/533-09/projects.html#will] 13 / 24 ∼ 14 / 24 15 / 24 16 / 24 D3 Validation Paper Types ggplot2 Wrangler

wide set of old/new app examples design studies declarative in R interactive data cleaning technique/algorithm implementation of Wilkinson’s Grammar of Graphics inference engine: system suggests applicable transforms software performance evaluation programming by demonstration (vs complex regexps) initialization, frame rates model/taxonomy declarative transformation language underlying ggplot(clustered, aes(x = long, y = lat)) + geom_tile(aes(width = 2.5, height = 2.5, system fill = factor(cluster))) + facet_grid(cluster ~ .) today’s emphasis + map http://vis.stanford.edu/wrangler/ + scale_fill_brewer(palette="Spectral")

qplot(date, value, data = clusterm, group = id, geom = "line", facets = cluster ~ variable, colour = factor(cluster)) + scale_y_continuous("", breaks=NA) + scale_colour_brewer(palette="Spectral") [Slide 17. Wickham. ggplot2: past, present, and future. http://had.co.nz/ggplot2/resources/2007-past-present-future.pdf] 17 / 24 18 / 24 19 / 24 20 / 24 Systems Resource Page: Software Reading For Next Time Reminders

Tableau: general/powerful database vis http://www.cs.ubc.ca/ tmm/courses/533-11/resources.html Mon Oct 31: no class next week! this Friday: presentation topics due Mondrian: statistical graphics next Friday: written project proposals due ggobi: high-dimensional analysis Graph Visualisation in Information Visualisation: a Survey. Ivan next week: no class Herman, Guy Melancon, M. Scott Marshall. IEEE Transactions on load data directly, as opposed to build with toolkit Visualization and Computer Graphics, 6(1), pp. 24-44, 2000 Topological Fisheye Views for Visualizing Large Graphs. Emden Gansner, Yehuda Koren and Stephen North, IEEE TVCG 11(4):457-468 (Proc. InfoVis 2005), 2005. Online Dynamic Graph Drawing. Yaniv Frishman and Ayellet Tal. Proc EuroVis 2007, 75-82.

21 / 24 22 / 24 23 / 24 24 / 24