Recommended
Recommended
More Related Content
Similar to Network graphs n’at
Similar to Network graphs n’at (20)
Recently uploaded
Recently uploaded (20)
Network graphs n’at
- 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
- 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
- 10. Terminology 101
- 11. Terminology 101
- 12. Terminology 101
- 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.
- 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….
- 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
- 37. Étienne-Jules Marey - La method graphique (Alternative)
- 39. Convex Hulls
- 40. Overlapper 40 Reference(s) for slide: (Theron, Santamaria, Garcia, Gomez, & Paz-Madrid, 2007)
- 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)
- 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