Plotly plot of a Facebook network

We illustrate how an igraph Graph can be plotted with Plotly. First we generate the Plotly plot of the network whose edges are read from a file. Then we detect the communities in this network, and plot them with a Plotly colorscale.

In [1]:
from igraph import *

Read the edge file facebook_combined.txt, downloaded from SNAP Stanford University.

In [2]:
G=read('facebook_combined.txt', directed=False)
In [3]:
E=[e.tuple for e in G.es]# list of edges
print 'number of edges: ', len(E)
number of edges:  88234
In [4]:
N=len(G.vs)# number of vertices
print 'number of vertices:', N
number of vertices: 4039
In [ ]:
layt=G.layout('fr')  #set graph layout; 'fr'=Fruchterman-Reingold force-directed algorithm

Set data for Plotly plot:

In [ ]:
Xn=[layt[k][0] for k in range(N)]
Yn=[layt[k][1] for k in range(N)]
Xe=[]
Ye=[]
for edge in E:
    Xe+=[layt[edge[0]][0],layt[edge[1]][0], None]
    Ye+=[layt[edge[0]][1],layt[edge[1]][1], None]  

Plotly colorscale to plot communities:

In [ ]:
custom_cs=[[0.0, '#FFFFE0'],
 [0.06666666666666667, '#FFEEC1'],
 [0.13333333333333333, '#FFDEA7'],
 [0.2, '#FFCB91'],
 [0.26666666666666666, '#FFB880'],
 [0.3333333333333333, '#FFA474'],
 [0.4, '#FE906A'],
 [0.4666666666666667, '#F87D64'],
 [0.5333333333333333, '#F06A5E'],
 [0.6, '#E75758'],
 [0.6666666666666666, '#DB4551'],
 [0.7333333333333333, '#CF3447'],
 [0.8, '#C0223B'],
 [0.8666666666666667, '#B0122C'],
 [0.9333333333333333, '#9E051B'],
 [1.0, '#8B0000']]
In [ ]:
labels=range(N)#  labels are displayed when hovering the mouse over vertices(nodes)
In [ ]:
import plotly.plotly as py
from plotly.graph_objs import *
import plotly.tools as tls 

Define traces for edges and nodes:

In [ ]:
trace1=Scatter(x=Xe,
               y=Ye,
               mode='lines',
               line=Line(color='rgb(210,210,210)', width=0.5),
               hoverinfo='none'
               )
trace2=Scatter(x=Xn,
               y=Yn,
               mode='markers',
               name='Fb',
               marker=Marker(symbol='dot',
                             size=5, 
                             color='#C0223B',
                             line=Line(color='rgb(50,50,50)', width=0.5)
                             ),
               text=labels,
               hoverinfo='text'
               )
In [ ]:
axis=dict(showline=False, # hide axis line, grid, ticklabels and  title
          zeroline=False,
          showgrid=False,
          showticklabels=False,
          title='' 
          )
In [ ]:
title1= "Facebook network<br> Data:"+\
       "<a href='https://snap.stanford.edu/data/egonets-Facebook.html'> [1]</a>"
In [ ]:
width=700
height=700
#Plotly plot layout!  Don't confuse with Graph.layout() in igraph 
layout=Layout(title=title1,  
    font= Font(size=12),
    showlegend=False,
    autosize=False,
    width=width,
    height=height,
    xaxis=XAxis(axis),
    yaxis=YAxis(axis),          
    margin=Margin(
        l=40,
        r=40,
        b=85,
        t=100,
    ),
    hovermode='closest',
    )
In [ ]:
data=Data([trace1, trace2])
py.sign_in('empet', 'my_api_key')
fig=Figure(data=data, layout=layout)

py.plot(fig, filename='Facebook-igraph', world_readable=False)

Community Detection

Detect communities in the network G:

In [5]:
community = G.community_multilevel()
In [6]:
for c in community:
    print len(c)
350
431
25
206
48
323
71
430
19
423
73
237
226
550
19
548
60

Define a dict having as keys the vertex indices, and for each vertex_index, community_color[vertex_index] is equal to the len of the component containing that vertex:

In [20]:
community_color={vertex_index: len(component)  for component in community for vertex_index in component}
In [ ]:
trace3=Scatter(x=Xn,
               y=Yn,
               mode='markers',
               name='Fb-comm',
               marker=Marker(symbol='dot',
                             size=5, 
                             color=community_color.values(),
                             colorscale=custom_cs,
                             line=Line(color='rgb(50,50,50)', width=0.5)
                             ),
               text=labels,
               hoverinfo='text'
               )
In [ ]:
title2= "Communities in a Facebook network, defined as an igraph Graph<br> Data:"+\
       "<a href='https://snap.stanford.edu/data/egonets-Facebook.html'> [1]</a>"
In [ ]:
data1=Data([trace1, trace3])
fig=Figure(data=data1, layout=layout)
fig['layout'].update(title=title2)
py.plot(fig, filename='Facebook-Comm-igraph', world_readable=False)
In [25]:
from IPython.core.display import HTML
def  css_styling():
    styles = open("./custom.css", "r").read()
    return HTML(styles)
css_styling()
Out[25]: