Marti Hearst SIMS 247 SIMS 247 Lecture 9 Distortion-based Views February 17, 1998.

Marti HearstSIMS 247

SIMS 247 Lecture 9SIMS 247 Lecture 9Distortion-based ViewsDistortion-based Views

February 17, 1998February 17, 1998


TodayToday

• Distortion-based viewsDistortion-based views– focus+context

– views

– intro to graphs


Viewing Huge DatasetsViewing Huge Datasets

• Problem: Problem: – The computer display is a small window

through which to view huge datasets

• Standard Solution:Standard Solution:– Display a portion at a time

Problems: lose the context, get lost, comparisons are difficult, ...

• Alternative Solution:Alternative Solution:– Focus + Context


Focus + ContextFocus + Context

• Another solution:Another solution:– Use pixels more carefully

• Focus + ContextFocus + Context– Show a lot of information at once

• Details are too small to be visible

– Focus on a subset of interest• Make this subset large enough to be

viewed


Table Lens Table Lens (Rao & Card 94)(Rao & Card 94)

• Focus on the records of interestFocus on the records of interest• Context: other recordsContext: other records

– depicted graphically– view patterns in both nominal and

quantititive data types– interaction via sorting for pattern

discovery– nearly keyboardless interface


Viewing Huge Tables:Viewing Huge Tables:Table Lens Table Lens (Rao & Card 94)(Rao & Card 94)


Focus + Context Data TypesFocus + Context Data Types

• TablesTables• HierarchiesHierarchies• NetworksNetworks• MapsMaps• Artificial “worlds”Artificial “worlds”


ViewsViews

• A variation on Focus + ContextA variation on Focus + Context– Make objects of interest large, detailed– Less important objects successively

smaller• Goal: Goal:

– Smooth integration of local detail and global context

• Technique:Technique:– Reposition and resize objects


Noik’s DemonstrationNoik’s Demonstration


Elements of Fisheye ViewsElements of Fisheye Views

• Focus, or Point of Interest (POI)Focus, or Point of Interest (POI)– user-selected

• Importance Function (API)Importance Function (API)– user-specified or pre-determined

• number of railway connections• height in hierarchy• population of city

• Function for measuring distance Function for measuring distance between objectsbetween objects


Sar

kar

& B

row

n 9

4S

ark

ar &

Bro

wn

94

Par

is M

etro

, im

port

ance

cor

resp

onds

to

num

ber

of c

onne

ctio

ns

Par

is M

etro

, im

port

ance

cor

resp

onds

to

num

ber

of c

onne

ctio

ns


Determining Layout Determining Layout

• User selects focusUser selects focus– As user drags mouse, display changes

• For each object: size, position, and For each object: size, position, and amount of detail depend on:amount of detail depend on:– distortion factor– object’s “normal” size and position– distance of object from focus (POI)– pre-assigned importance value– other user-controlled parameters (optional)


GraphsGraphs

• An interlude: basic properties of An interlude: basic properties of graphsgraphs

• See Cruz and Tammasia tutorial for See Cruz and Tammasia tutorial for an update on the state of the art in an update on the state of the art in graph layout strategiesgraph layout strategies


Properties of GraphsProperties of Graphs• Graph = (V, E)Graph = (V, E)• V = set of vertices (points, nodes)V = set of vertices (points, nodes)

V={A,B,C,D,E}

• E = set of edges between V’sE = set of edges between V’sE={(A,B), (A,E), (B,D), (E,C), (D,E)}

A

B C

DE


Properties of GraphsProperties of Graphs

• Edges can be Edges can be directeddirected– can go from A to B, but not from B to

A– use arrows to show directedness

• Graphs can have Graphs can have cyclescycles– can get back to B when starting from

B

A

B C

DE



• A A dagdag is a directed acyclic graph is a directed acyclic graph– No cycles, but– A vertex can have more than one

parent(if we remove the red edge, this graph becomes a dag)

A

B C

DE


Properties of GraphsProperties of Graphs• A A treetree is a connected graph with no is a connected graph with no

cyclescycles• Each node has exactly one parentEach node has exactly one parent• A tree can represent a hierarchyA tree can represent a hierarchy

– There is a distinguished root node– Levels are counted down from the root– Trees are drawn upside-down– Leaf nodes have no children

A

B

C D

E



• A planar graph is one that can be A planar graph is one that can be drawn on a 2D plane with no edges drawn on a 2D plane with no edges crossingcrossing

CD

BA



• In general, it can be very hard to In general, it can be very hard to determine if a large graph is planardetermine if a large graph is planar

CD

B

A


Fisheye Views of GraphsFisheye Views of Graphs(Sarkar & Brown 94)(Sarkar & Brown 94)

• This is just one of many possible methodsThis is just one of many possible methods• Convert Convert normalnormal to to fisheyefisheye coordinates coordinates

• MAGNIFYMAGNIFY vertices of greater interest vertices of greater interest• demagnifydemagnify vertices of lesser interest vertices of lesser interest• Also, recompute positions of all verticesAlso, recompute positions of all vertices

Analogy: blowing up a balloon• As some points grow farther apart, some get

