Node Hover Effect

Question

I am trying to display node attributes(E.G.: words) when a mouse is placed over a networkx generated node. Is there a possibility of making that possible. All this feature should be tailored inside a PyQt5 application.

Example:

 #A bit of idea
    for i, elrow in df.iterrows():
        G.add_nodes(elrow[0], elrow[1], attr_dict=elrow[2:].to_dict(), weight=elrow(3)) #Just giving an instance

How do i grab all the data in attr_dict to be the node properties on hover with a mouse

Could you explain me better, where do the nodes show? provide a minimal reproducible example — eyllanesc
About the node, they are plotted within a matplotlib canvas and figure. So, i want the nodes to show more information on hover. eg. a, b, c, d, e are the nodes, 1, 2, 3, 4, 5 are the edge attributes. I want the node's attributes per pay have this on hover effect. a: "James", b: "Michael", c: "Peter", d: "Joel", e: "Smith". all this names are what i want displayed. Can't give image example cause i don't know how — kalango michael

vurmux vurmux · Accepted Answer · 2019-04-24T13:20:53

You should use bokeh library for this kind of visualization.

You can find an exact solution for your problem here:

import networkx as nx

from bokeh.io import show, output_file
from bokeh.models import Plot, Range1d, MultiLine, Circle, HoverTool, BoxZoomTool, ResetTool
from bokeh.models.graphs import from_networkx
from bokeh.palettes import Spectral4

# Prepare Data
G = nx.karate_club_graph()

SAME_CLUB_COLOR, DIFFERENT_CLUB_COLOR = "black", "red"
edge_attrs = {}

for start_node, end_node, _ in G.edges(data=True):
    edge_color = SAME_CLUB_COLOR if G.nodes[start_node]["club"] == G.nodes[end_node]["club"] else DIFFERENT_CLUB_COLOR
    edge_attrs[(start_node, end_node)] = edge_color

nx.set_edge_attributes(G, edge_attrs, "edge_color")

# Show with Bokeh
plot = Plot(plot_width=400, plot_height=400,
            x_range=Range1d(-1.1, 1.1), y_range=Range1d(-1.1, 1.1))
plot.title.text = "Graph Interaction Demonstration"

node_hover_tool = HoverTool(tooltips=[("index", "@index"), ("club", "@club")])
plot.add_tools(node_hover_tool, BoxZoomTool(), ResetTool())

graph_renderer = from_networkx(G, nx.spring_layout, scale=1, center=(0, 0))

graph_renderer.node_renderer.glyph = Circle(size=15, fill_color=Spectral4[0])
graph_renderer.edge_renderer.glyph = MultiLine(line_color="edge_color", line_alpha=0.8, line_width=1)
plot.renderers.append(graph_renderer)

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

Node Hover Effect

1 Answers