Pyvis rendering blank html

Question

I am pretty new to network analysis, but I have managed to create a viable graph in Networkx that basically gives me what I need in most of the cases. I recently heard about Pyvis and it looked like it would be a very nice way of visualizing my graphs.

I do however have a problem that I can't seem to find any answers for: Pyvis only renders a blank html when i try this (some example I found online):

from pyvis.network import Network
import networkx as nx

nx_graph = nx.cycle_graph(10)
nx_graph.nodes[1]['title'] = 'Number 1'
nx_graph.nodes[1]['group'] = 1
nx_graph.nodes[3]['title'] = 'I belong to a different group!'
nx_graph.nodes[3]['group'] = 10
nx_graph.add_node(20, size=20, title='couple', group=2)
nx_graph.add_node(21, size=15, title='couple', group=2)
nx_graph.add_edge(20, 21, weight=5)
nx_graph.add_node(25, size=25, label='lonely', title='lonely node', group=3)
nt = Network('500px', '500px')

# populates the nodes and edges data structures
nt.from_nx(nx_graph)
nt.show('nx.html')

I should get this output:

pyvis graph

But all I get is this:

Extra info: I use Jupyter Notebook in a production environment that does not have internet connection.

Thanks in advance for any help :)

Answer 1

I'm the author of gravis, a Python package for network visualization that uses web technologies (HTML/CSS/JS) for rendering in a browser. Given your requirements, it seems to be a good alternative: 1) it has support for inline plotting in Jupyter notebooks and 2) it does not require a web connection since it doesn't fetch anything from a CDN but embeds all JS code directly in the output HTML.

Here I've reproduced your example:

import gravis as gv
import networkx as nx

g = nx.cycle_graph(10)
g.graph['node_color'] = 'blue'
g.nodes[1]['title'] = 'Number 1'
g.nodes[1]['group'] = 1
g.nodes[3]['title'] = 'I belong to a different group!'
g.nodes[3]['group'] = 10
g.nodes[3]['color'] = 'orange'
g.add_node(20, size=20, title='couple', group=2, color='red')
g.add_node(21, size=15, title='couple', group=2, color='red')
g.add_edge(20, 21, weight=5)
g.add_node(25, size=25, label='lonely', title='lonely node', group=3, color='green')

gv.d3(g)

This is how it looks like when being used in a notebook after dragging the nodes a bit manually to mimic the layout in your image. Edges can also be colored, so the yellow edge could be reproduced as well if that's desired: