2007/4/3 CMSC734 Information Visualization 1

Network Visualization by Semantic SubstratesBen Shneiderman and Aleks Aris

Presented by: Morimichi Nishigaki, Galileo Namata

(Slides borrowed from Ben Shneiderman and Aleks Aris)

2007/4/3 CMSC734 Information Visualization 2

Review Network Vis. Strategies

Node-link Diagrams

Force-directed Familiar Layout

Circular layout

Other Diagrams

Temporal Placement

Matrix-based

Clustering

2007/4/3 CMSC734 Information Visualization 3

Force-directed>30%

Familiar Layout~30%

Circular Layout~15%

Node layout strategyFirst 100 in visualcomplexity.com

Statistics on Strategies

2007/4/3 CMSC734 Information Visualization 4

Collection of Challenges

• What are the challenges?– C1) Basic networks: nodes and links– C2) Node labels– C3) Link labels– C4) Directed networks– C5) Node attributes– C6) Link attributes

Recurring Theme: More nodes and links = Harder!!!

2007/4/3 CMSC734 Information Visualization 5

C1) Basic Networks – Nodes and Links

Power Law Graph5000 nodesUniformly distributed

Power Law Graph, Linyuan Lu

Vizster, Heer et al.

Source: www.visualcomplexity.com (135)

Social friendship network

3 degrees from Heer 47,471 people432,430 relations

Source: www.visualcomplexity.com (97)

2007/4/3 CMSC734 Information Visualization 6

C2) Node Labels

• Adding labels– e.g. article title, book author, animal name– Nodes overlap with other nodes– Nodes overlap with links

Internet Industry Partnerships, Valdis Krebs

Source: www.visualcomplexity.com (168) 250 nodes

2007/4/3 CMSC734 Information Visualization 7

C3) Link Labels

Adding Labels

e.g. Strength of connection, type of link

Challenges:

Length

Space

Belongingness

Distinction from other labels & other types of labels

Netscan, Marc Smith

Source: www.visualcomplexity.com (127)

2007/4/3 CMSC734 Information Visualization 8

C4) Directed Networks

• Direction– arrows– labels– thickness– color

Source: www.visualcomplexity.com (127)

Yeast Protein Interaction

SeeNet, Becker et al.

Source: [1] Becker et al.

2007/4/3 CMSC734 Information Visualization 9

C5 & C6 Node & Link Attributes

• Types:– Categorical (e.g. mammal/reptile/bird/fish/insect)– Ordinal (e.g. small/medium/large)– Numerical (e.g. age/weight)

• Values of node attributes indicated by node size and shape• Values of link attributes indicated by a letter and color

CIA World Factbook Visualization, Moritz Stefaner

Source: www.visualcomplexity.com (192)

2007/4/3 CMSC734 Information Visualization 10

C1~12%C4

~10%

C2~66%

ChallengesFirst 100 in visualcomplexity.com

Statistics on Challenges

C5~10%

C6~2%

C1) Basic networksC2) Node labelsC3) Link labelsC4) Directed networksC5) Node attributesC6) Link attributes

2007/4/3 CMSC734 Information Visualization 11

High Priority Tasks

C1) Basic NetworkT1) count number of nodes and linksT2) for every node, count degreeT3) for every node, find the nodes that are distance 1, 2,…T4) for every node, find betweenness centralityT5) for every node, find structural prestigeT6) find diameter of the network

C2-3) LabelT9) for every node/link, read the labelT10) find all nodes/links with a given label

C5-6) Attributes

C4) Directed links

Variations on T1-10: count # of nodes in each categoryT11) find links b/w nodes with deferent attribute valuesT12) find the proportion links from a node that go to each

category for every nodeT13) for a pair of nodes, find paths with the lowest costT14) find links with connection strength greater than 0.5

Variations on T1-10: shortest paths, etc.

2007/4/3 CMSC734 Information Visualization 12

Two Principles

• Layout based on user-defined semantic substrates: non-overlapping regions– Group nodes into regions

• According to an attribute• Categorical, ordinal, or binned numerical

– In each region:• Place nodes according to other attribute(s)

• Adjustable sliders to control link visibility:limit clutter– Give users control of link visibility

2007/4/3 CMSC734 Information Visualization 13

Legal Precedent Example

• Department of Government and Politics, Univ. of Maryland– http://www.bsos.umd.edu/gypt/CITE-IT/

• Contains 2780 federal judicial cases from 1978-2005 on “regulatory takings”– Regulatory taking - a government regulates a property that the

regulation effectively amounts to an exercise of the government's eminent domain power without divesting the property's owner of title to the property.

2007/4/3 CMSC734 Information Visualization 14

Before Semantic Substrates

2007/4/3 CMSC734 Information Visualization 15

After Semantic Substrates

• NVSS 1.0 Demo– And now to our featured presentation …– Please pardon our resolution. This is as big as

our screen gets.

2007/4/3 CMSC734 Information Visualization 16

After Semantic Substrates – NVSS 1.0

2007/4/3 CMSC734 Information Visualization 17

NVSS 1.0 - Edges

2007/4/3 CMSC734 Information Visualization 18

NVSS 1.0 - Filter

2007/4/3 CMSC734 Information Visualization 19

Supreme Vs. Circuit Court

2007/4/3 CMSC734 Information Visualization 20

Circuit Court Citations

9th Circuit Court

Federal Circuit Court

2007/4/3 CMSC734 Information Visualization 21

Other Examples: Email To & CC list co-recipients

UMD

ORGEDU

COM Female

Male

LowMedHigh

Jr

Med

Sr

2007/4/3 CMSC734 Information Visualization 22

Other Examples: Foodwebs

Mammals

BirdsInsects

Reptiles

Fish

2007/4/3 CMSC734 Information Visualization 23

Discussion

• Advantages– Location conveys meaning, interpretable– Instant perception of

• different types of nodes• their relative number • connections between different groups of nodes

• Limitations– Beyond 5 regions becomes challenging– Constraint on nodes interferes with aesthetics

2007/4/3 CMSC734 Information Visualization 24

In Case You Forgot …

2007/4/3 CMSC734 Information Visualization 25

Now where can I get this amazing tool?

www.cs.umd.edu/hcil

www.cs.umd.edu/hcil/nvsswww.cs.umd.edu/~aris/nvss

Lab

ProjectDemo

2007/4/3 CMSC734 Information Visualization 26

Supplementary

2007/4/3 CMSC734 Information Visualization 27

Other “Semantic Substrates”

Jambalaya PivotGraph

Pretorius et al. D-Dupe

2007/4/3 CMSC734 Information Visualization 28

PivotGraph