I want to make a network graph in plotly. In that graph I would love to have the following functionality:
- Whenever I hover over a node I would love to see the undirected edges and the connected nodes to be highlighted (e.g. bold edges and bigger nodes).
Solutions I found on the web aren’t really helpful because they either handle different kind of (non-network) plots and/or are rather undetailed. I would be happy with any solution that fullfills my needs. I tried to handle this issue with Figure Widgets, which didn’t work out. Here is some basic code that I would like to extend:
import plotly.graph_objects as go
# Define the nodes and edges
nodes = ['Node 1', 'Node 2', 'Node 3']
edges = [('Node 1', 'Node 2'), ('Node 2', 'Node 3'), ('Node 3', 'Node 1'), ('Node 1', 'Node 3'), ('Node 2', 'Node 1')]
# Position of the nodes for visualization
positions = {'Node 1': (1, 2), 'Node 2': (2, 1), 'Node 3': (3, 2)}
# Create a scatter plot for the nodes
node_trace = go.Scatter(
x=[positions[node][0] for node in nodes],
y=[positions[node][1] for node in nodes],
text=nodes,
mode='markers+text',
marker=dict(size=10, color='LightSkyBlue'),
hoverinfo='text'
)
# Create a trace for the edges
edge_trace = go.Scatter(
x=[],
y=[],
line=dict(width=2, color='Grey'),
hoverinfo='none',
mode='lines'
)
for edge in edges:
x0, y0 = positions[edge[0]]
x1, y1 = positions[edge[1]]
edge_trace['x'] += (x0, x1, None)
edge_trace['y'] += (y0, y1, None)
# Create the Plotly figure
fig = go.Figure(data=[edge_trace, node_trace],
layout=go.Layout(
title='Network Graph',
titlefont_size=16,
showlegend=False,
hovermode='closest',
margin=dict(b=20, l=5, r=5, t=40),
xaxis=dict(showgrid=False, zeroline=False, showticklabels=False),
yaxis=dict(showgrid=False, zeroline=False, showticklabels=False))
)
fig.show()
As I described, I tried out FigureWidgets, which did not work for me.