NETWORK GRAPHS
N’AT
Patrick M. Dudas
@pdudders
Who Am I?
(And in the corner..) AI vs. IA
 Artificial
Intelligence
 John
McCarthy
 Intelligence Amplification
 Man-Computer Symb...
Infographic
Infographic, Model, or
Visualization
Model
http://fold.it/portal/info/about - University of Washington
Visuali...
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
...
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....
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
• ...
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 (1...
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
Graph Aesthetics
28
Reference(s) for slide: (Marriott, Purchase, Wybrow, & Goncu, 2012)
Curved Lines
Reference for slide: (Xu, Rooney, Passmore, and Ham, 2012)
Interaction
(Versus) Selecting/Manipulating
Subgraphs31
Reference(s) for slide: (McGuffin & Jurisica, 2009)
Manipulation
B. Display labels
C. Change glyph
D. Invert selection
E. Layout - Linearized
F. Removed from
network
G. Layou...
Popup Widget or Hotbox
 Ctrl-click selection and manipulation
33
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
Overlapper
40
Reference(s) for slide: (Theron, Santamaria, Garcia, Gomez, & Paz-Madrid, 2007)
Edge Reduction/Overlap
Confluent Drawings
 Edge Overlap can
be a disorienting
aesthetic property
42
Reference(s) for slide: (Dickerson, et al., ...
Skeleton Edge Bundling
43
Reference(s) for slide: (Ersoy, Hurter, Paulovich, Cantareiro, & Telea, 2011)
Force-Based Edge
Grouping/Repulsion44
Reference(s) for slide: (Selassie, et al., 2011)
Interaction of LOD
45
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/Networ
kX/1.6/index.php?sizeOfGraph=60&Probabi
lityOfEdge=.03
My Research
Bertin’s Retinal/Visual Variables
Bertin’s Retinal Variables
Aesthetic Description Example
Opacity of node Texture (association, selection, order)
Opacity o...
Link Aesthetics
Aesthetic Description Example
Edge directionality Flow
Showcasing the directionality of
information flow.
...
Gestalt Principles
Aesthetic Description Example
Color of nodes Grouping by similarity
Nodes that have the same color will...
Future Meetups
 R/Ggplot2?
 More D3.js?
 Aesthetics?
 Need help! and a co-organizers!
 Help get visualizations out th...
Upcoming SlideShare
Loading in...5
×

Network graphs n’at

220

Published on

network graphs, d3

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
220
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Network graphs n’at

  1. 1. NETWORK GRAPHS N’AT Patrick M. Dudas @pdudders
  2. 2. Who Am I?
  3. 3. (And in the corner..) AI vs. IA  Artificial Intelligence  John McCarthy  Intelligence Amplification  Man-Computer Symbiosis  William Ross Ashby  J.C.R. Licklider
  4. 4. Infographic Infographic, Model, or Visualization Model http://fold.it/portal/info/about - University of Washington Visualization
  5. 5. Data Visualization (Meetup) Art Data Coding UI/UX Github: https://github.com/dudaspm/Pittsburgh-Data-Visualization
  6. 6. Network Graphs
  7. 7. What’s in a Name  Network graph  In/Directed Graph  Force-Directed Graph  Force-Based Graph  Node-link Diagram
  8. 8. 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
  9. 9. Terminology 101
  10. 10. Terminology 101
  11. 11. Terminology 101
  12. 12. Terminology 101
  13. 13. Sociometry/ Network Graph Theory
  14. 14. Sociometry
  15. 15. Strong/Weak Ties  Mark Granovetter  Strong ties = close family  Weak ties = co-workers
  16. 16. 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.
  17. 17. Bridges/Structural Holes
  18. 18. Network Graph Theory
  19. 19. Degree Centrality/Groups  Degree/In-degree/Out-degree  Communities  Modularity http://boxnumbertwo.com/DoctorWho/1.1/
  20. 20. 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
  21. 21. Data  Les Miserables: co-appearance weighted network of characters in the novel Les Miserables
  22. 22. D3 - http://d3js.org/  Data Driven Documents  Enter, Update, Exit  Interactions  Transitions  Big List of Examples (1900)  http://christopheviau.com/d3list/index.html
  23. 23. SVG vs. Canvas or Vector vs. Raster  Canvas = Pixels  Raster  SVG  Points  Lines  Polygons  Vector
  24. 24. When Things Go Wrong….
  25. 25. Bowl of Spaghetti
  26. 26. Hairball
  27. 27. How to Improve Graph Readability
  28. 28. Graph Aesthetics 28 Reference(s) for slide: (Marriott, Purchase, Wybrow, & Goncu, 2012)
  29. 29. Curved Lines Reference for slide: (Xu, Rooney, Passmore, and Ham, 2012)
  30. 30. Interaction
  31. 31. (Versus) Selecting/Manipulating Subgraphs31 Reference(s) for slide: (McGuffin & Jurisica, 2009)
  32. 32. Manipulation B. Display labels C. Change glyph D. Invert selection E. Layout - Linearized F. Removed from network G. Layout – Circularized H. Nodes collapsed 32 Reference(s) for slide: (McGuffin & Jurisica, 2009)
  33. 33. Popup Widget or Hotbox  Ctrl-click selection and manipulation 33 Reference(s) for slide: (McGuffin & Jurisica, 2009)
  34. 34. Transform
  35. 35. Transform the Graph http://www.boxnumbertwo.com/PitterPatter/1.2/
  36. 36. Chord/Circular Diagram (Alternative)
  37. 37. Étienne-Jules Marey - La method graphique (Alternative)
  38. 38. Adjacency Matrix http://bost.ocks.org/mike/miserables/
  39. 39. Convex Hulls
  40. 40. Overlapper 40 Reference(s) for slide: (Theron, Santamaria, Garcia, Gomez, & Paz-Madrid, 2007)
  41. 41. Edge Reduction/Overlap
  42. 42. Confluent Drawings  Edge Overlap can be a disorienting aesthetic property 42 Reference(s) for slide: (Dickerson, et al., 2005)
  43. 43. Skeleton Edge Bundling 43 Reference(s) for slide: (Ersoy, Hurter, Paulovich, Cantareiro, & Telea, 2011)
  44. 44. Force-Based Edge Grouping/Repulsion44 Reference(s) for slide: (Selassie, et al., 2011)
  45. 45. Interaction of LOD 45 Reference(s) for slide: (Zinsmaier, et al., 2012)
  46. 46. Edge Compression
  47. 47. Edge Compression Techniques Reference(s) for slide: (Dwyer, Richie, Marriot, and Mears, 2013)
  48. 48. http://boxnumbertwo.com/D3Simple/Networ kX/1.6/index.php?sizeOfGraph=60&Probabi lityOfEdge=.03 My Research
  49. 49. Bertin’s Retinal/Visual Variables
  50. 50. 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.
  51. 51. Link Aesthetics Aesthetic Description Example Edge directionality Flow Showcasing the directionality of information flow. Color of edges Contiguous neighbors Neighbor’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.
  52. 52. Gestalt Principles Aesthetic Description Example Color of nodes Grouping by similarity Nodes that have the same color will be cognitively grouped together. Inner/Inter-distance bias Group by proximity Nodes that are in close proximity to one another will be seen as a single community. Convex hulls Group by closure Providing bounding boxes or convex hulls will encapsulate nodes in the same clusters.
  53. 53. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×