Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Visualizing Networks

1.286 visualizaciones

Publicado el

An hour long talk for UMiami on network stats and vis methods.

Publicado en: Datos y análisis

Visualizing Networks

  1. 1. Visualizing Networks Lynn Cherny Visiting Knight Chair, UMiami, School of Comm @arnicas / 23 Oct 2015
  2. 2. The  Hairball:  A  Metaphor  for   Complexity h6p://,%2060-­‐69%20(2003).pdf
  3. 3. h6p://­‐10842349-­‐the-­‐hidden-­‐power-­‐of-­‐networks
  4. 4. Release by Joint Economic Committee minority Republicans led by Boehner (2010), Iliinsky & Steele fig 4-14 Neither Exploratory Nor Explanatory: Political. 4
  5. 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. 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. 7. WHAT  IS  A  NETWORK? It’s  not  a  visualizaBon.    Think  of  it  as  a  data  structure.
  8. 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. 9. A  quick  look  at  some  data… h6ps://­‐csv-­‐converter-­‐to-­‐network/  
  10. 10. Lane  Harrison:  h6p://­‐visualizaBons/
  11. 11. 11h6p://­‐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. 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. 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. 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. 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://
  16. 16. The  Threat  of  Hub-­‐Loss Albert-­‐László  Barabási  and  Eric  Bonabeau,  Scale-­‐Free  Networks,  2003.h6p://­‐free-­‐ networks
  17. 17. VisualizaBon  Aside:  If  Some  Names  are  Huge,   the  Others  are  Invisible-­‐? 17 Gephi  Panel CorrecBng  for  text  size  by  degree  display  issue
  18. 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:// Lusseau  and  Newman.  h6p:// PMC1810112/pdf/15801609.pdf
  19. 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. 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:// h6p://
  21. 21. Pagerank Wikipedia  image
  22. 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://
  23. 23. You  can  even  do  it  in  your  browser  now… 23
  24. 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. 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. 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. 27. h6p://­‐collapsible.html Also  see  Ger  Hobbelt  D3:  h6p://
  28. 28. USING  THOSE  STATS Example 28
  29. 29. 29 NetworkX  is  a  python  lib,   Gephi  is  so^ware  we’ll  see     in  a  minute.
  30. 30. 30
  31. 31. 31
  32. 32. MATRIX  LAYOUTS  /  REPRESENTATIONS Let’s  do  other  representaBons  now…
  33. 33. h6p://
  34. 34. Real  social  networks  are   generally  quite  sparse. h6p://
  35. 35. 35 Tamara Munzner’s bookVisualization Analysis and Design (2014)
  36. 36. D3  demo  by  me  h6p://
  37. 37. 37 Readability:  Matrix  Be6er  (except  for   path  finding) Jean-Daniel Fekete
  38. 38. ARC  /  LINEAR  LAYOUTS
  39. 39. Philipp  Steinweber  and  Andreas  Koller   Similar  Diversity,  2007 For  a  D3  example  in  another  domain:  h6p://
  40. 40. Topics  in  Da  Vinci  Code  (by  me) 40 %202014-11-04%2020.45.02.png?dl=0 Lynn Cherny -
  41. 41. Hive  Plots D3:  h6p://
  43. 43. h6p:// Circos “If it's round, Circos can probably do it” TIL (shocking): It’s all perl code?!
  44. 44. A  Nice  UI  Improvement  -­‐  DifferenBate  Source/ DesBnaBon 44 Nikola Sander,
  45. 45. Hierarchical  Edge  Bundling  demo  by   @mbostock D3:  h6p:// "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. 46. ALGORITHMIC  LAYOUTS   Gephi  /  D3.js  /  Other  tools
  47. 47. 47 Gephi  (from
  48. 48. 48
  49. 49. Sample  Layout  Plugins  in  Gephi h6ps://­‐tutorial-­‐layouts.pdf
  50. 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://­‐tutorial-­‐layouts-­‐in-­‐gephi/
  51. 51. Dolphins  Social  Network 51 OpenOrd  +  “No  Overlap” ForceAtlas2
  52. 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. 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. 54. Gephi  Workflowsà  Sigma.js  /  D3…  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.
  55. 55. h6p://­‐ALB_PublicaBons/200705-­‐14_PNAS-­‐HumanDisease/Suppl/Goh_etal_poster.pdf
  56. 56. Sigma.js  version  of  the  Gephi  export  h6p://­‐disease-­‐network/ Movie:
  57. 57. 57By  me:  h6p://  
  59. 59. Conspiracy  Theorist  Mark  Lombardi Learning  from  Lombardi:   h6p://
  60. 60. Jeff  Heer:  h6p://­‐20111110-­‐GraphsAndTrees.pdf
  61. 61. Ger  Hobbelt  in  D3:  h6p:// Hybrid  Method:  Use  algorithmic  layout,  and  then   adjust  nodes  by  hand.  (Can  be  done  in  Gephi  or  D3.) Also read
  62. 62. 62
  63. 63. Minimize  Info:  Less  is  More 63 Color by important data value, sized by degree, no edges
  64. 64. 64h6ps://­‐networks/   Eigenvector Centrality BetweennessCentrality Check the Stats.
  65. 65. A  Nice  D3  tutorial  with  some  good  UI 65 Jim  Vallandingham     h6p://­‐to-­‐make-­‐an-­‐interacBve-­‐network-­‐visualizaBon/   Also  see  his  OpenVis  talk:  h6p://  
  66. 66. Demo  Based  on  That  Tutorial 66 Not online, http://localhost:8002/
  67. 67. Wrap it up on design...
  68. 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. 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
  70. 70. 70
  71. 71. 71
  72. 72. Thanks! @arnicas Slides will be on Slideshare:
  73. 73. A  Few  More  References Jeff  Heer  class  slides:  h6p:// courses/cs448b/w09/lectures/20090204-­‐ GraphsAndTrees.pdf   A  great  in-­‐progress  book  on  networks:  h6p://   Mark  Newman’s  new  book-­‐  NetWorks:  An   IntroducBon   Tutorial  on  Gephi:  h6ps://   Journal  of  Graph  Algorithms  and  ApplicaBons:   h6p://     Jim  Vallandingham’s  D3  network  tutorials:   h6p://­‐to-­‐ make-­‐an-­‐interacBve-­‐network-­‐visualizaBon/,   h6p:// bubble_charts_in_d3.html   Brian  Keegan’s  post  about  GamerGate  tweets   and  the  dangers  of  network  vis­‐15-­‐ Robert  Kosara’s  post:  h6p://­‐hairball   Lane  Harrison’s  post:  h6p:// 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