Visualizing Networks by Lynn Cherny

1. Visualizing Networks
Lynn Cherny
@arnicas
4 Nov 2014

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

3. h6p://www.linkedin.com/today/post/arBcle/20121016185655-­‐10842349-­‐the-­‐hidden-­‐power-­‐of-­‐networks

4. Release by Joint Economic Committee minority Republicans led by Boehner
(2010), Iliinsky & Steele fig 4-14 4

5. Release by Joint Economic Committee minority Republicans led by Boehner
(2010), Iliinsky & Steele fig 4-14
Neither Exploratory Nor Explanatory:
Political.
4

6. Redesign by Robert Palmer
(Iliisnky & Steele fig 4-15) 5

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

8. WHAT
IS
A
NETWORK?
It’s
not
a
visualizaBon.
Think
of
it
as
a
data
structure.

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

10. Lane
Harrison:
h6p://blog.visual.ly/network-­‐visualizaBons/

11. Lane
Harrison:
h6p://blog.visual.ly/network-­‐visualizaBons/

12. Lane
Harrison:
h6p://blog.visual.ly/network-­‐visualizaBons/

13. 9h6p://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),

14. 10

15. 10

16. 10

17. 10
It’s
a
natural
human
trait
to
see
visual
similarity
and
proximity
as
meaningful.
Be
very
careful
about
your
display
choices
and
layout
methods!

18. Reading
a
network
visualizaBon
There’s obviously
something important
going on here,
structurally....

19. Reading
a
network
visualizaBon
Look at this outlier case!
There’s obviously
something important
going on here,
structurally....

20. Reading
a
network
visualizaBon
Look at this outlier case!
There’s obviously
something important
going on here,
structurally....
A ménage à
trois over here

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

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

23. 12
TOOLS
AND
CONCEPTS
FOR
TODAY
CreaBng
network
layouts...

24. 13
Gephi
(and
a
li6le
D3)

25. J
BerBn:
Semiology
of
Graphics
BerBn,
J.
Semiology
of
Graphics:
Diagrams,
Networks,
Maps
(1967)
Linear
Circular
Irregular
Regular
(Tree)
3D
Matrix
/
BiparBte

26. J
BerBn:
Semiology
of
Graphics
BerBn,
J.
Semiology
of
Graphics:
Diagrams,
Networks,
Maps
(1967)
Linear
Circular
Irregular
Regular
(Tree)
3D
Matrix
/
BiparBte

27. Algorithmic
Approaches
Frank
van
Ham
talk
slides:
h6p://bit.ly/s6udpy

28. MATRIX
LAYOUTS
/
REPRESENTATIONS

29. h6p://barabasilab.neu.edu/networksciencebook/download/network_science_October_2012.pdf

30. Real
social
networks
are
generally
quite
sparse.
h6p://www.cise.ufl.edu/research/sparse/matrices/Newman/dolphins.html

31. D3
demo
by
me
h6p://www.ghostweather.com/essays/talks/networkx/adjacency.html

32. D3
demo
by
me
h6p://www.ghostweather.com/essays/talks/networkx/adjacency.html

33. 20
Readability:
Matrix
Be6er
(except
for
path
finding)
Jean-Daniel Fekete http://lamut.informatik.uni-wuerzburg.de/gd2014/data/uploads/gd2014-fekete-keynote.pdf

34. ARC
/
LINEAR
LAYOUTS

35. Philipp
Steinweber
and
Andreas
Koller
Similar
Diversity,
2007
For
a
D3
example
in
another
domain:
h6p://tradearc.laserdeathstehr.com/

36. Topics
in
Da
Vinci
Code
(by
me)
23
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

37. Topics
in
Da
Vinci
Code
(by
me)
23
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

38. Hive
Plots
D3:
h6p://bost.ocks.org/mike/hive/

39. CIRCULAR
/
CHORD
LAYOUTS

40. h6p://circos.ca/images/
Circos
“If it's round, Circos can
probably do it”

41. h6p://circos.ca/images/
Circos
“If it's round, Circos can
probably do it”
TIL (shocking): It’s all perl code?!

42. h6p://www.ghostweather.com/essays/talks/networkx/chord.html

43. h6p://www.ghostweather.com/essays/talks/networkx/chord.html

