Visualizing Networks
10 likes2,276 views
This document provides an overview of visualizing networks and some key concepts for understanding network structure and relationships. It begins by defining what a network is as a data structure of entities and relationships. It then discusses common network measures like degree, betweenness, eigenvector centrality, and community detection algorithms. Examples are given of visualizing network data in node-link diagrams and matrices. The document emphasizes that network visualizations should be used alongside calculating network metrics to understand a network's structure.
Visualizing Networks
- 1. Visualizing Networks Lynn Cherny Visiting Knight Chair, UMiami, School of Comm @arnicas / lynn@cherny.com 23 Oct 2015
- 2. The Hairball: A Metaphor for Complexity h6p://www.nd.edu/~networks/PublicaBon%20Categories/01%20Review%20ArBcles/ScaleFree_ScienBfic%20Ameri%20288,%2060-‐69%20(2003).pdf
- 4. Release by Joint Economic Committee minority Republicans led by Boehner (2010), Iliinsky & Steele fig 4-14 Neither Exploratory Nor Explanatory: Political. 4
- 5. Redesign by Robert Palmer (Iliisnky & Steele fig 4-15) “By releasing your chart, instead of meaningfully educating the public, you willfully obfuscated an already complicated proposal.There is no simple proposal to solve this problem.You instead chose to shout ‘12! 16! 37! 9! 24!’ while we were trying to count something.” 5
- 6. Why Care About Networks? • Epidemiology • Trees/networks in biology • Clustering / recommendaBon systems • “Social network” so^ware • Community design: online and off • OrganizaBonal Design • Computer networks, phone networks, banks… • Another vis method -‐ for relaBonal data. 6
- 7. WHAT IS A NETWORK? It’s not a visualizaBon. Think of it as a data structure.
- 8. Data relaBonship: enBBes + relaBonships to other objects (node/edge, vertex/link) Nodes and Edges may have a6ributes, eg. gender, age, weight, tv prefs connecBon date, frequency of contact, type of exchange, direcBonality of relaBonship a6ributes may be calculated from network relaBons too
- 9. A quick look at some data… h6ps://marketplace.gephi.org/plugin/excel-‐csv-‐converter-‐to-‐network/
- 11. 11h6p://blog.visual.ly/network-‐visualizaBons/ Best! A User Study on Visualizing Directed Edges in Graphs” Danny Holten and Jarke J. van Wijk, 27th SIGCHI Conference on Human Factors in Computing Systems (Proceedings of CHI 2009),
- 12. 12 It’s a natural human trait to see visual similarity and proximity as meaningful. Be very careful about your display choices and layout methods!
- 13. Reading a network visualizaBon Look at this outlier case! There’s obviously something important going on here, structurally.... A ménage à trois over here MIS? Using a “random” Gephi layout on the dolphins Random!
- 14. SIMPLE CALCULATIONS ON NETWORKS CAN TELL YOU LOADS O^en you need to visualize the structure/role of the graph elements as part of the visualizaBon: So, do some simple math.
- 15. Degree (In, Out) “Degree” is a measure of the edges in (directed), out (directed), or total (in directed or undirected graphs) to a node “Hub” nodes have high in-‐degree. In scale-‐free networks, we see preferenBal a6achment to the popular kids. h6p://mlg.ucd.ie/files/summer/tutorial.pdf
- 16. The Threat of Hub-‐Loss Albert-‐László Barabási and Eric Bonabeau, Scale-‐Free Networks, 2003.h6p://www.scienBficamerican.com/arBcle.cfm?id=scale-‐free-‐ networks
- 17. VisualizaBon Aside: If Some Names are Huge, the Others are Invisible-‐? 17 Gephi Panel CorrecBng for text size by degree display issue
- 18. Betweenness A measure of connectedness between (sub)components of the graph “Betweenness centrality thus tends to pick out boundary individuals who play the role of brokers between communiBes.” h6p://en.wikipedia.org/wiki/Centrality#Betweenness_centrality Lusseau and Newman. h6p://www.ncbi.nlm.nih.gov/pmc/arBcles/ PMC1810112/pdf/15801609.pdf
- 19. 19 ? This one? Sized by Betweenness Judging By Eye Will Probably Be Wrong... Even be6er, download the stats and look at them yourself.
- 20. Eigenvector Centrality IntuiBon: A node is important if it is connected to other important nodes A node with a small number of influenBal contacts may outrank one with a larger number of mediocre contacts h6p://mlg.ucd.ie/files/summer/tutorial.pdf h6p://demonstraBons.wolfram.com/NetworkCentralityUsingEigenvectors/
- 22. Community DetecBon Algorithms E.g., the Louvain method, in Gephi as “Modularity.” Many layout algorithms help you intuit these structures, but don’t rely on percepBon of layout! h6p://en.wikipedia.org/wiki/File:Network_Community_Structure.png
- 23. You can even do it in your browser now… 23 http://bl.ocks.org/john-guerra/ecdde32ab4ad91a1a240
- 24. CitaBon: Lusseau D (2007) Why Are Male Social RelaBonships Complex in the Doubxul Sound Bo6lenose Dolphin PopulaBon?. PLoS ONE 2(4): e348. doi:10.1371/journal.pone.0000348
- 25. IdenBfying the role that animals play in their social networks (2004) D Lusseau, MEJ Newman Proceedings of the Royal Society of London. Series B: Biological Sciences
- 26. Eduarda Mendes Rodrigues, Natasa Milic-‐Frayling, Marc Smith, Ben Shneiderman, Derek Hansen, Group-‐in-‐a-‐box Layout for MulB-‐ faceted Analysis of CommuniBes. IEEE Third InternaBonal Conference on Social CompuBng, October 9-‐11, 2011. Boston, MA NodeXL excel plugin
- 27. h6p://mbostock.github.com/d3/talk/20111116/force-‐collapsible.html Also see Ger Hobbelt D3: h6p://bl.ocks.org/3616279
- 29. 29 http://blogger.ghostweather.com/2011/09/combing-through-infovis-twitter-network.html NetworkX is a python lib, Gephi is so^ware we’ll see in a minute.
- 31. 31
- 32. MATRIX LAYOUTS / REPRESENTATIONS Let’s do other representaBons now…
- 34. Real social networks are generally quite sparse. h6p://www.cise.ufl.edu/research/sparse/matrices/Newman/dolphins.html
- 35. 35 Tamara Munzner’s bookVisualization Analysis and Design (2014)
- 36. D3 demo by me h6p://www.ghostweather.com/essays/talks/networkx/adjacency.html
- 37. 37 Readability: Matrix Be6er (except for path finding) Jean-Daniel Fekete http://lamut.informatik.uni-wuerzburg.de/gd2014/data/uploads/gd2014-fekete-keynote.pdf
- 38. ARC / LINEAR LAYOUTS
- 39. Philipp Steinweber and Andreas Koller Similar Diversity, 2007 For a D3 example in another domain: h6p://tradearc.laserdeathstehr.com/
- 40. Topics in Da Vinci Code (by me) 40 https://www.dropbox.com/s/090vwj12kh3mu96/Screenshot %202014-11-04%2020.45.02.png?dl=0 Lynn Cherny - http://www.ghostweather.com/essays/talks/openvisconf/topic_arc_diagram/TopicArc.html
- 42. CIRCULAR / CHORD LAYOUTS
- 43. h6p://circos.ca/images/ Circos “If it's round, Circos can probably do it” TIL (shocking): It’s all perl code?!
- 44. A Nice UI Improvement -‐ DifferenBate Source/ DesBnaBon 44 Nikola Sander, http://www.global-migration.info/
- 45. Hierarchical Edge Bundling demo by @mbostock D3: h6p://bl.ocks.org/1044242 "Hierarchical Edge Bundles: VisualizaBon of Adjacency RelaBons in Hierarchical Data”, Danny Holten, IEEE TransacBons on VisualizaBon and Computer Graphics (TVCG; Proceedings of Vis/InfoVis 2006), Vol. 12, No. 5, Pages 741 -‐ 748, 2006.
- 46. ALGORITHMIC LAYOUTS Gephi / D3.js / Other tools
- 49. Sample Layout Plugins in Gephi h6ps://gephi.org/tutorials/gephi-‐tutorial-‐layouts.pdf
- 50. Gephi Plugin Layout Details Layout Complexity Graph Size Author Comment Circular O(N) 1 to 1M nodes Ma6 Groeninger Used to show distribuBon, ordered layout Radial Axis O(N) 1 to 1M nodes Ma6 Groeninger Show ordered groups (homophily) Force Atlas O(N²) 1 to 10K nodes Mathieu Jacomy Slow, but uses edge weight and few biases Force Atlas 2 O(N*log(N)) 1 to 1M nodes Mathieu Jacomy (does use weight) OpenOrd O(N*log(N)) 100 to 1M nodes S. MarBn, W. M. Brown, R. Klavans, and K. Boyack Focus on clustering (uses edge weight) Yifan Hu O(N*log(N)) 100 to 100K nodes Yifan Hu (no edge weight) Fruchterman-‐Rheingold O(N²) 1 to 1K nodes Fruchterman & Rheingold! ParBcle system, slow (no edge weight) GeoLayout O(N) 1 to 1M nodes Alexis Jacomy Uses Lat/Long for layout h6ps://gephi.org/2011/new-‐tutorial-‐layouts-‐in-‐gephi/
- 51. Dolphins Social Network 51 OpenOrd + “No Overlap” ForceAtlas2
- 52. 52 Weight 2: Force Atlas Weight 4: Force Atlas Weight 4: Yifan Hu Unweighted dolphins, Force Atlas Effect of An Artificial Weight on the Layout
- 53. Simple Orderings of Nodes in Circular Layout 53 Dolphins colored by modularity class (community) in Gephi “Dual Circle” layout with most popular dolphin in center Circular Layout ordered by Degree Sorted by Modularity
- 54. Gephi Workflowsà Sigma.js / D3… Gephi.org: Open source, runs on Mac, Linux, PC Output high quality images that are staBc (from Preview) or… Sigma.js : Will display a gexf gephi layout file with minimal work, using a plugin interpreter for sigma site export Also offers a force-‐directed layout plugin for graphs without x&y coords Does CANVAS drawing, not SVG D3: Export JSON from Gephi and load into D3 network layout — can calculate/layout your x/y coords (and other stats) in Gephi and then use them in a staBc layout in D3! Also see cola.js.
- 56. Sigma.js version of the Gephi export h6p://exploringdata.github.com/vis/human-‐disease-‐network/ Movie:
- 58. 58 FINAL DESIGN THOUGHTS… BY HAND? BY ALGORITHM-‐?
- 59. Conspiracy Theorist Mark Lombardi Learning from Lombardi: h6p://benfry.com/exd09/
- 60. Jeff Heer: h6p://hci.stanford.edu/courses/cs448b/f11/lectures/CS448B-‐20111110-‐GraphsAndTrees.pdf
- 61. Ger Hobbelt in D3: h6p://bl.ocks.org/3637711 Hybrid Method: Use algorithmic layout, and then adjust nodes by hand. (Can be done in Gephi or D3.) Also read http://bost.ocks.org/mike/example/#2
- 63. Minimize Info: Less is More 63 Color by important data value, sized by degree, no edges
- 64. 64h6ps://dhs.stanford.edu/visualizaBon/more-‐networks/ Eigenvector Centrality BetweennessCentrality Check the Stats.
- 65. A Nice D3 tutorial with some good UI 65 Jim Vallandingham h6p://flowingdata.com/2012/08/02/how-‐to-‐make-‐an-‐interacBve-‐network-‐visualizaBon/ Also see his OpenVis talk: h6p://vallandingham.me/abusing_the_force.html
- 66. Demo Based on That Tutorial 66 Not online, http://localhost:8002/
- 67. Wrap it up on design...
- 68. Design Reminders (1/2) Do data analysis / reducBon -‐ why would you want to show 1T of network data? Calculate and reveal important facts about node relaBonships. Make it interacBve -‐ details on demand. Help people find things in your network! (Search?) Show more on hover/click To o m uch d ata =Not alw ays go o d d ata science!
- 69. Design Reminders (2/2) Different layouts communicate different things to your viewer -‐ choose wisely. Take care: people will infer things from proximity/similarity even if it was not intended! Consider if it has to be a node-‐edge display at all: Is it the stats you care about? The important nodes who branch sub-‐communiBes? The ones with the most in/out links? The “top influencers”? 69
- 72. Thanks! @arnicas lynn@cherny.com Slides will be on Slideshare: http://www.slideshare.net/arnicas/presentations
- 73. A Few More References Jeff Heer class slides: h6p://hci.stanford.edu/ courses/cs448b/w09/lectures/20090204-‐ GraphsAndTrees.pdf A great in-‐progress book on networks: h6p:// barabasilab.neu.edu/networksciencebook/ Mark Newman’s new book-‐ NetWorks: An IntroducBon Tutorial on Gephi: h6ps://t.co/ZsMekjkfMt Journal of Graph Algorithms and ApplicaBons: h6p://jgaa.info/home.html Jim Vallandingham’s D3 network tutorials: h6p://flowingdata.com/2012/08/02/how-‐to-‐ make-‐an-‐interacBve-‐network-‐visualizaBon/, h6p://vallandingham.me/ bubble_charts_in_d3.html Brian Keegan’s post about GamerGate tweets and the dangers of network vis ww.brianckeegan.com/2014/10/my-‐15-‐ Robert Kosara’s post: h6p:// eagereyes.org/techniques/graphs-‐hairball Lane Harrison’s post: h6p://blog.visual.ly/ network-‐visualizaBons/ MS Lima’s book Visual Complexity and site A couple arBcles on community structure: Overlapping Community DetecBon in Networks: State of the Art and ComparaBve Study by Jierui Xie, Stephen Kelley, Boleslaw K. Szymanski Empirical Comparison of Algorithms for Network Community DetecBon by Leskovec, Lang, Mahoney My posts on NetworkX with D3 and Twi6er network vis with Gephi