CIS 467/602-01: Data Visualization

Transcription

1 IS 467/602-01: Data Visualization etworks Dr. David Koop IS 467, Spring 2015

2 Assignment 2 ~dkoop/cis467/assignment2.html Scaling width Text elements and selectall Any other questions? Allow submissions until 11:59pm tonight IS 467, Spring

3 Exam (ext Wednesday) Topics - Everything in book and lectures through and including networks - TML, SS, SVG, JavaScript, and D3 oncepts Format - Multiple-choice - Free response questions - Graduate students will have extra questions IS 467, Spring

4 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] IS 467, Spring

5 Recap (Loading Data) SV, TSV, XML, JSO D3 s asynchronous methods to load data ars Example IS 467, Spring

6 etworks Why not graphs? - Bar graph - Graphing functions in mathematics - odes and edges connecting the nodes etwork: 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. odes == items, edges connect items Both nodes and edges may have attributes IS 467, Spring

7 Arrange etworks and Trees ode Link Diagrams onnection Marks ETWORKS TREES Adjacency Matrix Derived Table ETWORKS TREES Enclosure ontainment Marks ETWORKS IS 467, Spring 2015 TREES [Munzner (ill. Maguire), 2014] 7

8 Molecule Graph S IS 467, Spring

9 Molecule Graph S odes may have attributes (e.g. element) IS 467, Spring

10 Molecule Graph S odes may have attributes (e.g. element) Edges may have attributes (e.g. number of bonds) IS 467, Spring

11 Web Sites as Graphs (amazon.com) [M. Salathe, 2006] IS 467, Spring

12 Social etworks [P. Butler, 2010] IS 467, Spring

13 Graphs as Data odes ID Atom Electrons Protons S S Edges ID1 ID2 Bonds IS 467, Spring

14 ode-link Diagrams Data: nodes and edges Task: understand connectivity, paths, structure (topology) Encoding: nodes as point marks, connections as line marks Scalability: hundreds S but high density of links can be problematic! Problem with the above encoding? IS 467, Spring

15 Arc Diagram [D. Eppstein, 2013] IS 467, Spring

16 etwork Layout eed to use spatial position when designing network visualizations Otherwise, nodes can occlude each other, links hard to distinguish ow? - 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 - ode overlaps - Total area IS 467, Spring

17 Force-Directed Layout odes 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] IS 467, Spring

18 sfdp [u, 2005] IS 467, Spring

19 airball [u, 2014] IS 467, Spring

20 Adjacency Matrix hange network to tabular data and use a matrix representation Derived data: nodes are keys, edges are boolean values Task: lookup connections, find wellconnected clusters Scalability: millions of edges an encode edge weight, too [enry et al., 2007] IS 467, Spring

21 liques in Adjacency Matrices [Gehlenborg and Wong] IS 467, Spring

22 Structures from Adjacency Matrices [McGuffin] IS 467, Spring

23 ode-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 IS 467, Spring

24 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 IS 467, Spring