Skip to main content
SimilarExport ZIP
100%

Hierarchical Edge Bundling

✓ Published0🌍 Public
Mmbostock
Last edited Nov 9, 2019
Created on Nov 22, 2013

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.

AI-generated description

Mouseover any of the nodes in this network to see the incoming links (dependants) in green and the outgoing links (dependencies) in red.

Compare to the static version.

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

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…

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
84% 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
84% match