Upload
dudaspm
View
189
Download
0
Tags:
Embed Size (px)
DESCRIPTION
network graphs, d3
Citation preview
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)
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: [email protected]