Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions .pre-commit-config.yaml
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
repos:
- repo: https://github.com/astral-sh/uv-pre-commit
rev: 0.9.5
rev: 0.12.7
hooks:
# Dependency management
- id: uv-lock
Expand All @@ -23,7 +23,7 @@ repos:

# Python Linting & Formatting with Ruff
- repo: https://github.com/astral-sh/ruff-pre-commit
rev: v0.14.2
rev: v0.16.5
hooks:
- id: ruff
name: ruff (linter)
Expand All @@ -32,7 +32,7 @@ repos:
name: ruff-format (formatter)

- repo: https://github.com/pre-commit/mirrors-mypy
rev: v1.18.2
rev: v2.3.1
hooks:
- id: mypy
args: [--strict]
Expand Down
16 changes: 8 additions & 8 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -50,23 +50,23 @@ G = nx.cycle_graph(5)

# Add some basic attributes for visualization
for i, node_id in enumerate(G.nodes()):
G.nodes[node_id]['label'] = f'Node {i+1}'
G.nodes[node_id]['title'] = f'This is Node {i+1}' # Tooltip
G.nodes[node_id]['group'] = i % 2
G.nodes[node_id]["label"] = f"Node {i + 1}"
G.nodes[node_id]["title"] = f"This is Node {i + 1}" # Tooltip
G.nodes[node_id]["group"] = i % 2

G.edges[0,1]['label'] = 'Link 0-1'
G.edges[0,1]['color'] = 'red'
G.edges[0, 1]["label"] = "Link 0-1"
G.edges[0, 1]["color"] = "red"

# 2. Define (optional) vis.js options
custom_options = {
"nodes": {"font": {"size": 16}},
"edges": {"smooth": {"enabled": True}},
"groups": {
0: {"color": "skyblue", "shape": "dot"},
1: {"color": "lightgreen", "shape": "square"}
1: {"color": "lightgreen", "shape": "square"},
},
"interaction": {"navigationButtons": True, "hover": True},
"physics": {"enabled": True}
"physics": {"enabled": True},
}

# 3. Generate and show the interactive HTML graph
Expand All @@ -76,7 +76,7 @@ nx_to_vis(
output_filename="cycle_graph.html",
html_title="My Interactive Cycle Graph",
vis_options=custom_options,
show_browser=True
show_browser=True,
)

# To get HTML for a Jupyter Notebook:
Expand Down
24 changes: 12 additions & 12 deletions docs/examples/basic.md
Original file line number Diff line number Diff line change
Expand Up @@ -23,15 +23,15 @@ import networkx as nx

G = nx.cycle_graph(5)
for i, node_id in enumerate(G.nodes()):
G.nodes[node_id]['label'] = f'N{i+1}'
G.nodes[node_id]['title'] = f'Tooltip for Node N{i+1}'
G.nodes[node_id]['group'] = i % 2
G.nodes[node_id]["label"] = f"N{i + 1}"
G.nodes[node_id]["title"] = f"Tooltip for Node N{i + 1}"
G.nodes[node_id]["group"] = i % 2
if i == 0:
G.nodes[node_id]['color'] = 'skyblue'
G.nodes[node_id]['size'] = 25
G.edges[0,1]['label'] = "Link 0-1"
G.edges[0,1]['color'] = "green"
G.edges[0,1]['width'] = 3
G.nodes[node_id]["color"] = "skyblue"
G.nodes[node_id]["size"] = 25
G.edges[0, 1]["label"] = "Link 0-1"
G.edges[0, 1]["color"] = "green"
G.edges[0, 1]["width"] = 3
```

The `vis_options` used (as a Python dictionary in the generation script):
Expand Down Expand Up @@ -72,10 +72,10 @@ import networkx as nx

G = nx.karate_club_graph()
for node_id, data in G.nodes(data=True):
data['label'] = str(node_id)
data['title'] = f"Member {node_id}\nClub: {data['club']}"
data['group'] = data['club']
data['value'] = G.degree(node_id)
data["label"] = str(node_id)
data["title"] = f"Member {node_id}\nClub: {data['club']}"
data["group"] = data["club"]
data["value"] = G.degree(node_id)
```

