CIS 467, Spring 2015
CIS 467/602-01: Data Visualization
Networks
Dr. David Koop
Assignment 2• http://www.cis.umassd.edu/
~dkoop/cis467/assignment2.html • Scaling width • Text elements and selectAll • Any other questions? • Allow submissions until 11:59pm
tonight
2CIS 467, Spring 2015
Exam (Next Wednesday)• Topics
- Everything in book and lectures through and including networks - HTML, CSS, SVG, JavaScript, and D3 Concepts
• Format - Multiple-choice - Free response questions - Graduate students will have extra questions
3CIS 467, Spring 2015
Arrange Tables
Express Values
Separate, Order, Align Regions
Axis Orientation
Layout Density
Dense Space-Filling
Separate Order Align
1 Key 2 Keys 3 Keys Many KeysList Recursive SubdivisionVolumeMatrix
Rectilinear Parallel Radial
Recap (Arrange Tables)
4CIS 467, Spring 2015
[Munzner (ill. Maguire), 2014]
Recap (Loading Data)• CSV, TSV, XML, JSON • D3’s asynchronous methods to load data • Cars Example
5CIS 467, Spring 2015
Networks• Why not graphs?
- Bar graph - Graphing functions in mathematics - Nodes and edges connecting the nodes
• Network: nodes and edges connecting the nodes • Formally, G = (V,E) is a set of nodes V and a set of edges E where
each edge connects two nodes. • Nodes == items, edges connect items • Both nodes and edges may have attributes
6CIS 467, Spring 2015
Node–Link Diagrams
Enclosure
Adjacency Matrix
TREESNETWORKS
Connection Marks
TREESNETWORKS
Derived Table
TREESNETWORKS
Containment Marks
Arrange Networks and Trees
7CIS 467, Spring 2015
[Munzner (ill. Maguire), 2014]
SS
CC
CC
NN
CCNN
CC
NN
NNCC
NN
HH
HHHH
HH
HH
Molecule Graph
8CIS 467, Spring 2015
SS
CC
CC
NN
CCNN
CC
NN
NNCC
NN
HH
HHHH
HH
HH
Molecule Graph
8CIS 467, Spring 2015
•Nodes may have attributes (e.g. element)
SS
CC
CC
NN
CCNN
CC
NN
NNCC
NN
HH
HHHH
HH
HH
Molecule Graph
8CIS 467, Spring 2015
•Nodes may have attributes (e.g. element)
•Edges may have attributes(e.g. number of bonds)
Web Sites as Graphs (amazon.com)
9CIS 467, Spring 2015
[M. Salathe, 2006]
Social Networks
10CIS 467, Spring 2015
[P. Butler, 2010]
Graphs as Data
11CIS 467, Spring 2015
ID Atom Electrons Protons0 N 7 71 C 6 62 S 16 163 C 6 64 N 7 7
ID1 ID2 Bonds0 1 11 2 11 3 23 4 1
Nodes
Edges
SS
CC
CC
NN
CCNN
CC
NN
NNCC
NN
HH
HHHH
HH
HH
SS
CC
CC
NN
CCNN
CC
NN
NNCC
NN
HH
HHHH
HH
HH
Node-Link Diagrams• Data: nodes and edges • Task: understand connectivity,
paths, structure (topology) • Encoding: nodes as point marks,
connections as line marks • Scalability: hundreds
• …but high density of links can be problematic!
• Problem with the above encoding?
12CIS 467, Spring 2015
Arc Diagram
13CIS 467, Spring 2015
[D. Eppstein, 2013]
Network Layout• Need to use spatial position when designing network visualizations • Otherwise, nodes can occlude each other, links hard to distinguish • How?
- With bar charts, we could order using an attribute… - With networks, we want to be able to see connectivity and
topology (not in the data usually) • Possible metrics:
- Edge crossings - Node overlaps - Total area
14CIS 467, Spring 2015
Force-Directed Layout• Nodes push away from each other
but edges are springs that pull them together
• Weakness: nondeterminism, algorithm may produce difference results each time it runs
15CIS 467, Spring 2015
[M. Bostock, 2012]
sfdp
16CIS 467, Spring 2015
[Hu, 2005]
“Hairball”
17CIS 467, Spring 2015
[Hu, 2014]
Adjacency Matrix• Change network to tabular data
and use a matrix representation • Derived data: nodes are keys,
edges are boolean values • Task: lookup connections, find well-
connected clusters • Scalability: millions of edges
• Can encode edge weight, too
18CIS 467, Spring 2015
ii
ii
ii
ii
7.1. Using Space 135
Figure 7.5: Comparing matrix and node-link views of a five-node network.a) Matrix view. b) Node-link view. From [Henry et al. 07], Figure 3b and3a. (Permission needed.)
the number of available pixels per cell; typically only a few levels wouldbe distinguishable between the largest and the smallest cell size. Networkmatrix views can also show weighted networks, where each link has an as-sociated quantitative value attribute, by encoding with an ordered channelsuch as color luminance or size.
For undirected networks where links are symmetric, only half of thematrix needs to be shown, above or below the diagonal, because a linkfrom node A to node B necessarily implies a link from B to A. For directednetworks, the full square matrix has meaning, because links can be asym-metric. Figure 7.5 shows a simple example of an undirected network, witha matrix view of the five-node dataset in Figure 7.5a and a correspondingnode-link view in Figure 7.5b.
Matrix views of networks can achieve very high information density, upto a limit of one thousand nodes and one million edges, just like clusterheatmaps and all other matrix views that uses small area marks.
Technique network matrix viewData Types networkDerived Data table: network nodes as keys, link status between two
nodes as valuesView Comp. space: area marks in 2D matrix alignmentScalability nodes: 1K
edges: 1M
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
7.1.3.3 Multiple Keys: Partition and Subdivide When a dataset has onlyone key, then it is straightforward to use that key to separate into one region
[Henry et al., 2007]
Cliques in Adjacency Matrices
19CIS 467, Spring 2015
[Gehlenborg and Wong]
Structures from Adjacency Matrices
20CIS 467, Spring 2015
[McGuffin]
Node-Link or Adjacency Matrix?• Empirical study: For most tasks, node-link is better for small graphs
and adjacency better for large graphs • Multi-link paths are hard with adjacency matrices • Immediate connectivity or neighbors are ok, estimating size (nodes
& edges also ok) • People tend to be more familiar with node-link diagrams • Link density is a problem with node-link but not with adjacency
matrices
21CIS 467, Spring 2015
Trees• A tree is a directed, acyclic graph
- Directed: edges are oriented - Acyclic: once you follow an edge from a node, you’ll never come
back to that same node • Trees have a root node and parent-child edges
22CIS 467, Spring 2015