Hierarchical Edge Bundling

100%

Hierarchical Edge Bundling

✓ Published0🌍 Public

Last edited Feb 7, 2018

Created on Feb 7, 2018

This example visualizes software class dependencies using hierarchical edge bundling. A radial cluster layout positions classes from the Flare dataset, while dependency links are grouped and smoothed into spline bundles using `d3.radialLine` with `d3.curveBundle` drawn as SVG paths. The code builds a package hierarchy from class names with `d3.hierarchy` and uses `d3.cluster()` to compute node coordinates. Package groupings determine which edges are bundled together, revealing structural patterns in the codebase through the density of connections.

AI-generated description

An implementation of Danny Holten's hierarchical edge bundling algorithm in D3, showing dependencies between classes in a software class hierarchy. Dependencies are bundled according to the parent packages. This example uses two layouts: a radial d3.layout.cluster to position the tree nodes, and d3.layout.bundle to group the dependencies into spline bundles. Thanks to Jason Davies for contributing the layout implementation!

Compare to this treemap layout.

See also the interactive version with link highlighting!

forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/1044242'>Hierarchical Edge Bundling</a>

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Hierarchical Edge Bundling

This radial visualization displays the hierarchical structure of the Flare data, with each leaf node representing a class and curved links showing dependencies between them. Mouseover highlights a node’s outgoing dependencies in red and incoming dependants in green, emphasizing the network’s connectivity. Built with D3 v4, it uses `d3.cluster()` for layout, `d3.radialLine()` with `d3.curveBundle` for edge bundling, and SVG text for labels. The `packageHierarchy` function constructs the tree from class names, while `packageImports` builds paths between related nodes.

CChrispyTwitch

92% match

Loading thumbnail…

Hierarchical Edge Bundling

This visualization displays the dependency structure of the Flare software package as a radial hierarchical edge bundling diagram. The circular layout positions leaf nodes along the outer ring, while curved Bézier paths bundle together to show relationships between modules. Hovering over a node highlights its outgoing dependencies in red and incoming dependants in green, drawing attention to the directional flow of the network. The implementation uses `d3.cluster` for tree layout and `d3.radialLine` with `curveBundle` for the bundled edges, loading class data from a JSON file.

Mmbostock

92% match

Loading thumbnail…

Hierarchical Edge Bundling

A circular dependency diagram visualizes the class hierarchy of the Flare software library, with bundles of curved links connecting classes that import one another. The radial layout positions class names around the circumference, while the hierarchical edge bundling algorithm groups related dependencies together. The implementation uses D3 v4's `d3.cluster` for tree layout, `d3.radialLine` with `d3.curveBundle` for the bundled paths, and renders text labels and paths as SVG elements. The data comes from the `flare.json` file, which records each class and its imports.

Mmbostock

92% match

Loading thumbnail…

Hierarchical Edge Bundling

This hierarchical edge bundling visualization maps the dependency structure of the Flare class hierarchy into a circular layout. Using D3 v4’s `d3.cluster` and `d3.radialLine` with `d3.curveBundle`, it draws bundled SVG paths that connect each class to its imports. Hovering over a node highlights incoming dependencies in green and outgoing dependents in red via CSS classes. The data comes from the bundled `flare.json` file, which lists each class and its imports.

FFrissAnalytics

91% match

Loading thumbnail…

Hierarchical Edge Bundling

This example shows a planar hierarchical edge bundling visualization of the Flare class hierarchy, using a cluster layout to position nodes in a wide, tall SVG. Curved, steel-blue paths bundle related import links between classes, reducing visual clutter in the dense dependency graph. The code uses D3’s `d3.layout.cluster`, `d3.layout.bundle`, and a bundled `d3.svg.line` with tension to draw the paths, while node labels are appended as text elements. Data comes from the `readme-flare-imports.json` file.

Mmbostock

89% match

Loading thumbnail…

Hierarchical Edge Bundling (Treemap)

This example visualizes the dependencies between classes in a software hierarchy using hierarchical edge bundling. The tree structure is positioned with `d3.layout.treemap`, while `d3.layout.bundle` groups the dependency links into spline bundles. The treemap cells are drawn as HTML `<div>` elements, and the bundled edges are rendered as SVG paths. Data comes from `readme-flare-imports.json`. The D3 v3 code uses `d3.svg.line` with `"bundle"` interpolation to create smooth curves.

Mmbostock

85% match

Loading thumbnail…

Circle Packing with hierarchical edge bundling

This visualization combines circle packing with hierarchical edge bundling to display the import relationships between packages in the Flare Actionscript library. Circular bubbles represent each package, sized by value, while bundled paths connect related packages based on the provided `flare_links.csv` data. Built with D3 v5, the code uses `d3.stratify`, `d3.pack`, and `d3.curveBundle` to compute layouts and curved link paths, rendered as SVG with zoom support.

CCurran Kelleher

83% match

Loading thumbnail…

Fork of Edge Bundling

This visualization shows a hierarchical edge bundling diagram of a dependency network with 16 nodes arranged radially around a circle. The code loads JSON data defining imports between nodes, then uses d3.cluster and d3.radialLine with curveBundle.beta(0.75) to draw curved paths connecting each node to its dependencies. Node labels are positioned around the circumference using SVG text with rotation transforms. The visualization uses an SVG rendering approach with the D3 v4 library, adapting a technique from the d3-graph-gallery.

BBoris Gomaz

81% match