CIS 467/602-01: Data Visualization

Networks

Dr. David Koop

CIS 467, Spring 2015 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

CIS 467, Spring 2015 2 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

CIS 467, Spring 2015 3 Recap (Arrange Tables)

Arrange Tables Express Values

Separate, Order, Align Regions Separate Order Align

1 Key 2 Keys 3 Keys Many Keys List Matrix Volume Recursive Subdivision

Axis Orientation Rectilinear Parallel Radial

Layout Density Dense Space-Filling

[Munzner (ill. Maguire), 2014]

CIS 467, Spring 2015 4 Recap (Loading Data) • CSV, TSV, XML, JSON • D3’s asynchronous methods to load data • Cars Example

CIS 467, Spring 2015 5 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

CIS 467, Spring 2015 6 Arrange Networks and Trees

Node–Link Diagrams Connection Marks

NETWORKS TREES

Adjacency Matrix Derived Table

NETWORKS TREES

Enclosure Containment Marks

NETWORKS TREES [Munzner (ill. Maguire), 2014]

CIS 467, Spring 2015 7 Molecule Graph

H H

N N C C H

C N

N C

C N

H H

CIS 467, Spring 2015 8 Molecule Graph

H H

N N C C H

C N

N C • Nodes may have attributes

C N (e.g. element)

H H

CIS 467, Spring 2015 8 Molecule Graph

H H

N N C C H

C N

N C • Nodes may have attributes

C N (e.g. element) • Edges may have attributes

H (e.g. number of bonds) H

CIS 467, Spring 2015 8 Web Sites as Graphs (amazon.com)

[M. Salathe, 2006]

CIS 467, Spring 2015 9 Social Networks

[P. Butler, 2010]

CIS 467, Spring 2015 10 Graphs as Data Nodes

ID Atom Electrons Protons H H 0 N 7 7 S

1 C 6 6 N N 2 S 16 16 C C H 3 C 6 6

4 N 7 7 C N

Edges N C ID1 ID2 Bonds 0 1 1 C N

1 2 1 H H 1 3 2 3 4 1

CIS 467, Spring 2015 11 Node-Link Diagrams • Data: nodes and edges • Task: understand connectivity, paths, structure (topology) H H • Encoding: nodes as point marks, S N connections as line marks N C C H • Scalability: hundreds

C N

• …but high density of links can be N C problematic! C N

H • Problem with the above encoding? H

CIS 467, Spring 2015 12 Arc Diagram

[D. Eppstein, 2013]

CIS 467, Spring 2015 13 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

CIS 467, Spring 2015 14 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

[M. Bostock, 2012]

CIS 467, Spring 2015 15 sfdp

[Hu, 2005]

CIS 467, Spring 2015 16 “Hairball”

[Hu, 2014]

CIS 467, Spring 2015 17 i i

i i Adjacency Matrix 7.1. Using Space 135 • Change network to tabular data and use a matrix representation • Derived data: nodes are keys, edges are boolean values • Task: lookup connections, ﬁnd well- connected clusters

• Scalability: millionsFigure of 7.5:edges Comparing matrix and node-link views of a ﬁve-node network. a) Matrix view. b) Node-link view. From [Henry et al. 07], Figure 3b and 3a. (Permission needed.) • Can encode edge weight, too the number of available pixels per cell; typically only a few levels would be distinguishable between the largest and the smallest cell size. Network matrix views can also show weighted networks, where each link has an as- sociated quantitative value attribute, by encoding with an ordered channel such as color luminance or size. For undirected networks where links are symmetric, only half of the matrix needs to be shown, above or below the diagonal, because a link from node A to node B necessarily implies a link from B to[Henry A. For directed et al., 2007] networks, the full square matrix has meaning, because links can be asym- CIS 467, Spring 2015 metric. Figure 7.5 shows a simple example of an undirected network, with 18 a matrix view of the ﬁve-node dataset in Figure 7.5a and a corresponding node-link view in Figure 7.5b. Matrix views of networks can achieve very high information density, up to a limit of one thousand nodes and one million edges, just like cluster heatmaps and all other matrix views that uses small area marks.

Technique network matrix view Data Types network Derived Data table: network nodes as keys, link status between two nodes as values View Comp. space: area marks in 2D matrix alignment Scalability nodes: 1K edges: 1M

......

7.1.3.3 Multiple Keys: Partition and Subdivide When a dataset has only one key, then it is straightforward to use that key to separate into one region

i i

i i Cliques in Adjacency Matrices

[Gehlenborg and Wong]

CIS 467, Spring 2015 19 Structures from Adjacency Matrices

[McGufﬁn]

CIS 467, Spring 2015 20 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

CIS 467, Spring 2015 21 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

CIS 467, Spring 2015 22