The `vis_options` used (as a Python dictionary in the generation script):
Expand Down
16 changes: 12 additions & 4 deletions docs/examples/customization.md
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ The Python code to generate the graph structure can be found in `examples/advanc
import networkx as nx
import random


def create_showcase_graph():
G = nx.Graph(name="Advanced Showcase Graph")

Expand All @@ -41,15 +42,22 @@ def create_showcase_graph():
shape="diamond",
color={"background": "lightgreen", "border": "darkgreen"},
size=30,
fixed={"x": True, "y": True}, x=-400, y=-200,
fixed={"x": True, "y": True},
x=-400,
y=-200,
# ... other attributes
)
# ... more nodes ...

G.add_edge(
"Hub", "Sink", weight=5, color="blue", width=4,
title="Main link from Hub to Sink", arrows="to",
smooth={"type": "curvedCW", "roundness": 0.2}
"Hub",
"Sink",
weight=5,
color="blue",
width=4,
title="Main link from Hub to Sink",
arrows="to",
smooth={"type": "curvedCW", "roundness": 0.2},
)
# ... more edges ...
return G
Expand Down
80 changes: 54 additions & 26 deletions docs/examples/directed.md
Original file line number Diff line number Diff line change
Expand Up @@ -22,23 +22,25 @@ The Python code to generate the graph data:
import networkx as nx

DG = nx.DiGraph()
DG.add_edges_from([
(1, 2, {'label': 'Rel A'}),
(1, 3, {'label': 'Rel B'}),
(2, 4, {'label': 'Rel C'}),
(3, 4, {'label': 'Rel D'}),
(4, 1, {'label': 'Rel E (Cycle)'}) # Creates a cycle
])
DG.add_edges_from(
[
(1, 2, {"label": "Rel A"}),
(1, 3, {"label": "Rel B"}),
(2, 4, {"label": "Rel C"}),
(3, 4, {"label": "Rel D"}),
(4, 1, {"label": "Rel E (Cycle)"}), # Creates a cycle
]
)

# Add some node properties
for i in DG.nodes():
DG.nodes[i]['label'] = f'DNode {i}'
DG.nodes[i]['title'] = f'This is directed node {i}'
DG.nodes[i]["label"] = f"DNode {i}"
DG.nodes[i]["title"] = f"This is directed node {i}"
if i == 1:
DG.nodes[i]['color'] = 'lightcoral'
DG.nodes[i]['shape'] = 'star'
DG.nodes[i]["color"] = "lightcoral"
DG.nodes[i]["shape"] = "star"
if i == 4:
DG.nodes[i]['color'] = 'lightgreen'
DG.nodes[i]["color"] = "lightgreen"
```

The `vis_options` used (as a Python dictionary in the generation script):
Expand Down Expand Up @@ -86,25 +88,51 @@ import networkx as nx

DG = nx.DiGraph()
courses = {
"CS101": {"label": "Intro to CS", "level": 1, "title": "Fundamentals of Computer Science"},
"CS102": {"label": "Data Structures", "level": 2, "title": "Basic Data Structures and Algorithms"},
"MA101": {"label": "Calculus I", "level": 1, "title": "Differential Calculus"},
"CS201": {"label": "Algorithms", "level": 3, "title": "Advanced Algorithm Design"},
"CS202": {"label": "Operating Systems", "level": 3, "title": "Principles of Operating Systems"},
"CS301": {"label": "Compilers", "level": 4, "title": "Compiler Construction"}
"CS101": {
"label": "Intro to CS",
"level": 1,
"title": "Fundamentals of Computer Science",
},
"CS102": {
"label": "Data Structures",
"level": 2,
"title": "Basic Data Structures and Algorithms",
},
"MA101": {
"label": "Calculus I",
"level": 1,
"title": "Differential Calculus",
},
"CS201": {
"label": "Algorithms",
"level": 3,
"title": "Advanced Algorithm Design",
},
"CS202": {
"label": "Operating Systems",
"level": 3,
"title": "Principles of Operating Systems",
},
"CS301": {
"label": "Compilers",
"level": 4,
"title": "Compiler Construction",
},
}
for course_id, attrs in courses.items():
DG.add_node(course_id, **attrs)

# Edges: (prerequisite, course)
DG.add_edges_from([
("CS101", "CS102"),
("MA101", "CS102"),
("CS102", "CS201"),
("CS102", "CS202"),
("CS201", "CS301"),
("CS202", "CS301")
])
DG.add_edges_from(
[
("CS101", "CS102"),
("MA101", "CS102"),
("CS102", "CS201"),
("CS102", "CS202"),
("CS201", "CS301"),
("CS202", "CS301"),
]
)
```

The `vis_options` used (as a Python dictionary in the generation script):
Expand Down
10 changes: 5 additions & 5 deletions docs/usage.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,17 +13,17 @@ from nx_vis_visualizer import nx_to_vis
# 1. Create a NetworkX graph
G = nx.Graph()
G.add_edges_from([(1, 2), (2, 3), (3, 1), (3, 4)])
G.nodes[1]['label'] = 'Node One'
G.nodes[2]['title'] = 'This is node 2, connected to 1 and 3.' # Tooltip
G.nodes[3]['color'] = 'red'
G.edges[2,3]['label'] = 'Link'
G.nodes[1]["label"] = "Node One"
G.nodes[2]["title"] = "This is node 2, connected to 1 and 3." # Tooltip
G.nodes[3]["color"] = "red"
G.edges[2, 3]["label"] = "Link"

# 2. Visualize it!
output_path = nx_to_vis(
G,
output_filename="my_first_graph.html",
html_title="My First Interactive Graph",
show_browser=True # Automatically open the generated HTML in your browser
show_browser=True, # Automatically open the generated HTML in your browser
)

print(f"Graph saved to: {output_path}")
Expand Down
Loading