Information Visualization (Shneiderman and Plaisant, Ch. 13)

1. Information Visualization(Shneiderman and Plaisant, Ch. 13) CSCI 6361, etc. http://wps.aw.com/aw_shneider_dtui_14

2. Overview • Introduction • Information visualization is about the interface (hci), and it is more … • Scientific, data, and information – visualization • Shneiderman’s “data type x task taxonomy” • And there are others • Examples of data types – 1,2,3, n-dimensions, trees, networks • Focus + context • Shneiderman’s 7 tasks • Overview, zoom, filter, details-on-demand, relate, history, extract • North’s more detailed account of information visualization

3. Visualization is … • Visualize: • “To form a mental image or vision of …” • “To imagine or remember as if actually seeing …” • Firmly embedded in language, if you see what I mean • (Computer-based) Visualization: • “The use of computer-supported, interactive, visual representations of data to amplify cognition” • Cognition is the acquisition or use of knowledge • Card, Mackinlay Shneiderman ’98 • Scientific Visualization: physical • Information Visualization: abstract

4. Visualization is not New • Cave guys, prehistory, hunting • Directions and maps • Science and graphs • e.g, Boyle: p = vt • … but, computer based visualization is new • … and the systematic delineation of the design space of (especially information) visualization systems is growing nonlinearly

5. Visualization and Insight • “Computing is about insight, not numbers” • Richard Hamming, 1969 • And a lot of people knew that already • Likewise, purpose of visualization is insight, not pictures • “An information visualization is a visual user interface to information with the goal of providing insight.”, (Spence, in North) • Goals of insight • Discovery • Explanation • Decision making

6. “Computing is about insight, not numbers” State % college degree income State % college degree income Numbers – states, %college, income:

7. “Computing is about insight, not numbers” State % college degree income State % college degree income • Insights: • What state has highest income?, What is relation between education and income?, Any outliers?

8. “Computing is about insight, not numbers” • Insights: • What state has highest income?, What is relation between education and income?, Any outliers?

9. A Classic Static Graphics Example • Napolean’s Russian campaign • N soldiers, distance, temperature – from Tufte

10. A Final Example, Challenger Shuttle • Presented to decision makers • To launch or not • Temp in 30’s • “Chart junk” • Finding form of visual representation is important • cf. “Many Eyes”

11. A Final Example • With right visualization, insight (pattern) is obvious • Plot o-ring damage vs. temperature

12. Terminology • Scientific Visualization • Field in computer science that encompasses user interface, data representation and processing algorithms, visual representations, and other sensory presentation such as sound or touch (McCormick, 1987) • Data Visualization • More general than scientific visualization, since it implies treatment of data sources beyond the sciences and engineering, e.g., financial, marketing, numerical data generally • Includes application of statistical methods and other standard data analysis techniques (Rosenblum, 1994) • Information Visualization • Concerned typically with more abstract, often semantic, information, e.g., hypertext documents, WWW, text documents • From Shneiderman: • ~ “use of interactive visual representations of abstract data to amplify cognition” (Ware, 2008; Card et al., 1999) Shroeder et al., 2002

13. Information VisualizationShneiderman: • Sometimes called visual data mining • Uses humans visual bandwidth and human perceptual system to enable users to: • Make discoveries, • Form decisions, or • Propose explanations about patterns, groups of items, or individual items

14. Visual Pathways of Humans • .

15. About Information Visualization • In part IV about “user interface” • How to create visual representations that convey “meaning” about abstract data • Also about the systems that support interactive visual representations • Also about the derivation of techniques that convert abstract elements to a data representation amenable to manipulation • e.g., text to data • In fact IV deals with a wide range of elements • Data, transformation, interaction, cognition, … • Will wrap by looking at North’s (from Card et al.) account

16. Data Type x Task Taxonomy Shneiderman • There are various types of data (to be visualized) • There are various types of tasks that can be performed with those data • So…, for each type of data consider performing each type of task • And there are other “taxonomies”, e.g., Card, Mackinlay, Schneiderman, 1999

17. Another “Taxonomy”From Card et al. Space Physical Data 1D, 2D, 3D Multiple Dimensions, >3 Trees Networks Interaction Dynamic Queries Interactive Analysis Overview + Detail Focus + Context Fisheye Views Bifocal Lens Distorted Views Alternate Geometry • Data Mapping: Text • Text in 1D • Text in 2D • Text in 3D • Text in 3D + Time • Higher-Level Visualization • InfoSphere • Workspaces • Visual Objects

