ipysigma — Easily visualize networks with thousands of nodes and edges in Python

Msdatashift
3 min readMar 11, 2024

--

source

Frustrated by the sluggish and lackluster visuals in NetworkX? In search of a Python package that crafts large, visually striking network graphs efficiently? Look no further! This article unveils ipysigma, a game-changer in rendering network graphs filled with nodes and edges effortlessly. 🚀

Join me on a journey from constructing a network in NetworkX with an example dataset to bringing it vibrantly to life with ipysigma. Get ready to transform your network visualization experience. 🔑

👉Exploring ipysigma

source

Diving into Sigma.js

Sigma.js is a JavaScript library tailored for network graph visualization, leveraging WebGL for smooth and efficient rendering. It shines in handling large datasets, offering a suite of customization options for creating dynamic, interactive graphs on web pages. 🌐

Harnessing ipysigma

By integrating Sigma.js with NetworkX in Python, ipysigma offers a seamless bridge to efficient network graph visualization. This combination not only highlights analytical capabilities but also showcases complex data relationships beautifully. 📈

Ready for a deep dive into Sigma.js and revolutionizing your data visualization projects? Let’s go! 🚀

👉Diving Into Network Visualization with NetworkX and ipysigma

Install ipysigma🚀

pip install ipysigma

Load Your Data 📂

Kickstart your project by loading the dataset, paving the way for a dynamic network graph.

import json
import time
import networkx as nx
from ipysigma import Sigma

with open('./dataset.json', 'r', encoding='UTF-8') as f:
content = f.read()
data = json.loads(content)

Understanding Your Data🔍

Grasping the structure of your data is crucial. Let’s inspect:

data.keys()
# dict_keys(['nodes', 'edges', 'clusters', 'tags'])

data['edges'][0]
# ['cytoscape', 'computational genomics']

data['nodes'][0]
'''
{'key': 'cytoscape',
'label': 'Cytoscape',
'tag': 'Tool',
'URL': 'https://en.wikipedia.org/wiki/Cytoscape',
'cluster': '0',
'x': 643.82275390625,
'y': -770.3126220703125,
'score': 6.909602204225056e-05}
'''

Initialize and Build Your Network 🌐

Craft a directed graph with NetworkX, populating it with your dataset’s edges and nodes.

DG = nx.DiGraph()

[DG.add_edge(*tuple(edge)) for edge in data['edges']]

Attribute Magic ✨

Add depth by enhancing nodes with labels, tags, and URLs.

attrs_dict = {}

keys_to_extract = ['label','tag','URL']

for node_attrs in data['nodes']:
node = node_attrs['key']
sub_dict = {key: node_attrs[key] for key in keys_to_extract if key in node_attrs}
attrs_dict[node] = sub_dict

nx.set_node_attributes(DG, attrs_dict)

Visualize with NetworkX (But Hold Your Breath) 🖼️

The default NetworkX visualization might leave you wanting more:

start_time = time.time()
nx.draw(DG, with_labels=True)
end_time = time.time()
print(f'{end_time - start_time}s')
# 19.7372727394104 s
NetworkX visualization

Enter ipysigma: Where Magic Happens 🌟

This is where ipysigma shines, transforming your graph into an interactive visual masterpiece in seconds:

# start_time = time.time()

Sigma(DG,
node_color="tag",
node_label_size=DG.degree,
node_size=DG.degree
)

# end_time = time.time()
# print(f'{end_time - start_time}')
# 0.04755377769470215

Export to HTML: Share Your Insights 📤

Finally, make your network accessible to anyone, anywhere, by exporting it as an interactive HTML page.

Sigma.write_html(
DG,
'./dataset.html',
fullscreen=True,
node_metrics=['louvain'],
node_color='louvain',
node_size_range=(3, 20),
max_categorical_colors=30,
default_edge_type='curve',
node_border_color_from='node',
default_node_label_size=14,
node_size=DG.degree
)

And just like that, you’ve gone from raw data to an interactive, web-ready network visualization capable of revealing deep insights into your dataset. Embrace ipysigma for a visualization experience that’s as informative as it is beautiful.

ipysigma visualization

Code Availability 😊

Find all codes and outcomes in our GitHub: msbased/medium_ipysigma (github.com). If it aids your project, don’t forget to star! 🌟 Your support fuels further development and discovery.

In Conclusion

In this swift dive, we embarked on a journey to transform the complex, interconnected world of network graphs into visually stunning masterpieces. Bridging the analytical might of Python’s NetworkX with the dazzling visuals of web technologies, we painted a picture of possibility and exploration. 🌐✨

--

--