Skip to main content

Convert any NetworkX graph to an interactive 3D HTML visualization

Project description

netgraph3d 🌐

Turn any NetworkX graph into a stunning interactive 3D visualization — with one line of code.

from netgraph3d import to_html
to_html(G)

A single HTML file is generated and opens automatically in your browser. No server needed. No dependencies beyond NetworkX.


Installation

pip install netgraph3d

Quick Start

import networkx as nx
from netgraph3d import to_html

G = nx.karate_club_graph()
to_html(G, title="Karate Club Network")

That's it. Your browser opens with a fully interactive 3D graph.


Features

  • 🖱️ Click any node to inspect all its attributes in a side panel
  • 🔍 Search bar to highlight nodes by name or label
  • 🏷️ Toggle node labels on/off
  • 🔗 Toggle edge labels on/off
  • 🔄 Auto-rotate the scene (toggle on/off)
  • 🖱️ Drag to rotate manually
  • 🖱️ Scroll to zoom in/out
  • ⌨️ Escape to deselect a node
  • 📄 Self-contained HTML — one file, share anywhere

Supported Input Formats

NetworkX graph (direct)

import networkx as nx
from netgraph3d import to_html

G = nx.Graph()
G.add_node("Alice", role="admin", score=95)
G.add_node("Bob",   role="user",  score=72)
G.add_edge("Alice", "Bob", weight=0.8, relation="colleague")

to_html(G, title="My Network")

CSV file

import networkx as nx
import pandas as pd
from netgraph3d import to_html

# edges.csv columns: source, target, weight, relation
edges_df = pd.read_csv("edges.csv")
G = nx.from_pandas_edgelist(edges_df, source="source", target="target", edge_attr=True)

# Optional: load node attributes from nodes.csv
# nodes_df = pd.read_csv("nodes.csv").set_index("id")
# for node, attrs in nodes_df.to_dict(orient="index").items():
#     if G.has_node(node):
#         G.nodes[node].update(attrs)

to_html(G, title="CSV Network")

edges.csv format:

source,target,weight,relation
Alice,Bob,0.8,friend
Bob,Carol,0.5,colleague

Excel file

import networkx as nx
import pandas as pd
from netgraph3d import to_html

# graph.xlsx: sheet "edges" with columns source, target, weight, relation
edges_df = pd.read_excel("graph.xlsx", sheet_name="edges")
G = nx.from_pandas_edgelist(edges_df, source="source", target="target", edge_attr=True)

to_html(G, title="Excel Network")

graph.xlsx sheet "edges" format:

source target weight relation
Alice Bob 0.8 friend
Bob Carol 0.5 colleague

JSON file

import networkx as nx
import json
from netgraph3d import to_html

with open("graph.json", encoding="utf-8") as f:
    data = json.load(f)

G = nx.Graph()
for n in data["nodes"]:
    nid = n["id"]
    attrs = {k: v for k, v in n.items() if k != "id"}
    G.add_node(nid, **attrs)
for e in data["edges"]:
    G.add_edge(e["source"], e["target"], **e.get("properties", {}))

to_html(G, title="JSON Network")

graph.json format:

{
  "nodes": [
    {"id": "Alice", "label": "Alice", "role": "admin"},
    {"id": "Bob",   "label": "Bob",   "role": "user"}
  ],
  "edges": [
    {"source": "Alice", "target": "Bob", "weight": 0.8, "relation": "friend"}
  ]
}

Built-in NetworkX graphs (great for testing)

import networkx as nx
from netgraph3d import to_html

G = nx.karate_club_graph()            # 34 nodes, classic social network
# G = nx.les_miserables_graph()       # Characters from Les Misérables
# G = nx.barabasi_albert_graph(50, 2) # Random scale-free network

to_html(G, title="Test Network")

API Reference

to_html(
    G,                                 # NetworkX graph (Graph, DiGraph, etc.)
    output_path="network_graph.html",  # Path to save the HTML file
    title="3D Network Graph",          # Title shown in browser tab and top bar
    pos_3d=None,                       # Custom {node: (x, y, z)} positions (optional)
    seed=42,                           # Random seed for layout reproducibility
    open_browser=True                  # Automatically open in browser
)

Node attributes

Any attribute added to a node is automatically displayed in the info panel when clicked:

G.add_node("Alice", label="Alice Smith", department="Engineering", level=3)

The label attribute is used as the node's display name. All other attributes appear in the side panel.

Edge attributes

G.add_edge("Alice", "Bob", weight=0.9, relation="manager", since=2021)
  • weight — controls edge thickness and opacity (0.0 to 1.0)
  • relation or type — used as the edge label in the visualization
  • All other attributes are stored and accessible

Requirements

  • Python >= 3.8
  • networkx

Optional (for CSV/Excel input):

  • pandas
  • openpyxl (for Excel files: pip install openpyxl)

License

MIT License — free to use, modify, and distribute.

Project details


Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Source Distribution

netgraph3d-0.1.3.tar.gz (13.2 kB view details)

Uploaded Source

Built Distribution

If you're not sure about the file name format, learn more about wheel file names.

netgraph3d-0.1.3-py3-none-any.whl (11.3 kB view details)

Uploaded Python 3

File details

Details for the file netgraph3d-0.1.3.tar.gz.

File metadata

  • Download URL: netgraph3d-0.1.3.tar.gz
  • Upload date:
  • Size: 13.2 kB
  • Tags: Source
  • Uploaded using Trusted Publishing? No
  • Uploaded via: twine/6.2.0 CPython/3.10.12

File hashes

Hashes for netgraph3d-0.1.3.tar.gz
Algorithm Hash digest
SHA256 0be3c05619abd7b71330e566ffc3050c72f001ce1aa8b8ea1db9af0141f51e9d
MD5 b34c7614e4916ec9acddab05e02e7520
BLAKE2b-256 e245e62a45ce0bc5e597e5c69793c6f7a8a8784f920796b4071e5dc2318c4609

See more details on using hashes here.

File details

Details for the file netgraph3d-0.1.3-py3-none-any.whl.

File metadata

  • Download URL: netgraph3d-0.1.3-py3-none-any.whl
  • Upload date:
  • Size: 11.3 kB
  • Tags: Python 3
  • Uploaded using Trusted Publishing? No
  • Uploaded via: twine/6.2.0 CPython/3.10.12

File hashes

Hashes for netgraph3d-0.1.3-py3-none-any.whl
Algorithm Hash digest
SHA256 b5cb7b4fff3ead8ee2b2b74203e100bf3911f4a7558ad36381f67a5ddac2742e
MD5 04b6ff6683d5baa5c7adec1286da719d
BLAKE2b-256 99f1448b03cbef2800edc67fe0987a778ee25966c3af10222b0285b4618cad11

See more details on using hashes here.

Supported by

AWS Cloud computing and Security Sponsor Datadog Monitoring Depot Continuous Integration Fastly CDN Google Download Analytics Pingdom Monitoring Sentry Error logging StatusPage Status page