Downloaded 19 times
![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.](https://image.slidesharecdn.com/networkgraphsnat-140403181543-phpapp01/85/Network-graphs-n-at-51-320.jpg)
Network graphs n’at
- 1. NETWORK GRAPHS N’AT Patrick M.Dudas @pdudders
- 2.
- 3. (And in thecorner..) 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.
- 7. What’s in aName Network graph In/Directed Graph Force-Directed Graph Force-Based Graph Node-link Diagram
- 8. Why Networks areCool Types: User -> User (Social Networks) Cosine Similarity (Documents) Co-Authorship Networks Co-Citation Networks Power/Telephone/Network Grid Biological Networks Ontology/Taxonomy
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15. Strong/Weak Ties MarkGranovetter Strong ties = close family Weak ties = co-workers
- 16. Homophily/Triadic Closure Birdsof 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.
- 18.
- 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. Canvasor Vector vs. Raster Canvas = Pixels Raster SVG Points Lines Polygons Vector
- 24. When Things GoWrong….
- 25.
- 26.
- 27. How to ImproveGraph Readability
- 28. Graph Aesthetics 28 Reference(s) forslide: (Marriott, Purchase, Wybrow, & Goncu, 2012)
- 29. Curved Lines Reference forslide: (Xu, Rooney, Passmore, and Ham, 2012)
- 30.
- 31. (Versus) Selecting/Manipulating Subgraphs31 Reference(s) forslide: (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 orHotbox Ctrl-click selection and manipulation 33 Reference(s) for slide: (McGuffin & Jurisica, 2009)
- 34.
- 35.
- 36.
- 37. Étienne-Jules Marey -La method graphique (Alternative)
- 38.
- 39.
- 40. Overlapper 40 Reference(s) for slide:(Theron, Santamaria, Garcia, Gomez, & Paz-Madrid, 2007)
- 41.
- 42. Confluent Drawings EdgeOverlap 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) forslide: (Selassie, et al., 2011)
- 45. Interaction of LOD 45 Reference(s)for slide: (Zinsmaier, et al., 2012)
- 46.
- 47. Edge Compression Techniques Reference(s)for slide: (Dwyer, Richie, Marriot, and Mears, 2013)
- 48.
- 49.
- 50. Bertin’s Retinal Variables AestheticDescription 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 DescriptionExample 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 DescriptionExample 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