18. 1D Linear Data

19. 1D Linear Data

20. 1D Linear Data

21. 2D Map Data

22. 2D Map Data

23. 3D World Data

24. Temporal Data

25. Temporal Data

26. Tree Data

27. Tree Data

28. Tree/Hierarchical Data • Workspaces • The Information Visualizer: An Information Workspace by G. R. Robertson, S. K. Card, J. M. Mackinlay, 1991 CACM

29. Hyperbolic Tree • Tree layout - decreasing area f(d) center • Interactive systems, e.g., web site

30. 3-d hyperbolic tree using Prefuse

31. Trees, Networks, and Graphs • Connections between /among individual entities • Most generally, a graph is a set edges connected by a set of vertices • G = V(e) • “Most general” data structure • Graph layout and display an area of iv • Trees, as data structure, occur … a lot • E.g., Cone trees

32. Networks • “Most general data structure” • In practice, a way to deal with n-dimensional data • Graphs with distances not necessarily “fit” in a 3-space • E.g., Semnet • Among the first

33. Networks • E.g., network traffic data

34. Networks • E.g., network as hierarchy

35. Network Data

36. N-dimensional Data • “Straightforward” 1, 2, 3 dimensional representations • E.g., time and concrete • Can extend to more challenging n-dimensional representations • Which is at core of visualization challenges • E.g., Feiner et al., “worlds within worlds”

37. N-dimensional Data • Inselberg • “Tease apart” elements of multidimensional description • Show each • data element value (colored lines) • on each variable / data dimension (vertical lines) • Can select set of objects by dragging cursor across • Brushing • “Classic” automobile example at right

38. N-dimensional Data • Multidimensional Detective, Inselberg

39. Multidimensional Data

40. Multidimensional Data

41. Navigation Strategies • Given some overview to provide broad view of information space … • Navigation provides mean to “move about” in space • Enabling examination of some in more detail • Naïve strategy = “detail only” • Lacks mechanism for orientation • Better: • Zoom + Pan • Overview + Detail • Focus + Context

42. Focus+Context: Fisheye Views, 1 • Detail + Overview • Keep focus, while remaining aware of context • Fisheye views • Physical, of course, also .. • A distance function. (based on relevance) • Given a target item (focus) • Less relevant other items are dropped from the display • Classic cover • New Yorker’s idea of the world

43. Focus+Context: Fisheye Views, 2 • Detail + Overview • Keep focus while remaining aware of context • Fisheye views • Physical, of course, also .. • A distance function. (based on relevance) • Given a target item (focus) • Less relevant other items are dropped from the display • Or, are just physically smaller – distortion

44. Distortion Techniques, Generally • Distort space = Transform space • By various transformations • “Built-in” overview and detail, and landmarks • Dynamic zoom • Provides focus + context • Several examples follow • Spatial distortion enables smooth variation

45. Focus + Context, 1 • Fisheye Views • Keep focus while remaining aware of the context • Fisheye views: • A distance function (based on relevance) • Given a target item (focus) • Less relevant other items are dropped from the display. • Demo of Fisheye Menus: • http://www.cs.umd.edu/hcil/fisheyemenu/fisheyemenu-demo.shtml

46. Focus + Context, 2 • Bifocal Lens • Database navigation: An Office Environment for the Professional by R. Spence and M. Apperley

47. Focus + Context, 3 • Distorted Views • The Table Lens: Merging Graphical and Symbolic Representations in an Interactive Focus + Context Visualization for TabularInformation by R. Rao and S. K. Card • A Review and Taxonomy of Distortion Oriented Presentation Techniques by Y. K. Leung and M. D. Apperley

48. Focus + Context, 4 • Distorted Views • Extending Distortion Viewing from 2D to 3D by M. Sheelagh, T. Carpendale, D. J. Cowperthwaite, F. David Fracchia Magnification and displacement:

49. Focus + Context, 5 • Alternate Geometry • The Hyperbolic Browser: A Focus + Context Technique for Visualizing Large Hierarchies by J. Lamping and R. Rao • Demo

50. Shneiderman’s “7 Tasks” • Relate task • relate items or groups within the collection • History task • keep a history of actions to support undo, replay, and progressive refinement • Extract task • allow extraction of sub-collections and of the query parameters • Overview task • overview of entire collection • Zoom task • zoom in on items of interest • Filter task – • filter out uninteresting items • Details-on-demand task • select an item or group to get details