44. A
Nice
UI
Improvement
-­‐
DifferenBate
Source/
DesBnaBon
28
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. SIMPLE
CALCULATIONS
ON
NETWORKS
CAN
TELL
YOU
LOADS
Oven
you
need
to
visualize
the
structure/role
of
the
graph
elements
as
part
of
the
visualizaBon:
So,
do
some
simple
math.

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

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

49. VisualizaBon
Aside:
If
Some
Names
are
Huge,
the
Others
are
Invisible-­‐?
33
CorrecBng
for
text
size
by
degree
display
issue

50. VisualizaBon
Aside:
If
Some
Names
are
Huge,
the
Others
are
Invisible-­‐?
33
Gephi
Panel
CorrecBng
for
text
size
by
degree
display
issue

51. VisualizaBon
Aside:
If
Some
Names
are
Huge,
the
Others
are
Invisible-­‐?
33
Gephi
Panel
CorrecBng
for
text
size
by
degree
display
issue

52. VisualizaBon
Aside:
If
Some
Names
are
Huge,
the
Others
are
Invisible-­‐?
33
Gephi
Panel
CorrecBng
for
text
size
by
degree
display
issue

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

54. 35
Judging
By
Eye
Will
Probably
Be
Wrong...

55. 35
? This one?
Judging
By
Eye
Will
Probably
Be
Wrong...

56. 35
? This one?
Sized
by
Betweenness
Judging
By
Eye
Will
Probably
Be
Wrong...

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

58. Pagerank
Wikipedia
image

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

60. You
can
even
do
it
in
your
browser
now…
39
http://bl.ocks.org/john-guerra/ecdde32ab4ad91a1a240

61. You
can
even
do
it
in
your
browser
now…
39
http://bl.ocks.org/john-guerra/ecdde32ab4ad91a1a240

62. CitaBon:
Lusseau
D
(2007)
Why
Are
Male
Social
RelaBonships
Complex
in
the
Doub|ul
Sound
Bo6lenose
Dolphin
PopulaBon?.
PLoS
ONE
2(4):
e348.
doi:10.1371/journal.pone.0000348

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

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

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

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

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

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

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

70. h6p://mbostock.github.com/d3/talk/20111116/force-­‐collapsible.html Also
see
Ger
Hobbelt
D3:
h6p://bl.ocks.org/3616279

71. h6p://mbostock.github.com/d3/talk/20111116/force-­‐collapsible.html Also
see
Ger
Hobbelt
D3:
h6p://bl.ocks.org/3616279

72. ALGORITHMIC
LAYOUTS
Gephi
/
D3.js
/
Other
tools

73. Gephi
à
Sigma.js
/
D3
Gephi.org:
Open
source,
runs
on
Mac,
Linux,
PC
Can
be
run
from
a
python-­‐esque
console
plugin
or
UI
Can
be
run
“headless”
for
layouts
with
Java
or
Python
(I
have
code
for
this)
Plugins
include
a
Neo4j
graph
db
access,
and
streaming
support
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
Export
JSON
from
Gephi
and
load
into
D3
network
layout

74. h6p://www.barabasilab.com/pubs/CCNR-­‐ALB_PublicaBons/200705-­‐14_PNAS-­‐HumanDisease/Suppl/Goh_etal_poster.pdf

75. Sigma.js
version
of
the
Gephi
export
h6p://exploringdata.github.com/vis/human-­‐disease-­‐network/
Movie:

76. Sigma.js
version
of
the
Gephi
export
h6p://exploringdata.github.com/vis/human-­‐disease-­‐network/
Movie:

77. Sample
Layout
Plugins
in
Gephi
h6ps://gephi.org/tutorials/gephi-­‐tutorial-­‐layouts.pdf

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

79. Dolphins
Again
50
OpenOrd
+
“No
Overlap” ForceAtlas2

80. Dolphins
Again
50
OpenOrd
+
“No
Overlap” ForceAtlas2

81. Dolphins
Again
50
OpenOrd
+
“No
Overlap” ForceAtlas2

82. 51
Weight
2:
Force
Atlas Weight
4:
Force
Atlas
Unweighted
dolphins,
Force
Atlas

83. 51
Weight
2:
Force
Atlas Weight
4:
Force
Atlas Weight
4:
Yifan
Hu
Unweighted
dolphins,
Force
Atlas

84. Nick
Diakapolous:
h6p://nad.webfacBonal.com/ntap/graphscale/
h6ps://docs.google.com/spreadsheet/ccc?
key=0AtvlFoSBUC5kdEZJNVFySG9wSHZka0NsOT
ZDSkt3Nnc#gid=0
Canvas/SVG
benchmarks
from
the
d3.js
group:

