NetworkX: Add hyperlink to each node?

Question

I'm becoming familiar with networkX.

I have this script to make a network:

import networkx as nx
import matplotlib.pyplot as plt

G = nx.Graph()
G.add_edge(1, 2)
G.add_edge(1, 3)
G.add_edge(1, 5)
G.add_edge(2, 3)
G.add_edge(3, 4)
G.add_edge(4, 5)

# explicitly set positions
pos = {1: (0, 0), 2: (-1, 0.3), 3: (2, 0.17), 4: (4, 0.255), 5: (5, 0.03)}

options = {
    "font_size": 36,
    "node_size": 3000,
    "node_color": "white",
    "edgecolors": "black",
    "linewidths": 5,
    "width": 5,
}
nx.draw_networkx(G, pos, **options)

# Set margins for the axes so that nodes aren't clipped
ax = plt.gca()
ax.margins(0.20)
plt.axis("off")
plt.show()

This code generates a basic network.

I'm wondering can anyone show me how to edit this code so I can add a hyperlink to the nodes, so that when I click on a node, it'll bring me to a webpage with more information about this node?

(Right now I'm just trying to understand if this is possible with a toy network, so any URL can be added to each node in this example, each node should have a unique URL).

Networkx relies on matplotlib for plotting, so any solution will be based on working with that dependency. Some quick research suggests it's possible with matplotlib's concept of [pick events](https://matplotlib.org/stable/users/event_handling.html) (see threads [1](https://stackoverflow.com/questions/12894985/how-to-make-a-click-able-graph-by-networkx) and [2](https://stackoverflow.com/questions/68754396/how-to-add-a-link-hyperlink-to-seaborn-sns-graph) and [3](https://stackoverflow.com/questions/22052532/matplotlib-python-clickable-points)). However, ... — Frodnar, Oct 06 '21 at 10:11
... if you may eventually have need of web deployment or expanded interactivity, it might be more prudent to pick another library with an explicit focus on interactive visualization. — Frodnar, Oct 06 '21 at 10:13

score 2 · Answer 1 · edited Oct 06 '21 at 10:54

I do not think you can achieve this with networkx and matplotlib. But you can use Bokeh to get a html-file capable of doing what you want:

import networkx as nx
from bokeh.io import output_file, show
from bokeh.models import (BoxZoomTool, Circle, HoverTool,
                          MultiLine, Plot, Range1d, ResetTool,
                          ColumnDataSource, OpenURL, TapTool)
from bokeh.plotting import from_networkx, figure, output_file, show


# Prepare Data
G = nx.Graph()
G.add_edge(1, 2)
G.add_edge(1, 3)
G.add_edge(1, 5)
G.add_edge(2, 3)
G.add_edge(3, 4)
G.add_edge(4, 5)

# explicitly set positions
pos = {1: (0, 0), 2: (-1, 0.3), 3: (2, 0.17), 4: (4, 0.255), 5: (5, 0.03)}

# set urls as node attributes
urls = {
    1: "https://stackoverflow.com/questions/69456723/networkx-add-hyperlink-to-each-node",
    2: "https://facebook.com",
    3: "https://google.com",
    4: "Test",
    5: "Test"

}
nx.set_node_attributes(G, urls, "URL")

# Show with Bokeh
p = figure(plot_width=400, plot_height=400,
           x_range=Range1d(-2, 6), y_range=Range1d(-0.2, 0.5),
           tools="tap", title="Click the URL")

# Configure node hover tool and add tools
node_hover_tool = HoverTool(tooltips=[("URL", "@URL")])
p.add_tools(node_hover_tool, BoxZoomTool(), ResetTool())

# Configure tap tool
url = "@URL"
taptool = p.select(type=TapTool)
taptool.callback = OpenURL(url=url)

graph_renderer = from_networkx(G, pos, scale=0.5, center=(0, 0))

graph_renderer.node_renderer.glyph = Circle(size=15, fill_color="white", 
                                           line_color = "black", line_width = 1)
graph_renderer.edge_renderer.glyph = MultiLine(line_color="black", line_alpha=1, 
                                               line_width=1)
p.renderers.append(graph_renderer)

output_file("interactive_graphs.html")
show(p)

I used following resources: https://docs.bokeh.org/en/latest/docs/user_guide/graph.html and Turn Bokeh Glyph into a link

NetworkX: Add hyperlink to each node?

1 Answers1

Linked