NETWORK GRAPHS N’ATPatrick M. Dudas

@pdudders

Who Am I?

(And in the corner..) AI vs. IA Artificial

Intelligence John

McCarthy

Intelligence Amplification Man-Computer Symbiosis William Ross Ashby J.C.R. Licklider

Infographic

Infographic, Model, or Visualization

Model

http://fold.it/portal/info/about - University of Washington

Visualization

Data Visualization (Meetup)

Art

Data

Coding

UI/UX

Github: https://github.com/dudaspm/Pittsburgh-Data-Visualization

Network Graphs

What’s in a Name

Network graph In/Directed Graph Force-Directed Graph Force-Based Graph Node-link Diagram

Why Networks are Cool

Types: User -> User (Social Networks) Cosine Similarity (Documents) Co-Authorship Networks Co-Citation Networks Power/Telephone/Network Grid Biological Networks Ontology/Taxonomy

Terminology 101

Terminology 101

Terminology 101

Terminology 101

Sociometry/ Network Graph Theory

Sociometry

Strong/Weak Ties

Mark Granovetter Strong ties = close family Weak ties = co-workers

Homophily/Triadic Closure

Birds of feather flock together Geographic connections

McPherson, M., L. Smith-Lovin, et al. (2001). "Birds of a feather: Homophily in social networks." Annual review of sociology: 415-444.

Bridges/Structural Holes

Network Graph Theory

Degree Centrality/Groups

Degree/In-degree/Out-degree Communities

Modularity

http://boxnumbertwo.com/DoctorWho/1.1/

Gephi

• Open Source• Create our own tools/algorithm• Create our own layouts• Portability (Java)• Fully customizable

• Updated Wiki/Blog (very active community)• Google Summer of Code • Database Connector• Standardize input (GEXF) (Think XML of Graphs)

• Also: GML, GDF, GraphML, Pajek NET, GraphViz DOT, CSV, UCINET DL, Tulip TPL, XGMML

Data

Les Miserables: co-appearance weighted network of characters in the novel Les Miserables

D3 - http://d3js.org/

Data Driven Documents Enter, Update, Exit Interactions Transitions

Big List of Examples (1900) http://christopheviau.com/d3list/index.html

SVG vs. Canvas or Vector vs. Raster

Canvas = Pixels Raster

SVG Points Lines Polygons

Vector

When Things Go Wrong….

Bowl of Spaghetti

Hairball

How to Improve Graph Readability

28

Graph Aesthetics

Reference(s) for slide: (Marriott, Purchase, Wybrow, & Goncu, 2012)

Curved Lines

Reference for slide: (Xu, Rooney, Passmore, and Ham, 2012)

Interaction

31

(Versus) Selecting/Manipulating Subgraphs

Reference(s) for slide: (McGuffin & Jurisica, 2009)

32

Manipulation

B. Display labelsC. Change glyphD. Invert selectionE. Layout -

LinearizedF. Removed from

networkG. Layout –

CircularizedH. Nodes collapsedReference(s) for slide: (McGuffin & Jurisica, 2009)

33

Popup Widget or Hotbox

Ctrl-click selection and manipulation

Reference(s) for slide: (McGuffin & Jurisica, 2009)

Transform

Transform the Graph

http://www.boxnumbertwo.com/PitterPatter/1.2/

Chord/Circular Diagram (Alternative)

Étienne-Jules Marey - La method graphique (Alternative)

Adjacency Matrix

http://bost.ocks.org/mike/miserables/

Convex Hulls

40

Overlapper

Reference(s) for slide: (Theron, Santamaria, Garcia, Gomez, & Paz-Madrid, 2007)

Edge Reduction/Overlap

42

Confluent Drawings

Edge Overlap can be a disorienting aesthetic property

Reference(s) for slide: (Dickerson, et al., 2005)

43

Skeleton Edge Bundling

Reference(s) for slide: (Ersoy, Hurter, Paulovich, Cantareiro, & Telea, 2011)

44

Force-Based Edge Grouping/Repulsion

Reference(s) for slide: (Selassie, et al., 2011)

45

Interaction of LOD

Reference(s) for slide: (Zinsmaier, et al., 2012)

Edge Compression

Edge Compression Techniques

Reference(s) for slide: (Dwyer, Richie, Marriot, and Mears, 2013)

http://boxnumbertwo.com/D3Simple/NetworkX/1.6/index.php?sizeOfGraph=60&ProbabilityOfEdge=.03

My Research

Bertin’s Retinal/Visual Variables

Bertin’s Retinal Variables

Aesthetic Description Example

Opacity of node Texture (association, selection, order)Opacity of the vertices are reduced to highlight the skeleton structure of the

network topology.

Degree/Log-degree

Size (selection, order, quantity) Vertex size vary base on the number of connection or the logarithm of number

of connection, node centrality.

Glyphs Shape (association)Glyphs are used in association with

connectivity with a table being provided to highlight the most highly

connected vertices.

Link Aesthetics

Aesthetic Description Example

Edge directionality FlowShowcasing the directionality of

information flow.

Color of edges Contiguous neighborsNeighbor’s categories in the same cluster [10] have the same distinct

coloring.

Curvature of edges Lombardi drawing [11]Edges are curved to provide more spacing and intern creates a less

cluttered display.

Gestalt Principles

Aesthetic Description Example

Color of nodes Grouping by similarityNodes that have the same color will be

cognitively grouped together.

Inner/Inter-distance bias Group by proximityNodes that are in close proximity to one

another will be seen as a single community.

Convex hulls Group by closureProviding bounding boxes or convex hulls

will encapsulate nodes in the same clusters.

Future Meetups

R/Ggplot2? More D3.js? Aesthetics? Need help! and a co-organizers! Help get visualizations out there! Suggestions/Comments?

Email: dudaspm@gmail.com