1

SIMS 247: Information Visualization and PresentationMarti Hearst

Sep 28, 2005 

 

2

Today

• Finish Parallel Coordinates• Panning and Zooming

3

Multidimensional DetectiveA. Inselberg, Multidimensional Detective, Proceedings of IEEE Symposium on Information Visualization (InfoVis '97), 1997.

Do Not Let the Picture Scare You!!

4

Inselberg’s PrinciplesA. Inselberg, Multidimensional Detective, Proceedings of IEEE Symposium on Information Visualization (InfoVis '97), 1997

1. Do not let the picture scare you2. Understand your objectives

– Use them to obtain visual cues

3. Carefully scrutinize the picture4. Test your assumptions, especially the “I am really

sure of’s”5. You can’t be unlucky all the time!

5

A Detective StoryA. Inselberg, Multidimensional Detective, Proceedings of IEEE Symposium on Information Visualization (InfoVis '97), 1997

• The Dataset: – Production data for 473 batches of a VLSI chip– 16 process parameters: – X1: The yield: % of produced chips that are useful

– X2: The quality of the produced chips (speed)

– X3 … X12: 10 types of defects (zero defects shown at top)

– X13 … X16: 4 physical parameters

• The Objective:– Raise the yield (X1) and maintain high quality (X2)

6

Multidimensional Detective• Each line represents the values for one batch of chips• This figure shows what happens when only those

batches with both high X1 and high X2 are chosen• Notice the separation in values at X15• Also, some batches with few X3 defects are not in this

high-yield/high-quality group.

7

Multidimensional Detective

• Now look for batches which have nearly zero defects.– For 9 out of 10 defect categories

• Most of these have low yields

• This is surprising because we know from the first diagram that some defects are ok.

8

Go back to first diagram, looking at defect categories.

Notice that X6 behaves differently than the rest.

Allow two defects, where one defect in X6.

This results in the very best batch appearing.

9

Multidimensional Detective• Fig 5 and 6 show that high yield batches don’t have non-zero values

for defects of type X3 and X6– Don’t believe your assumptions …

• Looking now at X15 we see the separation is important– Lower values of this property end up in the better yield batches

10

Automated AnalysisA. Inselberg, Automated Knowledge Discovery using Parallel Coordinates, INFOVIS ‘99

11

Parallel Coordinates Software

• Parvis (free)– http://home.subnet.at/flo/mv/parvis/

• XmdvTool (free)– http://davis.wpi.edu/~xmdv/vis_parcoord.html

• Parallax – Al Inselberg’s version– I’m not sure of the status of it.

12

Integrating Viz into a UI

• Vizcraft:VizCraft: A Problem-Solving Environment for Aircraft Configuration Design, Goe, Baker, Shaffer, Grossman, Mason, Watson, Haftka, IEEE Computing, pp. 56-66, 2001

• Solving an Analysis Problem– Optimizing design of aircraft

• Uses of Viz:– Brushing and linking– Color– Multiple views– Parallel Coordinates

13

Good

Use of Color in Vizcraft

Incorrect

Not Sure

14

Doing Analysis in VizCraft

Colored according to value in first attribute

Shows that 2nd and N-6th are correlated with 1st

15

Doing Analysis in VizCraft

Colored according to value in fifth attribute

Shows that 5th and 7th attributes are correlated

16

Doing Analysis in VizCraft

Select only low values of 1st variable (normalized after the fact)

The idea is to learn about the acceptableranges for the values of the other variables

17

Doing Analysis in VizCraft

Color according to one constraint

Confusing – using the constraint colors in two ways simultaneously.

18Slide adapted from Hornung & Zagreus

Zooming, Focus + Context, Distortion

• Large amount of data in small space• Maximize use of screen real estate• Allow examination of a local area in detail

within context of the whole data set• Today’s tools use one, two or all three of these

techniques

19Slide adapted from Hornung & Zagreus

Zooming

• Zoom in: ability to see a portion in detail while seeing less of the overall picture

• Zoom out: see more of overall picture, but in less detail

• Animation– Compare:

• Google maps (discrete zoom)• Google earch (continuous zoom)

• Zooming vs. Overview + Detail

20

Dynamic Zoom Tool(Adobe PDF Reader)

21

Overview + Detail(Adobe PDF Reader)

22

Loupe(Adobe PDF Reader)

23

Semantic Zooming

• Geometric (standard) zooming:– The view depends on the physical properties of what

is being viewed

• Semantic Zooming:– When zooming away, instead of seeing a scaled-

down version of an object, see a different representation

– The representation shown depends on the meaning to be imparted.

24

Examples of Semantic Zoom

• Standard zoom– Image of a painting– Zoom in, see pixels

• Infinitely scalable painting program– close in, see flecks of paint– farther away, see paint strokes– farther still, see the wholistic impression of the

painting– farther still, see the artist sitting at the easel

25

Pad++• A toolkit • An infinite 2D plane• Can get infinitely close to the surface too• Navigate by panning and zooming• Pan:

– move around on the plane• Zoom:

– move closer to and farther from the plane• Demo:

– http://hcil.cs.umd.edu/video/1998/1998_pad.mpg– (superceded by Piccolo, nee Jazz)– http://www.cs.umd.edu/hcil/piccolo/index.shtml

26

PadPrints: Pad++ Applied to Web Browsing History

Graphical Multiscale Web Histories: A Study of PadPrints, R. Hightower, L. Ring,

J. Helfman, B. Bederson, J. Hollan, Proc. Hypertext '98, Pittsburg, PA, 1998.

27

How to Pan While Zooming?

28

Problem:How to Pan While Zooming?

29

Navigation in Pad++

• How to keep from getting lost?– Animate the traversal from one object to another

using “hyperlinks”• If the target is more than one screen away, zoom out,

pan over, and zoom back in

– Goal: help user maintain context

30

Speed-Dependent Zooming• Navigation technique that integrates rate-based scrolling with automatic

zooming.– Igarashi & Hinkley, UIST 2000

• Adjust zoom level automatically to prevent “extreme visual flow”– Automatically zoom out when going fast, zoom in when slowing down– Uses semantic zooming to provide context

• Applied to– Large Documents (successful in a small study)– Image Collection (not successful)– Maps (mixed, needs work)– Dictionary (not successful)– Sound Editor (not successful)

• More recently refined and studied:– Cockburn et al., CHI 2005

• Demo and Movie:http://www-ui.is.s.u-tokyo.ac.jp/~takeo/research/autozoom/autozoom.htm

31Slide adapted from Hornung & Zagreus

PhotoMesa

http://www.cs.umd.edu/hcil/photomesa

32Slide adapted from Hornung & Zagreus

PhotoMesa Interface

PhotoMesa: A Zoomable Image Browser Using Quantum Treemaps and Bubblemaps, B. Bederson, UCM UIST 2001

• Zooming is primary presentation mechanism• Zoom in, zoom out on levels of thumbnails• Quickly drill down to individual picture (at full resolution)• Outline shows area of next zoom level• History of views• Thumbnail zooms up when hover w/cursor• Export images• Cluster by filename

33Slide adapted from Hornung & Zagreus

PhotoMesa Goals

• Automatically lay out images• Use immediately – little setup time• Large set of images in context• Default groupings are by directory, time, or

filename– No hierarchy

• Makes managing photos difficult: can delete, but reorganization a problem

• Can add metadata

34Slide adapted from Hornung & Zagreus

Bubblemaps

• Like Quantum Treemaps, elements guaranteed to be same size

• Arbitrary shapes• No wasted space• May be harder to visually

parse than QT

35

Is panning and zooming useful?

• Is panning and zooming useful?• Or is it better to show multiple simultaneous

views?

36

Next Time

• Focus + Context• Distortion