Information Visualization (Shneiderman and Plaisant, Ch. 13)

Slides:



Advertisements
Similar presentations
Visualisasi Informasi
Advertisements

Information Retrieval: Human-Computer Interfaces and Information Access Process.
Information Visualization Focus + Context Fengdong Du.
”Confusion and clutter are failures of design, not attributes of information.” - Edward R. Tufte.
The Table Lens: Merging Graphical and Symbolic Representations in an Interactive Focus + Context Visualization for Tabular Information R. Rao and S. K.
Matthias Mayer The Table Lens - Ramana Rao & Stuart K. Card Information Visualization 838b - February 21st 2001 The Table Lens: Merging.
© Anselm SpoerriInfo + Web Tech Course Information Technologies Info + Web Tech Course Anselm Spoerri PhD (MIT) Rutgers University
Information Visualization. Information Visualization (Ch. 1), Stuart K. Card, Jock D. Mackinlay, Ben Shneiderman in Readings in Information Visualization:
CS 5764 Information Visualization Dr. Chris North.
CS 5764 Information Visualization Dr. Chris North GTA: Beth Yost.
______________________________________________________________________________________ SCHOOL OF INTERACTIVE ARTS + TECHNOLOGY [SIAT] |
Table Lens From papers 1 and 2 By Tichomir Tenev, Ramana Rao, and Stuart K. Card.
An Introduction to Software Visualization Dr. Jonathan I. Maletic Software DevelopMent Laboratory Department of Computer Science Kent State University.
Information Visualization Chapter 1 - Continued. Reference Model Visualization: Mapping from data to visual form Raw DataData Tables Visual Structures.
WPI Center for Research in Exploratory Data and Information Analysis From Data to Knowledge: Exploring Industrial, Scientific, and Commercial Databases.
Thinking with Visualizations: sense making loops Colin Ware Data Visualization Research Lab University of New Hampshire.
LÊ QU Ố C HUY ID: QLU OUTLINE  What is data mining ?  Major issues in data mining 2.
CS598CXZ Course Summary ChengXiang Zhai Department of Computer Science University of Illinois, Urbana-Champaign.
Information Visualization for E-content David Modjeska Assistant Professor Faculty of Information Studies University of Toronto Information Highways 2002.
Information Visualization
Computer Visualization: Introduction Spring, 2014 University of Texas – Pan American CSCI 6361, Spring 2014.
Information Design and Visualization
Interacting with Visualizations
Information Visualization and Immersive Interfaces CSCI 6174: Open Problems in CS Fall 2013 Richard Fowler.
Visual User Interfaces David Rashty. “Grasping the whole is a gigantic theme. Arguably, intellectual history’s most important. Ant-vision is humanity’s.
© 2010 Pearson Addison-Wesley. All rights reserved. Addison Wesley is an imprint of Designing the User Interface: Strategies for Effective Human-Computer.
© 2010 Pearson Addison-Wesley. All rights reserved. Addison Wesley is an imprint of Designing the User Interface: Strategies for Effective Human-Computer.
Urgent Interactions Evaluating Usability and Incorporating Information Visualization in Emergency Medicine Interfaces Julia Haines March 8, 2010.
1 Human Computer Interaction Week 12 Information Search & Visualization.
Space/Order Quanzhen Geng (Master of Software Systems Program) January 27, 2003 CS-533C Reading Presentation.
Fall 2002CS/PSY Information Visualization Picture worth 1000 words... Agenda Information Visualization overview  Definition  Principles  Examples.
Chapter 15: Information Search & Visualization Team 3: Jacob Hicks, Victor Chen, Saba Alavi.
Information Visualization (Shneiderman and Plaisant, Ch. 13)
Copyright © 2005, Pearson Education, Inc. Slides from resources for: Designing the User Interface 4th Edition by Ben Shneiderman & Catherine Plaisant Slides.
The Table Lens: Merging Graphical and Symbolic Representations in an Interactive Focus+Context Visualization for Tabular Information Ramana Rao and Stuart.
Do these make any sense?. Navigation Moving the viewpoint as a cost of knowledge.
Graph Visualization and Beyond … Anne Denton, April 4, 2003 Including material from a paper by Ivan Herman, Guy Melançon, and M. Scott Marshall.
Innovative UI Ideas Marti Hearst SIMS 213, UI Design & Development April 20, 1999.
C. Ahlberg & B. Shneiderman (1994)
CS3041 – Final week Today: Searching and Visualization Friday: Software tools –Study guide distributed (in class only) Monday: Social Imps –Study guide.
14. Information Search and Visualization
Information Visualization Chris North cs3724: HCI.
1D & 2D Spaces for Representing Data Mao Lin Huang.
© 2010 Pearson Addison-Wesley. All rights reserved. Addison Wesley is an imprint of Designing the User Interface: Strategies for Effective Human-Computer.
Information Visualization, Human-Computer Interaction, and Cognitive Psychology: Domain Visualizations Kevin W. Boyack Sandia National Laboratories.
INFORMATION VISUALIZATION
Inspired from CS Information Visualization Jan. 10, 2002 John Stasko Frédéric Vernier Enseignant-Chercheur LIMSI-CNRS Maître de conf Paris XI Cours.
Information Visualization Theresa Nguyen 4/10/2001.
Stanford hci group / cs376 research topics in human-computer interaction Information Visualization Scott Klemmer 03 November.
Information Visualization Introduction and Presentation Topics CSCI 6175 Spring 2016.
Framework and Models. Framework To help understand the field To develop a system that will allow us to ▫ Develop good designs ▫ Test ▫ Evaluate We need.
Comp 15 - Usability & Human Factors Unit 12b - Information Visualization This material was developed by Columbia University, funded by the Department of.
Visualization Design Principles cs5984: Information Visualization Chris North.
CSC420 Showing Complex Data.
Datamining : Refers to extracting or mining knowledge from large amounts of data Applications : Market Analysis Fraud Detection Customer Retention Production.
Usability & Human Factors
cs5764: Information Visualization Chris North
Professor John Canny Fall 2001 Nov 29, 2001
Professor John Canny Spring 2003
Visualization of Web Search Results in 3D
Information Visualization 2: Overview and Navigation
Information Visualization Picture worth 1000 words...
CSc4730/6730 Scientific Visualization
Information Design and Visualization
Introduction to Visual Analytics
Information Visualization (Part 1)
Information Understanding
CHAPTER 7: Information Visualization
CHAPTER 14: Information Visualization
Comp 15 - Usability & Human Factors
Presentation transcript:

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