85. Nick
Diakapolous:
h6p://nad.webfacBonal.com/ntap/graphscale/
h6ps://docs.google.com/spreadsheet/ccc?
key=0AtvlFoSBUC5kdEZJNVFySG9wSHZka0NsOT
ZDSkt3Nnc#gid=0
Canvas/SVG
benchmarks
from
the
d3.js
group:

86. 53
FINAL
DESIGN
THOUGHTS…
BY
HAND?
BY
ALGORITHM-­‐?

87. Jeff
Heer:
h6p://hci.stanford.edu/courses/cs448b/f11/lectures/CS448B-­‐20111110-­‐GraphsAndTrees.pdf

88. Conspiracy
Theorist
Mark
Lombardi
Learning
from
Lombardi:
h6p://benfry.com/exd09/

89. Conspiracy
Theorist
Mark
Lombardi
Learning
from
Lombardi:
h6p://benfry.com/exd09/

90. J.
BerBn
Again…
BerBn,
J.
Semiology
of
Graphics:
Diagrams,
Networks,
Maps
(1967)

91. Age Groups and Movement to/from Paris to Rural Spots

92. (P)
Paris
(Z)
Paris
Suburbs
(+50)
Communes
of
>50K
(+10)
Communes
of
>10K
(-­‐10)
Communes
of
<10K
(R)
Rural

93. Ger
Hobbelt
in
D3:
h6p://bl.ocks.org/3637711
Hybrid
Method:
Use
algorithmic
layout,
and
then
adjust
nodes
by
hand.

94. Minimize
Info:
Less
is
More
60
Color by important data value, sized by degree, no edges

95. 61
http://www.ghostweather.com/essays/talks/openvisconf/topic_docs_network/

96. 61
http://www.ghostweather.com/essays/talks/openvisconf/topic_docs_network/

97. Brian
Keegan’s
“15
Minutes
of
Fame
as
a
B-­‐List
GamerGate
Celebrity”
62
http://www.brianckeegan.com/2014/10/my-15-minutes-of-fame-as-a-b-list-gamergate-celebrity/

98. Brian
Keegan’s
“15
Minutes
of
Fame
as
a
B-­‐List
GamerGate
Celebrity”
62
http://www.brianckeegan.com/2014/10/my-15-minutes-of-fame-as-a-b-list-gamergate-celebrity/

99. Brian
Keegan’s
“15
Minutes
of
Fame
as
a
B-­‐List
GamerGate
Celebrity”
62
http://www.brianckeegan.com/2014/10/my-15-minutes-of-fame-as-a-b-list-gamergate-celebrity/
Actually:

100. Wrap it up on design...

101. Reminders
Do
data
analysis
/
reducBon
-­‐
why
would
you
want
to
show
1T
of
network
data?
Calculate
and
reveal
important
facts
about
node
relaBonships.
Consider
your
visual
encodings:
–visualizaBon,
not
data
vomit.
Make
it
interacBve
-­‐
details
on
demand.
Help
people
find
things
in
your
network!
(Search?)
Show
more
on
hover/click

102. Reminders
Do
data
analysis
/
reducBon
-­‐
why
would
you
want
to
show
1T
of
network
data?
Calculate
and
reveal
important
facts
about
node
relaBonships.
Consider
your
visual
encodings:
–visualizaBon,
not
data
vomit.
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!

103. More
Reminders!
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
“network”
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?
Graph
those
instead.
65

104. The
Map
is
Not
the
Territory…
Forest
Pi6s
(thanks
to
Noah
Friedkin)
h6p://www.analyBctech.com/networks/pi6s.htm

105. The
Map
is
Not
the
Territory…
Forest
Pi6s
(thanks
to
Noah
Friedkin)
h6p://www.analyBctech.com/networks/pi6s.htm

106. Thanks!
@arnicas
lynn@ghostweather.com

107. 68
http://www.ghostweather.com/workshops/nyc_visdata.html
lynn @ ghostweather.com
Dec 11-12, NYC

108. 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
Eyeo
FesBval
videos
from
Moritz
Stefaner,
Manuel
Lima,
Stefanie
Posavec
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
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
Jason
Sundram’s
tool
to
drive
Gephi
layout
from
command
line:
h6ps://github.com/
jsundram/pygephi
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