Skip to main content
SimilarExport ZIP
100%

Hierarchical Edge Bundling

✓ Published0🌍 Public
Mmbostock
Last edited Oct 28, 2016
Created on May 29, 2013

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.

AI-generated description

A planar layout of hierarchical edge bundling, as opposed to the radial version. Not sure I would recommend this version; it feels less effective at bundling edges.

gpl-3.0 Licensed

Similar vizzes

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
93% 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
91% 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
91% 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
90% match
Loading thumbnail…

Hierarchical Edge Bundling

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.

RRodrigoGonzalez
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
87% 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…

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