CIS 467/602-01: Data Visualization Data & Tasks Dr. David Koop

CIS 467, Spring 2015

Assignment 1 • Posted on the course web site • Due Friday, Feb. 13 • Get started soon! • Submission information will be posted • Useful reference: Interactive Data Visualization for the Web by Scott Murray

CIS 467, Spring 2015

2

Recap

“Computer-based visualization systems provide visual representations of datasets designed to help people carry out tasks more effectively.” — T. Munzner

CIS 467, Spring 2015

3

Data • What is this data?

• Semantics: real-world meaning of the data • Type: structural or mathematical interpretation • Both often require metadata - Sometimes we can infer some of this information - Line between data and metadata isn’t always clear

CIS 467, Spring 2015

4

Data

CIS 467, Spring 2015

5

Data Types • Items - An item is an individual discrete entity - e.g. row in a table, node in a network • Attributes - An attribute is some specific property that can be measured, observed, or logged - a.k.a. variable, (data) dimension

CIS 467, Spring 2015

6

Items & Attributes

Field attribute

item 22

CIS 467, Spring 2015

7

Data Types • Nodes - Synonym for item but in the context of networks (graphs) • Links - A link is a relation between two items - e.g. social network friends, computer network links

CIS 467, Spring 2015

8

Items & Links

Item Links

[Bostock, 2011] CIS 467, Spring 2015

9

Data Types • Positions: - A position is a location in space (usually 2D or 3D) - May be subject to projections - e.g. cities on a map, a sampled region in an CT scan • Grids: - A grid specifies how data is sampled both geometrically and topologically - e.g. how CT scan data is stored

CIS 467, Spring 2015

10

Positions and Grids Position

CIS 467, Spring 2015

Grid

11

Dataset Types Dataset Types Tables

Networks

Fields (Continuous)

Geometry (Spatial)

Grid of positions

Attributes (columns) Link

Items (rows)

Node (item)

Cell containing value

Cell

Position Attributes (columns)

Value in cell

Multidimensional Table

Trees

Value in cell

[Munzner (ill. Maguire), 2014] CIS 467, Spring 2015

12

Tables

Field attribute

item

CIS 467, Spring 2015

cell

13

Networks • Why networks instead of graphs? • Tables can represent networks - Many-many relationships - Also can be stored as specific graph databases or files

CIS 467, Spring 2015

14

Networks

Danny Holten & Jarke J. van Wijk / Force-Directed

[Holten & van Wijk, 2009] CIS 467, Spring 2015

15

Networks

not bundled and bundled using (b) FDEB with inverse-linear model, [Holten & van Wijk, 2009] CIS 467, Spring 2015

16

Fields

Scalar Fields

Vector Fields

Tensor Fields

Each point in space has an associated...

CIS 467, Spring 2015

17

Fields

Scalar Fields

Vector Fields

Tensor Fields

(Order-0 Tensor Fields)

(Order-1 Tensor Fields)

(Order-2+)

Each point in space has an associated... s0 Scalar CIS 467, Spring 2015

2 3 v0 4v1 5 v2 Vector

2 4

00

01

02

10

11

12

20

21

22

Tensor

3 5 17

d types

Grids (Meshes)

ridsFields ininformation the cells (basic with •differ Meshessubstantially combine positional (geometry) topological information (connectivity). uilding blocks) they are constructed from and • Difference between continuous and discrete values •way Meshthe type can differ substantial depending inis thegiven way mesh n the• Examples: topological information temperature, pressure, density cells are formed.

• Grids necessary to sample continuous data:

ered

uniform

rectilinear

structured

unstructured [Weiskopf, Machiraju, Möller]

Fromthe Weiskopf, Machiraju, Möller in • Interpolation: “how to show values between sampled points © Weiskopf/Machiraju/Möller ways that do not mislead”

CIS 467, Spring 2015

18

Spatial Data Example: MRI

[slide via Levine, 2014] CIS 467, Spring 2015

19

Scivis and Infovis • Two subfields of visualization • Scivis deals with data where the spatial position is given with data - Usually continuous data - Often displaying physical phenonema - Techniques like isosurfacing, volume rendering, vector field vis • In Infovis, the data has no set spatial representation, designer chooses how to visually represent data

CIS 467, Spring 2015

20

Sets & Lists

