# NetworkX HTML Viewer 🎯
[](https://badge.fury.io/py/netx-vis)
[](https://opensource.org/licenses/MIT)
Convert your NetworkX graphs into beautiful, interactive HTML visualizations with just one line of code!
✨ **Click any node or edge to see all its properties in a sidebar** - perfect for exploring complex networks with rich metadata.
## 🚀 Features
- 🎯 **Interactive Property Viewing**: Click nodes/edges to see all their attributes
- 🎨 **Beautiful UI**: Modern, professional interface with sidebar property panel
- 🔍 **Zoom & Pan**: Explore large graphs with smooth zoom and pan controls
- 🎮 **Drag Nodes**: Rearrange graph layout by dragging nodes
- 🏷️ **Toggle Labels**: Show/hide node labels as needed
- 📊 **Graph Statistics**: Display node count, edge count, and graph type
- 🎨 **Force-Directed Layout**: Automatic layout using D3.js physics simulation
- 💾 **Export Ready**: Generates standalone HTML files
- 🔧 **Highly Customizable**: Adjust dimensions, styling, and behavior
## 📦 Installation
```bash
pip install netx-vis
```
## 🎮 Quick Start
```python
import networkx as nx
from networkx_html_viewer import convert_networkx_to_html
# Create a sample graph with properties
G = nx.Graph()
G.add_node("A", label="Node A", type="central", value=100, category="important")
G.add_node("B", label="Node B", type="peripheral", value=50, category="normal")
G.add_edge("A", "B", weight=0.8, relation="strong", type="primary")
# Convert to interactive HTML - that's it! 🎉
html_file = convert_networkx_to_html(
graph=G,
output_file="my_network.html",
title="My Amazing Network",
width=1200,
height=800
)
print(f"Interactive graph saved to: {html_file}")
# Open the HTML file in your browser and start exploring!
```
## 🎯 Interactive Features
Once you open the HTML file in your browser:
1. **🔵 Click any node** (colored circles) to see all its properties
2. **🔗 Click any edge** (lines) to see connection details
3. **🖱️ Drag nodes** to rearrange the layout
4. **🔍 Zoom** with mouse wheel or trackpad
5. **🤏 Pan** by dragging empty space
6. **🏷️ Toggle labels** with the button
7. **🔄 Reset view** to recenter the graph
8. **🔥 Reheat simulation** to restart the physics
## 🔧 Advanced Usage
### Using the Class Interface
```python
from networkx_html_viewer import NetworkXHTMLConverter
# Create converter with custom dimensions
converter = NetworkXHTMLConverter(width=1600, height=1000)
# Convert graph
html_file = converter.convert(
G,
output_file="advanced_graph.html",
title="Advanced Network Analysis"
)
# Or get HTML content as string (for embedding in web apps)
html_content = converter.preview(G, title="Preview Graph")
```
### Working with Complex Graphs
```python
import networkx as nx
# Create a more complex graph
G = nx.karate_club_graph()
# Add custom properties to nodes
for node in G.nodes():
G.nodes[node]['club'] = G.nodes[node].get('club', 'unknown')
G.nodes[node]['degree'] = G.degree(node)
G.nodes[node]['betweenness'] = nx.betweenness_centrality(G)[node]
# Add properties to edges
for edge in G.edges():
G.edges[edge]['weight'] = G.edges[edge].get('weight', 1.0)
G.edges[edge]['edge_betweenness'] = nx.edge_betweenness_centrality(G)[edge]
# Add graph-level properties
G.graph['name'] = 'Karate Club Network'
G.graph['description'] = 'Social network of a university karate club'
G.graph['nodes'] = G.number_of_nodes()
G.graph['edges'] = G.number_of_edges()
# Convert to HTML
convert_networkx_to_html(G, "karate_club.html", "Karate Club Social Network")
```
### Supported Graph Types
All NetworkX graph types are supported:
- `nx.Graph()` - Undirected graphs
- `nx.DiGraph()` - Directed graphs
- `nx.MultiGraph()` - Undirected multigraphs
- `nx.MultiDiGraph()` - Directed multigraphs
## 🎨 Customization Options
```python
# Customize dimensions and output
converter = NetworkXHTMLConverter(
width=1920, # Canvas width in pixels
height=1080 # Canvas height in pixels
)
# The HTML template automatically adapts to your graph:
# - Node sizes scale with number of properties
# - Edge thickness reflects property count
# - Colors are automatically assigned
# - Layout adjusts to graph structure
```
## 📊 What Properties Are Displayed?
The viewer shows **ALL** properties from your NetworkX graph:
- **Node Properties**: Any attributes you add to nodes
- **Edge Properties**: Any attributes you add to edges
- **Graph Properties**: Graph-level metadata
- **Computed Properties**: Centrality measures, clustering coefficients, etc.
Example of rich property data:
```python
# Nodes can have any properties
G.add_node("user123",
name="Alice Johnson",
age=29,
location="San Francisco",
followers=1250,
verified=True,
interests=["AI", "Python", "Networks"]
)
# Edges can have any properties
G.add_edge("user123", "user456",
relationship="friend",
strength=0.8,
since="2019-03-15",
interactions=247,
platforms=["twitter", "linkedin"]
)
# All of this will be displayed when you click!
```
## 🛠️ Development Setup
```bash
# Clone repository
git clone https://github.com/olsihoxha/netx-vis.git
cd netx-vis
# Install in development mode
pip install -e .
# Install development dependencies
pip install pytest black flake8 mypy
# Run tests
pytest tests/
# Format code
black networkx_html_viewer/
```
## 📁 Package Structure
```
netx-vis/
├── networkx_html_viewer/
│ ├── __init__.py # Package initialization
│ ├── converter.py # Main converter class
│ ├── templates/
│ └── graph_template.html # HTML template with D3.js
├── tests/
│ └── test_converter.py # Unit tests
├── setup.py # Package configuration
├── requirements.txt # Dependencies
├── README.md # This file
├── LICENSE # MIT License
└── MANIFEST.in # Package data files
```
## 🤝 Contributing
Contributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.
1. Fork the repository
2. Create your feature branch (`git checkout -b feature/AmazingFeature`)
3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)
4. Push to the branch (`git push origin feature/AmazingFeature`)
5. Open a Pull Request
## 📝 License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
## 🙏 Acknowledgments
- Built with [D3.js](https://d3js.org/) for interactive visualizations
- Inspired by the NetworkX community
- Thanks to all contributors and users!
---
**Made with ❤️ for the NetworkX community**
Convert your graphs. Explore your data. Share your insights. 🎯
Raw data
{
"_id": null,
"home_page": "https://github.com/olsihoxha/netx-vis",
"name": "netx-vis",
"maintainer": null,
"docs_url": null,
"requires_python": ">=3.7",
"maintainer_email": null,
"keywords": "networkx, graph, visualization, html, interactive, d3js, network, graph-analysis, data-visualization",
"author": "Olsi",
"author_email": null,
"download_url": "https://files.pythonhosted.org/packages/cd/da/0ecc4c4cc409289ee4bb083028b7505286ac73753045314946720571f418/netx_vis-0.2.6.tar.gz",
"platform": null,
"description": "# NetworkX HTML Viewer \ud83c\udfaf\n\n[](https://badge.fury.io/py/netx-vis)\n[](https://opensource.org/licenses/MIT)\n\nConvert your NetworkX graphs into beautiful, interactive HTML visualizations with just one line of code! \n\n\u2728 **Click any node or edge to see all its properties in a sidebar** - perfect for exploring complex networks with rich metadata.\n\n## \ud83d\ude80 Features\n\n- \ud83c\udfaf **Interactive Property Viewing**: Click nodes/edges to see all their attributes\n- \ud83c\udfa8 **Beautiful UI**: Modern, professional interface with sidebar property panel\n- \ud83d\udd0d **Zoom & Pan**: Explore large graphs with smooth zoom and pan controls\n- \ud83c\udfae **Drag Nodes**: Rearrange graph layout by dragging nodes\n- \ud83c\udff7\ufe0f **Toggle Labels**: Show/hide node labels as needed\n- \ud83d\udcca **Graph Statistics**: Display node count, edge count, and graph type\n- \ud83c\udfa8 **Force-Directed Layout**: Automatic layout using D3.js physics simulation\n- \ud83d\udcbe **Export Ready**: Generates standalone HTML files\n- \ud83d\udd27 **Highly Customizable**: Adjust dimensions, styling, and behavior\n\n## \ud83d\udce6 Installation\n\n```bash\npip install netx-vis\n```\n\n## \ud83c\udfae Quick Start\n\n```python\nimport networkx as nx\nfrom networkx_html_viewer import convert_networkx_to_html\n\n# Create a sample graph with properties\nG = nx.Graph()\nG.add_node(\"A\", label=\"Node A\", type=\"central\", value=100, category=\"important\")\nG.add_node(\"B\", label=\"Node B\", type=\"peripheral\", value=50, category=\"normal\") \nG.add_edge(\"A\", \"B\", weight=0.8, relation=\"strong\", type=\"primary\")\n\n# Convert to interactive HTML - that's it! \ud83c\udf89\nhtml_file = convert_networkx_to_html(\n graph=G,\n output_file=\"my_network.html\", \n title=\"My Amazing Network\",\n width=1200,\n height=800\n)\n\nprint(f\"Interactive graph saved to: {html_file}\")\n# Open the HTML file in your browser and start exploring!\n```\n\n## \ud83c\udfaf Interactive Features\n\nOnce you open the HTML file in your browser:\n\n1. **\ud83d\udd35 Click any node** (colored circles) to see all its properties\n2. **\ud83d\udd17 Click any edge** (lines) to see connection details \n3. **\ud83d\uddb1\ufe0f Drag nodes** to rearrange the layout\n4. **\ud83d\udd0d Zoom** with mouse wheel or trackpad\n5. **\ud83e\udd0f Pan** by dragging empty space\n6. **\ud83c\udff7\ufe0f Toggle labels** with the button\n7. **\ud83d\udd04 Reset view** to recenter the graph\n8. **\ud83d\udd25 Reheat simulation** to restart the physics\n\n## \ud83d\udd27 Advanced Usage\n\n### Using the Class Interface\n\n```python\nfrom networkx_html_viewer import NetworkXHTMLConverter\n\n# Create converter with custom dimensions\nconverter = NetworkXHTMLConverter(width=1600, height=1000)\n\n# Convert graph\nhtml_file = converter.convert(\n G, \n output_file=\"advanced_graph.html\",\n title=\"Advanced Network Analysis\"\n)\n\n# Or get HTML content as string (for embedding in web apps)\nhtml_content = converter.preview(G, title=\"Preview Graph\")\n```\n\n### Working with Complex Graphs\n\n```python\nimport networkx as nx\n\n# Create a more complex graph\nG = nx.karate_club_graph()\n\n# Add custom properties to nodes\nfor node in G.nodes():\n G.nodes[node]['club'] = G.nodes[node].get('club', 'unknown')\n G.nodes[node]['degree'] = G.degree(node)\n G.nodes[node]['betweenness'] = nx.betweenness_centrality(G)[node]\n\n# Add properties to edges\nfor edge in G.edges():\n G.edges[edge]['weight'] = G.edges[edge].get('weight', 1.0)\n G.edges[edge]['edge_betweenness'] = nx.edge_betweenness_centrality(G)[edge]\n\n# Add graph-level properties\nG.graph['name'] = 'Karate Club Network'\nG.graph['description'] = 'Social network of a university karate club'\nG.graph['nodes'] = G.number_of_nodes()\nG.graph['edges'] = G.number_of_edges()\n\n# Convert to HTML\nconvert_networkx_to_html(G, \"karate_club.html\", \"Karate Club Social Network\")\n```\n\n### Supported Graph Types\n\nAll NetworkX graph types are supported:\n- `nx.Graph()` - Undirected graphs\n- `nx.DiGraph()` - Directed graphs \n- `nx.MultiGraph()` - Undirected multigraphs\n- `nx.MultiDiGraph()` - Directed multigraphs\n\n## \ud83c\udfa8 Customization Options\n\n```python\n# Customize dimensions and output\nconverter = NetworkXHTMLConverter(\n width=1920, # Canvas width in pixels\n height=1080 # Canvas height in pixels\n)\n\n# The HTML template automatically adapts to your graph:\n# - Node sizes scale with number of properties\n# - Edge thickness reflects property count\n# - Colors are automatically assigned\n# - Layout adjusts to graph structure\n```\n\n## \ud83d\udcca What Properties Are Displayed?\n\nThe viewer shows **ALL** properties from your NetworkX graph:\n\n- **Node Properties**: Any attributes you add to nodes\n- **Edge Properties**: Any attributes you add to edges \n- **Graph Properties**: Graph-level metadata\n- **Computed Properties**: Centrality measures, clustering coefficients, etc.\n\nExample of rich property data:\n```python\n# Nodes can have any properties\nG.add_node(\"user123\", \n name=\"Alice Johnson\",\n age=29,\n location=\"San Francisco\", \n followers=1250,\n verified=True,\n interests=[\"AI\", \"Python\", \"Networks\"]\n)\n\n# Edges can have any properties \nG.add_edge(\"user123\", \"user456\",\n relationship=\"friend\",\n strength=0.8,\n since=\"2019-03-15\",\n interactions=247,\n platforms=[\"twitter\", \"linkedin\"]\n)\n\n# All of this will be displayed when you click!\n```\n\n## \ud83d\udee0\ufe0f Development Setup\n\n```bash\n# Clone repository\ngit clone https://github.com/olsihoxha/netx-vis.git\ncd netx-vis\n\n# Install in development mode\npip install -e .\n\n# Install development dependencies\npip install pytest black flake8 mypy\n\n# Run tests\npytest tests/\n\n# Format code\nblack networkx_html_viewer/\n```\n\n## \ud83d\udcc1 Package Structure\n\n```\nnetx-vis/\n\u251c\u2500\u2500 networkx_html_viewer/\n\u2502 \u251c\u2500\u2500 __init__.py # Package initialization\n\u2502 \u251c\u2500\u2500 converter.py # Main converter class\n\u2502 \u251c\u2500\u2500 templates/\n\u2502 \u2514\u2500\u2500 graph_template.html # HTML template with D3.js\n\u251c\u2500\u2500 tests/\n\u2502 \u2514\u2500\u2500 test_converter.py # Unit tests\n\u251c\u2500\u2500 setup.py # Package configuration\n\u251c\u2500\u2500 requirements.txt # Dependencies\n\u251c\u2500\u2500 README.md # This file\n\u251c\u2500\u2500 LICENSE # MIT License\n\u2514\u2500\u2500 MANIFEST.in # Package data files\n```\n\n## \ud83e\udd1d Contributing\n\nContributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.\n\n1. Fork the repository\n2. Create your feature branch (`git checkout -b feature/AmazingFeature`)\n3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)\n4. Push to the branch (`git push origin feature/AmazingFeature`)\n5. Open a Pull Request\n\n## \ud83d\udcdd License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n\n## \ud83d\ude4f Acknowledgments\n\n- Built with [D3.js](https://d3js.org/) for interactive visualizations\n- Inspired by the NetworkX community\n- Thanks to all contributors and users!\n\n---\n\n**Made with \u2764\ufe0f for the NetworkX community**\n\nConvert your graphs. Explore your data. Share your insights. \ud83c\udfaf\n",
"bugtrack_url": null,
"license": null,
"summary": "Convert NetworkX graphs to interactive HTML visualizations",
"version": "0.2.6",
"project_urls": {
"Bug Tracker": "https://github.com/olsihoxha/netx-vis/issues",
"Documentation": "https://github.com/olsihoxha/netx-vis#readme",
"Homepage": "https://github.com/olsihoxha/netx-vis",
"Source Code": "https://github.com/olsihoxha/netx-vis"
},
"split_keywords": [
"networkx",
" graph",
" visualization",
" html",
" interactive",
" d3js",
" network",
" graph-analysis",
" data-visualization"
],
"urls": [
{
"comment_text": null,
"digests": {
"blake2b_256": "2bb136df9cab37a875aeb050101289cc0eb36638a118a7e287515b9ec24ce381",
"md5": "1e495d1df8a08f6bc8480c0ca3972500",
"sha256": "4960b9a951de94286edbca1b7b9d6688b5f11ba33f04d8c17d1c5e7804034f3e"
},
"downloads": -1,
"filename": "netx_vis-0.2.6-py3-none-any.whl",
"has_sig": false,
"md5_digest": "1e495d1df8a08f6bc8480c0ca3972500",
"packagetype": "bdist_wheel",
"python_version": "py3",
"requires_python": ">=3.7",
"size": 16924,
"upload_time": "2025-08-22T13:33:42",
"upload_time_iso_8601": "2025-08-22T13:33:42.316115Z",
"url": "https://files.pythonhosted.org/packages/2b/b1/36df9cab37a875aeb050101289cc0eb36638a118a7e287515b9ec24ce381/netx_vis-0.2.6-py3-none-any.whl",
"yanked": false,
"yanked_reason": null
},
{
"comment_text": null,
"digests": {
"blake2b_256": "cdda0ecc4c4cc409289ee4bb083028b7505286ac73753045314946720571f418",
"md5": "4073f5c861b3a25dbd1a757f4b4bf9c0",
"sha256": "ec4c0ed13a18b2499fda4912db58f1d1d8df458b406ee7a537768ddedc63692a"
},
"downloads": -1,
"filename": "netx_vis-0.2.6.tar.gz",
"has_sig": false,
"md5_digest": "4073f5c861b3a25dbd1a757f4b4bf9c0",
"packagetype": "sdist",
"python_version": "source",
"requires_python": ">=3.7",
"size": 19093,
"upload_time": "2025-08-22T13:33:43",
"upload_time_iso_8601": "2025-08-22T13:33:43.270513Z",
"url": "https://files.pythonhosted.org/packages/cd/da/0ecc4c4cc409289ee4bb083028b7505286ac73753045314946720571f418/netx_vis-0.2.6.tar.gz",
"yanked": false,
"yanked_reason": null
}
],
"upload_time": "2025-08-22 13:33:43",
"github": true,
"gitlab": false,
"bitbucket": false,
"codeberg": false,
"github_user": "olsihoxha",
"github_project": "netx-vis",
"travis_ci": false,
"coveralls": false,
"github_actions": true,
"requirements": [
{
"name": "networkx",
"specs": [
[
">=",
"2.5"
]
]
},
{
"name": "setuptools",
"specs": [
[
">=",
"40.0"
]
]
}
],
"lcname": "netx-vis"
}
JSON
