Best package for visualizing complex networks?

Using Streamlit
1

I am creating an app that visualizes a network. It seems fairly straightforward to visualize a basic networkx network in streamlit.

However, when I try to create a network with a node within a node, e.g.:

import streamlit.components.v1 as components
from pyvis.network import Network
import networkx as nx

# create node within node
G = nx.Graph()
G.add_node(1)
H = nx.Graph()
H.add_node(2)
G.add_node(H)
# populate network
nt = Network()
nt.from_nx(G)
nt.save_graph(f'pyvis_graph.html')
HtmlFile = open(f'pyvis_graph.html', 'r', encoding='utf-8')
components.html(HtmlFile.read(), height=435)

I receive the following error:

AssertionError
Traceback:
File "/Users/adamg/anaconda3/envs/ckcviz/lib/python3.12/site-packages/streamlit/runtime/scriptrunner/script_runner.py", line 542, in _run_script
    exec(code, module.__dict__)
File "/Users/adamg/Library/CloudStorage/Dropbox/Kairos/CKC/ckcviz/ckcviz-app.py", line 61, in <module>
    nt.from_nx(G)
File "/Users/adamg/anaconda3/envs/ckcviz/lib/python3.12/site-packages/pyvis/network.py", line 722, in from_nx
    self.add_node(node, **nodes[node])
File "/Users/adamg/anaconda3/envs/ckcviz/lib/python3.12/site-packages/pyvis/network.py", line 233, in add_node
    assert isinstance(n_id, str) or isinstance(n_id, int)

Eventually, I would like to create a network that looks like this:
Screenshot 2024-03-24 at 12.59.21 PM

What package(s) can I use to create visualizations like this in streamlit? (Note: I will also dynamically be changing the sizes of these parent and child nodes.)

1 Like
2

Hi @Adam_G,

Although I personally haven’t tried it, you may want to try st-cytoscape, which is a component that embeds cytoscape.js graphs into Streamlit.

On top of creating a graph and specifying a stylesheet, you can also:

  • choose various options, e.g., the selection mode (additive or single)
  • define layout options, particularly for the fcose force-directed layout method, which allows the enforcement of advanced placement constraints
  • get the list of selected nodes and edges in return.

You can see the component live in this example: https://share.streamlit.io/vivien0000/causal-simulator/main/app.py

I hope this may help.

Best,
Charly

1 Like
3

Thanks! This looks promising! It’s a bit annoying, though, because you have to put every variable name in quotes.

Follow-up: Unfortunately this is pretty clonky, and hasn’t been updated in a while. While it’s “promising,” it’s probably not the right solution. :frowning:

1 Like
4

you csn use streamlit-agraph it might not able to increase or decrease size but really easy to work with

from operator import itemgetter


import networkx as nx
from streamlit_agraph import agraph, Node, Edge, Config


n = 3
m = 2
G = nx.generators.barabasi_albert_graph(n, m)

node_and_degree = G.degree()
most_connected_node = sorted(G.degree, key=lambda x: x[1], reverse=True)[0]
degree = G.degree(most_connected_node)

hub_ego = nx.ego_graph(G, most_connected_node[0])


nodes = [Node(id=i, label=str(i), size=100,) for i in hub_ego.nodes]
edges = [Edge(source=i, target=j, type="CURVE_SMOOTH") for (i,j) in G.edges
        if i in hub_ego.nodes and j in hub_ego.nodes]


config = Config(width=1000, 
                height=1000, 
                directed=True,
                nodeHighlightBehavior=False, 
                highlightColor="#F7A7A6",
                collapsible=False,
                node={'labelProperty':'label'},
            
                ) 

return_value = agraph(nodes=nodes, 
                      edges=edges, 
                      config=config)
5

Yes!! I forgot to mention @chris_klose’s ace viz component, definitely a great choice too! :blush:

Charly

6

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.