[Daniels, http://experiments.undercurrent.com] CIS 467, Spring 2015

21

Attribute Types Attribute Types Categorical

Ordered Ordinal

Quantitative

Ordering Direction Sequential

Diverging

Cyclic

[Munzner (ill. Maguire), 2014] CIS 467, Spring 2015

22

Categorial, Ordinal, and Quantitative

1quantitative = Quantitative 23 2ordinal = Nominal 3categorical = Ordinal

CIS 467, Spring 2015

23

Categorial, Ordinal, and Quantitative

1quantitative = Quantitative 24 2ordinal = Nominal 3categorical = Ordinal

CIS 467, Spring 2015

24

Semantics

Attribute Semantics

• The type of data does not tell us what the data means or how it should be interpreted Keyshave vs. Values (Tables) orfields Independent vs. Dependent (Fields) vars • Tables keys/values, have independent/dependent

Multidimensional

Fields

Tables

Flat

[Munzner (ill. Maguire), 2014] CIS 467, Spring 2015

25

Tasks Why? Actions

Targets All Data

Analyze Consume Discover

Trends Present

Attributes Record

One

Derive

Distribution

tag

Target known Lookup

Browse

Network Data

Location unknown

Locate

Explore

Topology

Correlation

Similarity

Paths

Compare

Summarize

What? Spatial Data Shape

CIS 467, Spring 2015

Dependency

Target unknown

Location known

[Munzner (ill. Maguire), 2014]

Many

Extremes

Search

Query Identify

Features

Enjoy

Produce Annotate

Outliers

Why? How? 26

Actions: Analyze • Consume – Exploration – Explanation

Analyze Consume Discover

Present

Enjoy

– Enjoyment • Produce

Produce

– Annotation

Annotate

Record

Derive

tag

– Record – Derivation • Leads

to new directions/ideas

[Munzner (ill. Maguire), 2014] CIS 467, Spring 2015

27

Actions: Search and Query • Search based on what
 a user knows

Search

- Target - Location • Query depends on
 what data matters - One - Some (Often Two)

Target known

Target unknown

Location known

Lookup

Browse

Location unknown

Locate

Explore

Query Identify

Compare

Summarize

- All

[Munzner (ill. Maguire), 2014] CIS 467, Spring 2015

28

Targets NETWORK DATA

ALL DATA Trends

Outliers

Topology

Features

Paths

ATTRIBUTES One Distribution

Many Dependency

Correlation

Similarity

SPATIAL DATA Shape

Extremes

[Munzner (ill. Maguire), 2014] CIS 467, Spring 2015

29

How do we do visualization? How? Manipulate

Encode Encode Arrange Express

Separate

Map from categorical and ordered attributes

Manipulate Facet

Facet

Reduce

Change

Juxtapose

Filter

Select

Partition

Aggregate

Navigate

Superimpose

Embed

Color Order

Align

Hue

Saturation

Luminance

Size, Angle, Curvature, ... Use

Shape Motion

Direction, Rate, Frequency, ...

[Munzner (ill. Maguire), 2014] CIS 467, Spring 2015

30

Analysis Example TreeJuxtaposer

SpaceTree

[SpaceTree: Supporting Exploration in Large Node Link Tree, Design Evolution and Empirical Evaluation. Grosjean, Plaisant, and Bederson. Proc. InfoVis 2002, p 57–64.] [TreeJuxtaposer: Scalable Tree Comparison Using Focus +Context With Guaranteed Visibility. ACM Trans. on Graphics (Proc. SIGGRAPH) 22:453– 462, 2003.]

What? Tree

Why? Actions Present

How? Locate

Identify

Targets Path between two nodes

SpaceTree Encode

Navigate

Select

Filter

TreeJuxtaposer Encode Navigate

Select

Arrange

Aggregate

[Munzner (ill. Maguire), 2014] CIS 467, Spring 2015

31

Analysis Example TreeJuxtaposer

SpaceTree

[SpaceTree: Supporting Exploration in Large Node Link Tree, Design Evolution and Empirical Evaluation. Grosjean, Plaisant, and Bederson. Proc. InfoVis 2002, p 57–64.] [TreeJuxtaposer: Scalable Tree Comparison Using Focus +Context With Guaranteed Visibility. ACM Trans. on Graphics (Proc. SIGGRAPH) 22:453– 462, 2003.]

What? Tree

Why? Actions Present

How? Locate

Identify

Targets Path between two nodes

SpaceTree Encode

Navigate

Select

Filter

TreeJuxtaposer Encode Navigate

Select

Arrange

Aggregate

[Munzner (ill. Maguire), 2014] CIS 467, Spring 2015

31

Analysis Example: Derivation • Strahler number – centrality metric for trees/networks – derived quantitative attribute – draw top 5K of 500K for good skeleton [Using Strahler numbers for real time visual exploration of huge graphs. Auber. Proc. Intl. Conf. Computer Vision and Graphics, pp. 56–69, 2002.] Task 1

Task 2 .74

.58 .84

.54 .24

.74 .84

.64

.24

.64

Out Quantitative attribute on nodes

What? In Tree Out Quantitative attribute on nodes

Why? Derive

.84

.54

.84

.94

In Tree

.74

.58

.74 .84

.64 .84 .64

.94

In Tree

+

In Quantitative attribute on nodes

What? In Tree In Quantitative attribute on nodes Out Filtered Tree

Out Filtered Tree Removed unimportant parts Why? Summarize Topology

How? Reduce Filter

[Munzner (ill. Maguire), 2014] CIS 467, Spring 2015

32

Next Class • Implementation! How do we actually create visualizations? • Tools: - HTML - CSS - SVG - JavaScript

CIS 467, Spring 2015

33