network graphs, d3

1. NETWORK GRAPHS
N’AT
Patrick M. Dudas
@pdudders

2. Who Am I?

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. Infographic
Infographic, Model, or
Visualization
Model
http://fold.it/portal/info/about - University of Washington
Visualization

5. Data Visualization (Meetup)
Art
Data
Coding
UI/UX
Github: https://github.com/dudaspm/Pittsburgh-Data-Visualization

6. Network Graphs

7. What’s in a Name
 Network graph
 In/Directed Graph
 Force-Directed Graph
 Force-Based Graph
 Node-link Diagram

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. Terminology 101

10. Terminology 101

11. Terminology 101

12. Terminology 101

13. Sociometry/
Network Graph Theory

14. Sociometry

15. Strong/Weak Ties
 Mark Granovetter
 Strong ties = close family
 Weak ties = co-workers

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. Bridges/Structural Holes

18. Network Graph Theory

19. Degree Centrality/Groups
 Degree/In-degree/Out-degree
 Communities
 Modularity
http://boxnumbertwo.com/DoctorWho/1.1/

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. Data
 Les Miserables: co-appearance weighted
network of characters in the novel Les
Miserables

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. SVG vs. Canvas or Vector vs. Raster
 Canvas = Pixels
 Raster
 SVG
 Points
 Lines
 Polygons
 Vector

24. When Things Go Wrong….

25. Bowl of Spaghetti

26. Hairball

27. How to Improve Graph
Readability

28. Graph Aesthetics
28
Reference(s) for slide: (Marriott, Purchase, Wybrow, & Goncu, 2012)

29. Curved Lines
Reference for slide: (Xu, Rooney, Passmore, and Ham, 2012)

30. Interaction

31. (Versus) Selecting/Manipulating
Subgraphs31
Reference(s) for slide: (McGuffin & Jurisica, 2009)

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. Popup Widget or Hotbox
 Ctrl-click selection and manipulation
33
Reference(s) for slide: (McGuffin & Jurisica, 2009)

34. Transform

35. Transform the Graph
http://www.boxnumbertwo.com/PitterPatter/1.2/

36. Chord/Circular Diagram
(Alternative)

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

38. Adjacency Matrix
http://bost.ocks.org/mike/miserables/

39. Convex Hulls

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

41. Edge Reduction/Overlap

42. Confluent Drawings
 Edge Overlap can
be a disorienting
aesthetic property
42
Reference(s) for slide: (Dickerson, et al., 2005)

43. Skeleton Edge Bundling
43
Reference(s) for slide: (Ersoy, Hurter, Paulovich, Cantareiro, & Telea, 2011)

44. Force-Based Edge
Grouping/Repulsion44
Reference(s) for slide: (Selassie, et al., 2011)

45. Interaction of LOD
45
Reference(s) for slide: (Zinsmaier, et al., 2012)

46. Edge Compression

47. Edge Compression Techniques
Reference(s) for slide: (Dwyer, Richie, Marriot, and Mears, 2013)

48. http://boxnumbertwo.com/D3Simple/Networ
kX/1.6/index.php?sizeOfGraph=60&Probabi
lityOfEdge=.03
My Research

49. Bertin’s Retinal/Visual Variables

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. 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. 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. 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