Hierarchical Edge Bundling

100%

Hierarchical Edge Bundling

✓ Published0🌍 Public

Last edited Nov 8, 2019

Created on Jun 24, 2011

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.

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!

gpl-3.0 Licensed

Similar vizzes

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

94% 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

94% match

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 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

91% 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

86% 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

85% match

Loading thumbnail…

Untitled

This visualization displays the dependency structure of the Flare class hierarchy as a radial dendrogram. The code uses D3 v4's `d3.cluster` layout and `d3.radialLine` with a curve bundle to draw curved paths between connected classes, with node labels around the perimeter. When hovering over a class, its source and target dependencies are highlighted in red and green, respectively, with the associated links thickened. The data comes from the `flare.json` file containing class names, sizes, and imports, rendered as SVG text and paths.

CClaire Ahn

84% match

Loading thumbnail…

D3 page template

This example presents a hierarchical edge bundling visualization of the Flare software package’s import relationships, rendered as an SVG inside a React framework. It uses D3 v4’s `d3.cluster` and `d3.radialLine` with `curveBundle` to draw curved links around a circular layout. Nodes are labeled with text elements rotated along the radius, while imports from the `flare.json` data file are mapped into paths between leaves. The code follows a bare-minimum HTML page template with inline CSS and JavaScript.

CClaire Ahn

84% match