Matplotlib: How do you save an interactive networkx plot?

Question

I've created a weighted networkx graph that has a hover feature, which displays all the connects per node. When I save the plot I get a static PNG image. I wanted to ask if there was any way for me to save this plot with the hover feature, so that it is shareable with others?

This is my code:

import matplotlib.pyplot as plt
import networkx as nx
import numpy as np

G = nx.Graph()

G.add_edge("Ted", "May", weight=0.5)
G.add_edge("Ted", "Ray", weight=1)
G.add_edge("Ted", "Chris", weight=1)
G.add_edge("Ted", "Sam", weight=3)
G.add_edge("Ted", "April", weight=1)
G.add_edge("Ted", "Ana", weight=0)


G.add_edge("Ana", "Ryan", weight=1)
G.add_edge("Ana", "Jim", weight=0.5)
G.add_edge("Ana", "Ben", weight=1)


for0 = [(u, v) for (u, v, d) in G.edges(data=True) if d["weight"] == 0]
for05 = [(u, v) for (u, v, d) in G.edges(data=True) if d["weight"] == 0.5]
for1 = [(u, v) for (u, v, d) in G.edges(data=True) if d["weight"] == 1]
for15 = [(u, v) for (u, v, d) in G.edges(data=True) if d["weight"] == 1.5]
for3 = [(u, v) for (u, v, d) in G.edges(data=True) if d["weight"] == 3]



fig, ax = plt.subplots(figsize=(7.2, 7.2))
pos = nx.circular_layout(G)  # positions for all nodes
names = np.array(["Ted", "May", "Ray", "Chris", "Sam", "April", "Ana", "Ryan", "Jim", "Ben"])

# nodes
sc = nx.draw_networkx_nodes(G, pos, node_size=700)

# edges


nx.draw_networkx_edges(G, pos, edgelist=for0, width=0)
nx.draw_networkx_edges(G, pos, edgelist=for05, width=0.5)

nx.draw_networkx_edges(G, pos, edgelist=for1, width=1)
nx.draw_networkx_edges(G, pos, edgelist=for15, width=1.5)

nx.draw_networkx_edges(G, pos, edgelist=for3, width=3)


# labels
nx.draw_networkx_labels(G, pos, font_size=20, font_family="sans-serif")

annot = ax.annotate("", xy=(0,0), xytext=(20,20),textcoords="offset points",
                    bbox=dict(boxstyle="round", fc="w"),
                    arrowprops=dict(arrowstyle="->"))
annot.set_visible(False)

def update_annot(ind):

    pos = sc.get_offsets()[ind["ind"][0]]
    annot.xy = pos
    es = [e for e in G[names[ind["ind"]][0]]]
    text = "{}".format(es)
    annot.set_text(text)
    annot.get_bbox_patch().set_alpha(0.4)
    return sc


def hover(event):
    vis = annot.get_visible()
    if event.inaxes == ax:
        cont, ind = sc.contains(event)
        if cont:
            update_annot(ind)
            annot.set_visible(True)
            fig.canvas.draw_idle()
        else:
            if vis:
                annot.set_visible(False)
                fig.canvas.draw_idle()

fig.canvas.mpl_connect("motion_notify_event", hover)
plt.show()

thank you.

saving to html can enable hover effect, in this case, matplotlib is not recommended, use `bokeh`, `plotly`, or `mpld3` instead. But you need some customization, which is not that easy. — Jiadong, Oct 01 '20 at 09:16
I think saving to GEXF might help, otherwise you have to learn Javascript and css for some customisation. — Jiadong, Oct 01 '20 at 09:36

score 0 · Answer 1 · answered Oct 01 '20 at 09:36

0

If you don't want to rewrite your code, you can save it in GEXF so that others can open it in Gephi:

nx.write_gexf(G, "test.gexf")

Alternatively, if you want to have it in an HTML file, you'll need to use a different plotting API like plotly which supports interactive plots (see here for some examples).

answered Oct 01 '20 at 09:36

runDOSrun

10,359
7
47
57

I opened it with gexf but the nodes lose their labels and colours - how do I go about this? – nandz123 Oct 01 '20 at 10:28
Have you seen [this](https://stackoverflow.com/questions/28522155/adding-color-attribute-to-nodes-on-networkx-to-export-to-gephi) regarding color? [Documentation](https://networkx.github.io/documentation/stable/reference/readwrite/generated/networkx.readwrite.gexf.write_gexf.html) also explains labels. – runDOSrun Oct 01 '20 at 14:01

Matplotlib: How do you save an interactive networkx plot?

1 Answers1