Hierarchical Edge Bundling — Visualize Connections Online
See how items in a hierarchy are connected. Nodes are arranged in a circle and bundled edges reveal relationships. Hover over any node to highlight its connections. All data stays in your browser — nothing leaves your device.
How to Use Hierarchical Edge Bundling
- Enter JSON data — provide a
nodesarray and aconnectionsarray withsourceandtargetfields matching node names. - Click Render — nodes are placed in a circle and connections are drawn as bundled curves through the center.
- Hover to explore — hover over any node to highlight its connections and dim all others, making relationships instantly clear.
- Load a sample — click "Load Sample" to see a software architecture dependency graph.
- Export — download the diagram as an SVG for documentation or presentations.
Why Use Edge Bundling
When you have many nodes with connections, a regular node-link diagram becomes a tangled mess. Edge bundling groups similar edges together, reducing visual clutter while preserving the topology of the network.
This technique is especially powerful for visualizing dependency graphs, social networks, transportation routes, and any system where understanding patterns of connection matters more than seeing every individual line.
Frequently Asked Questions
It's a visualization technique where nodes are placed in a circle and edges between them are bundled through a central point. The bundling reduces visual clutter by grouping edges that share similar paths.
When you hover over a node, all edges connected to it are highlighted while others are dimmed. This makes it easy to trace specific relationships in a dense network.
The tool accepts any source-target pairs. Connections are drawn as symmetric curves, so directionality is indicated by the source and target labels rather than arrowheads.
Use Cases
Software Dependency Mapping
Visualize how modules, services, or packages depend on each other, revealing coupling patterns and potential refactoring targets.
Social Network Analysis
See how people in a community are connected, identifying clusters, influencers, and bridge nodes between groups.
Transportation Network
Map connections between cities, airports, or transit stops to understand route density and hub importance.
Knowledge Graph Exploration
Explore relationships between concepts, topics, or research areas, finding clusters of related knowledge.