Overview Introduction Shneiderman’s “data type x task taxonomy” 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

Visualization is … Visualize: (Computer-based) Visualization: “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

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

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

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

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

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

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

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”

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

Terminology Scientific Visualization Data 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

Information Visualization Shneiderman: 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

Visual Pathways of Humans .

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

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

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

1D Linear Data

1D Linear Data

1D Linear Data

2D Map Data

2D Map Data

3D World Data

Temporal Data

Temporal Data

Tree Data

Tree Data

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

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

3-d hyperbolic tree using Prefuse

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

Networks “Most general data structure” E.g., Semnet 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

Networks E.g., network traffic data

Networks E.g., network as hierarchy

Network Data

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”

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

N-dimensional Data Multidimensional Detective, Inselberg

Multidimensional Data

Multidimensional Data

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

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

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

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

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

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

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

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:

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

Shneiderman’s “7 Tasks” 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 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

VxInsight Developed by Sandia Labs to visualize databases Licensable Elements of database can be “anything” For IV “abstract” e.g., document relations, company profiles Example screens show ?grant proposals Video of demo at: www.cs.sandia.gov/projects/VxInsight/vx_science.exe Shows interactive capabilities

VxInsight vvv

VxInsight Shneiderman’s IV Interaction paradigm: Overview Zoom Filter Details on demand : Browse Search query Relate History Extract

VxInsight Overview

VxInsight Zoom in

VxInsight to detail

Interaction Dynamic Queries Dynamic Queries for Visual Information Seeking by B. Shneiderman Visual Information Seeking: Tight Coupling of Dynamic Query Filters with Starfield Displays by C. Ahlberg and B. Shneiderman Data Visualization Sliders by S. G. Eick Enhanced Dynamic Queries via Movable Filters by K. Fishkin, M. C. Stone

Recall … Information Visualization In part IV about “user interface” How to create visual representations that convey data 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 North’s account (supp. reading) from Card et al., 1999

Visualization Pipeline: Mapping Data to Visual Form Raw Information Visual Form Dataset Views User - Task Data Transformations Mappings View F F -1 Interaction Perception Visualizations: “adjustable mappings from data to visual form to human perceiver” Series of data transformations Multiple chained transformations Human adjust the transformation Entire pipeline comprises an information visualization

Visualization Stages Data transformations: Visual Mappings: Raw Information Visual Form Dataset Views User - Task Data Transformations Mappings View F F -1 Interaction Perception Data transformations: Map raw data (idiosynchratic form) into data tables (relational descriptions including metatags) Visual Mappings: Transform data tables into visual structures that combine spatial substrates, marks, and graphical properties View Transformations: Create views of the Visual Structures by specifying graphical parameters such as position, scaling, and clipping

Information Structure Raw Information Visual Form Dataset Views User - Task Data Transformations Mappings View F F -1 Interaction Perception Visual mapping is starting point for visualization design Includes identifying underlying structure in data, and for display Tabular structure Spatial and temporal structure Trees, networks, and graphs Text and document collection structure Combining multiple strategies Impacts how user thinks about problem - Mental model

Challenges for Info. Visualization Shneiderman Importing and cleaning data Combining visual representations with textual labels Finding related information Viewing large volumes of data Integrating data mining Integrating with analytical reasoning techniques Collaborating with others Achieving universal usability Evaluation

Challenges for Info. Visualization Combining visual representations with textual labels

Challenges for Info. Visualization Viewing large volumes of data

Challenges for Info. Visualization Integrating with analytical reasoning techniques

End .