Annotations in Network of Plotly

star_platium · July 16, 2019, 4:32pm

Hi everyone. Right now I’m creating a visualization of collaborations between some musicians. The goal is to show musicians’ name and their work(collaborated song) beside edges. But I can’t do the later part, it doesn’t show in the place I want. I thought it should be displayed between two nodes.
labels are musicians’ names and labels1 are song name that i want to display.
How can I fix this? Below are my source code.
Thank you.

import plotly
import plotly.plotly as py
import plotly.graph_objs as go
import platform
import networkx as nx
from plotly.offline import download_plotlyjs, init_notebook_mode, iplot, plot
init_notebook_mode(connected=True)

G=nx.Graph()# G is an empty Graph

my_nodes=range(10)
G.add_nodes_from(my_nodes)
my_edges=[(0,1), (0,2), (0,9), (1,3), (1,5), (2,4), (2, 7), (2, 8), (3,4),(4,5), (5, 6), (7,8),(8,7), (8,9)]
G.add_edges_from(my_edges)
G.add_edge(6,7)

pos=nx.fruchterman_reingold_layout(G)

labels=[‘Justin Biber’, ‘DJ Snake’,‘David Guetta’, ‘MØ’, ‘Avicii’, ‘Skrillex’, ‘Ellie Goulding’, ‘Calvin Harris’, ‘Rihanna’, ‘Drake’]

Xn=[pos[k][0] for k in range(len(pos))]
Yn=[pos[k][1] for k in range(len(pos))]

trace_nodes=dict(type=‘scatter’,
x=Xn,
y=Yn,
mode=‘markers + text’,
marker=dict(size=14, color=‘rgb(0,240,0)’),
text=labels,
hoverinfo=‘text’)

Xe=[]
Ye=[]

for e in G.edges():
Xe.extend([pos[e[0]][0], pos[e[1]][0], None])
Ye.extend([pos[e[0]][1], pos[e[1]][1], None])

labels1 = [‘xxxxxxxxxxxxxxxxxxx’, ‘aaaaaaaaaaaaaaaaaaa’, ‘Text I’,‘Text G’, ‘Text H’, ‘Text I’,‘Text G’, ‘Text H’, ‘Text I’,‘Text G’, ‘Text H’, ‘Text I’,‘Text G’, ‘Text H’, ‘Text I’]
trace_edges=dict(type=‘scatter’,
mode=‘lines+text’,
text=labels1,
x=Xe,
y=Ye,
line=dict(width=1, color=‘rgb(25,25,25)’),
hoverinfo=‘text’,
textposition=‘bottom center’
)
print(len(G.edges()))
axis=dict(showline=False, # hide axis line, grid, ticklabels and title
zeroline=False,
showgrid=False,
showticklabels=False,
title=’’
)
layout=dict(title= ‘My Graph’,
font= dict(family=‘Balto’),
width=800,
height=800,
autosize=True,
showlegend=False,
xaxis=axis,
yaxis=axis,
margin=dict(
l=40,
r=40,
b=85,
t=100,
pad=0,

),
hovermode='closest',
plot_bgcolor='#efecea', #set background color            
)

fig = dict(data=[trace_edges, trace_nodes], layout=layout)

#iplot(fig)

fig[‘layout’].update(annotations=make_annotations(pos, labels))

iplot(fig)

it shows like this right now

empet · July 16, 2019, 9:15pm

@star_platium

To display the song name at the middle of an edge, you have to compute the mid point of each edge and
define one more trace with mode=‘text’.

Here is your modified code to get your graph with desired annotations:

G=nx.Graph()# G is an empty Graph

my_nodes=range(10)
G.add_nodes_from(my_nodes)
my_edges=[(0,1), (0,2), (0,9), (1,3), (1,5), (2,4), (2, 7), (2, 8), (3,4),(4,5), (5, 6), (7,8),(8,7), (8,9)]
G.add_edges_from(my_edges)
G.add_edge(6,7)

pos=nx.fruchterman_reingold_layout(G)

labels=['Justin Biber', 'DJ Snake','David Guetta', 'MØ', 'Avicii', 'Skrillex', 'Ellie Goulding', 'Calvin Harris', 'Rihanna', 'Drake']

Xn=[pos[k][0] for k in range(len(pos))]
Yn=[pos[k][1] for k in range(len(pos))]

trace_nodes=dict(type='scatter',
                 x=Xn,
                 y=Yn,
                 mode='markers + text',
                 marker=dict(size=14, color='rgb(0,240,0)'),
                 text=labels,
                 hoverinfo='text')

Xe=[]
Ye=[]
xt = []
yt = []
for e in G.edges():
    mid_edge = 0.5*(pos[e[0]]+pos[e[1]])# mid point of the edge e
    xt.append(mid_edge[0])
    yt.append(mid_edge[1])
    Xe.extend([pos[e[0]][0], pos[e[1]][0], None])
    Ye.extend([pos[e[0]][1], pos[e[1]][1], None])

labels1 = ['xxxxxxxxxxxxxxxxxxx', 'aaaaaaaaaaaaaaaaaaa', 'Text I','Text G', 'Text H', 'Text I','Text G', 'Text H', 'Text I','Text G', 'Text H', 'Text I','Text G', 'Text H', 'Text I']
trace_edges=dict(type='scatter',
                 mode='lines',
                 x=Xe,
                 y=Ye,
                 line=dict(width=1, color='rgb(25,25,25)'),
                 hoverinfo='skip')


trace_text = go.Scatter(x=xt, y=yt, 
                       mode='text',
                       #marker=dict(size=0, color='rgb(25,25,25)'),
                       text=labels1,
                       textposition='bottom center', hoverinfo='text')

layout=dict(title= 'My Graph',
font= dict(family='Balto'),
width=650,
height=650,
autosize=True,
showlegend=False,
xaxis=dict(visible=False),
yaxis=dict(visible=False),
hovermode='closest',
plot_bgcolor='#efecea', #set background color            
)
fig = go.Figure(data=[trace_edges, trace_nodes, trace_text], layout=layout)

star_platium · July 16, 2019, 11:39pm

Thank you sir, this really helps.