pushed closer together• This happens because there is a fixed area or

volume for all the points


Converting from Normal to Converting from Normal to Fisheye CoordinatesFisheye Coordinates

• Determine the current focus.Determine the current focus.• Then, for each vertex in the graph:Then, for each vertex in the graph:

– Compute new position– Compute new size– Determine amount of detail to be shown– Compute visual worth:

• Importance (API) +• Distance from the focus point• -> Even a very important node may be small if it

is very far from the focus point


Computing New Vertex PositionComputing New Vertex Position

• A vertex’s new position is a A vertex’s new position is a function of its normal position and function of its normal position and that of the focusthat of the focus

• Distortion factor determines how Distortion factor determines how far points are spread out from the far points are spread out from the focusfocus


Compute New Vertex PositionCompute New Vertex Position

focus theand formed trans

being vertex ebetween th distance horizontal

focus theand

boundary screen ebetween th distance horizontal 1

)1()(

,

))(),((),(

max

maxmax

maxmax

1

x

x

yy

y

y

xx

x

x

normal

focus

normal

focusnormal

normalnormalfisheye

D

Ddx

xdxG

PDD

DGPD

D

DG

fPvPFfvP


Effects on Effects on xx of of Various Distortion FactorsVarious Distortion Factors

x d=0.5 d=2 d=5.1 .14 .25 .40.2 .27 .42 .60.3 .39 .56 .72.4 .50 .66 .80.5 .60 .75 .85.6 .69 .82 .90.7 .77 .88 .93.8 .85 .92 .96.9 .93 .96 .98

d=5.0

d=0.5


An Example of FisheyeAn Example of FisheyeVertex Position ComputationVertex Position Computation

f p1 p2

f=(50,50), p1=(75,50), p2=(85,50)Dnorm/Dmax for p1: 25/50=.5Dnorm/Dmax for p2: 35/50=.7

d=2p1fisheyex= (.75*50+50) = 87.5p2fisheyex=(.88*50+50) = 94.0

d=5p1fisheyex= (.86*50+50) = 93.0p2fisheyex=(.93*50+50) = 96.5

0 100

Initial Positionsof P1, P2, and Focus


Computing New Vertex SizeComputing New Vertex Size

constants are , )(

|)| , |min(|2

)(,2

factor scale size- vertex

vertexnormalfor box bounding oflength

))(),(),(),((),(

1

2

ecAPIcSS

PQPQS

fPS

sFQ

s

S

vAPIfPvPvSFfvS

egeomfisheye

fisheyefisheyefisheyefisheyegeom

xnormalxnormal

fisheye

normal

normalnormalnormalfisheye

yyxx

x


Computing New Vertex SizeComputing New Vertex Size

Vertex size is a function of the normal Vertex size is a function of the normal size, the distance from the focus, and the size, the distance from the focus, and the API of the vertexAPI of the vertex– look at length of side of bounding box– find a point that is

• s* length/2 away from center of vertex• s is a vertex-size scale factor• move in direction opposite of the focus

– convert to fisheye coordinates– scale by API


Sar

kar

& B

row

n 9

4S

ark

ar &

Bro

wn

94


Sar

kar

& B

row

n 9

4S

ark

ar &

Bro

wn

94

dis

tort

ion

leve

l 5 v

s. 2

dis

tort

ion

leve

l 5 v

s. 2


Computing DetailComputing Detail

• The amount of detail is proportional The amount of detail is proportional to the size of the vertex in the to the size of the vertex in the fisheye coordinatesfisheye coordinates

• But must not exceed a maximum But must not exceed a maximum amount of detailamount of detail– determine font size– determine size of nodes to avoid overlap– determine resolution of an image


Computing Visual WorthComputing Visual Worth

• A cutoff that determines whether A cutoff that determines whether or not a node is shown at allor not a node is shown at all

• A function of the size of the node A function of the size of the node and a set of constantsand a set of constants


Sar

kar

& B

row

n 9

4S

ark

ar &

Bro

wn

94

mor

e em

ph

asis

on

imp

orta

nce

mea

sure

mor

e em

ph

asis

on

imp

orta

nce

mea

sure


Sar

kar

& B

row

n 9

4S

ark

ar &

Bro

wn

94


Distortion TechniquesDistortion Techniques

• Computation must take care not to Computation must take care not to let the magnified part overlap or let the magnified part overlap or cover up the de-magnified partcover up the de-magnified part

• The boundary between the magnified The boundary between the magnified and the demagnified parts of the and the demagnified parts of the viewview– Some techniques have an abrupt

boundary– Some are more gradual


Distortion TypesDistortion Types

• Different distortions for different Different distortions for different data types yield different effectsdata types yield different effects– cartesian, polar coordinates,

hyperbolic

• Leung & Apperley’s TaxonomyLeung & Apperley’s Taxonomy– distinguish focus+context from

distortion• f+c requires a POI function

Marti Hearst SIMS 247 SIMS 247 Lecture 9 Distortion-based Views February 17, 1998.

Documents

Transcript of Marti Hearst SIMS 247 SIMS 247 Lecture 9 Distortion-based Views February 17, 1998.