I am not able to see the edge information when I hover over the edge

📊 Plotly Python
1

I cannot see the edge information when I hover over the edge, but I can see the node information. Here is the code I am using, and the graph generated for reference.

res = [((‘pytorch’, ‘tensorflow’), 11446), ((‘arrow’, ‘pandas’), 8148), ((‘pandas’, ‘pytorch’), 2299), ((‘pytorch’, ‘tinygrad’), 1040), ((‘tensorflow’, ‘tinygrad’), 282), ((‘arrow’, ‘pytorch’), 795), ((‘numpy’, ‘pandas’), 16848), ((‘pandas’, ‘tensorflow’), 1237)]

import plotly.graph_objects as go

# Create a graph and add weighted edges
g = nx.Graph()
g.add_weighted_edges_from(res)

# Get positions for all nodes
pos = nx.spring_layout(g)

# Draw the nodes with sizes based on their degree
node_sizes = [nx.degree(g, n) for n in g.nodes()]

# Extract the x and y coordinates of the nodes
x_nodes = [pos[node][0] for node in g.nodes()]
y_nodes = [pos[node][1] for node in g.nodes()]

# Create the Plotly figure
fig = go.Figure()

# Add each edge as a separate scatter plot with its specific width and hover info
for edge in g.edges(data=True):
    x_edges = [pos[edge[0]][0], pos[edge[1]][0], None]
    y_edges = [pos[edge[0]][1], pos[edge[1]][1], None]
    fig.add_trace(go.Scatter(
        x=x_edges, y=y_edges,
        mode='lines',
        line=dict(width=edge[2]['weight'] / 1000, color='grey'),
        hoverinfo='text',
        text=f'Shared contributors: {edge[2]["weight"]}',
        showlegend=False
    ))

# Add the nodes as a scatter plot
fig.add_trace(go.Scatter(
    x=x_nodes, y=y_nodes,
    mode='markers',
    text=[str(node) for node in g.nodes()],
    marker=dict(size=[size * 5 for size in node_sizes], color='skyblue', line=dict(color='black', width=1)),
    textposition='top center',
    textfont=dict(size=14),
    hoverinfo='text'
))

# Add annotations for the node labels
annotations = []
for node, (x, y) in pos.items():
    annotations.append(
        dict(
            x=x, y=y,
            text=str(node),
            showarrow=False,
            xanchor='center',
            yanchor='top',
            font=dict(color='black', size=12),
            bgcolor='white',
            bordercolor='black',
            borderwidth=1,
            opacity=1.0  # Solid white background
        )
    )

# Update the layout to include annotations
fig.update_layout(
    showlegend=False,  # Disable legend for edges
    annotations=annotations,
    xaxis=dict(showgrid=False, zeroline=False, showticklabels=False),
    yaxis=dict(showgrid=False, zeroline=False, showticklabels=False),
    plot_bgcolor='white',
    title='Repositories Network with Shared Contributors'
)

# Show the figure
fig.show()

image
image1144×900 58.6 KB

2

Hi @prudhvi.vuda ,

As far as I know, the hover will appear on the top of points, which is your nodes.
By default you cannot put hover text on the top of line (edges).

If you want hover over the edges, you can use interpolate modul from scipy to generate points between two nodes and set hovertext about those new generated points as edge’s data.

https://docs.scipy.org/doc/scipy/tutorial/interpolate/1D.html#piecewise-linear-interpolation

2 Likes
3

Make sure that the edge information is properly attached to your graph data. For example, in NetworkX, you need to add edge attributes if you want to visualize them:

import networkx as nx
import matplotlib.pyplot as plt
G = nx.Graph()

Add nodes and edges with attributes

edges = [((‘pytorch’, ‘tensorflow’), 11446), ((‘arrow’, ‘pandas’), 8148), ((‘pandas’, ‘pytorch’), 2299), ((‘pytorch’, ‘tinygrad’), 1040), ((‘tensorflow’, ‘tinygrad’), 282), ((‘arrow’, ‘pytorch’), 795), ((‘numpy’, ‘pandas’), 16848), ((‘pandas’, ‘tensorflow’), 1237)]

for (node1, node2), weight in edges:
G.add_edge(node1, node2, weight=weight)
pos = nx.spring_layout(G)
nx.draw(G, pos, with_labels=True)
edge_labels = nx.get_edge_attributes(G, ‘weight’)
nx.draw_networkx_edge_labels(G, pos, edge_labels=edge_labels)
plt.show()

4

Thank you so much @farispriadi. I achieved what I needed with your suggestion!

1 Like