Fork of Edge Bundling

100%

Fork of Edge Bundling

✓ Published0🌍 Public

Last edited May 24, 2023

Created on May 24, 2023

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Edge Bundling

This radial visualization displays hierarchical data and its interconnections using edge bundling. It shows a circular cluster of labeled leaf nodes, with curved paths representing connections between them, bundled via `d3.curveBundle.beta(0.85)`. The diagram is built with React and SVG, using D3 v4 APIs like `d3.cluster()`, `d3.radialLine()`, and `d3.scaleLinear()`. Data is loaded via `d3.json` from a remote source, with node size encoded by value and labels positioned responsively around the circle.

BBoris Gomaz

91% match

Loading thumbnail…

Edge Bundling

A node-link diagram of 16 circularly arranged nodes demonstrates edge bundling to reduce visual clutter from interconnections. The radial layout positions nodes equidistantly, with curved paths drawn for each directed relationship between nodes. This example uses D3 v4 and SVG, employing a `d3.hierarchy` with `d3.cluster` to compute the tree layout, and `d3.radialLine` with `d3.curveBundle.beta(0.75)` to create the bundled edges. Hierarchical data is loaded from a local JSON file.

Mmariahdiaz

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

84% match

Loading thumbnail…

Edge Bundling

This example visualizes hierarchical data as a radial dendrogram with edge bundling, where leaf nodes are arranged in a circular layout and connected by curved, bundled paths that reveal clustered relationships. The code uses d3.cluster for tree layout, d3.radialLine with d3.curveBundle.beta(0.85) to draw the bundled links, and d3.scaleLinear to size circular bubbles at each leaf based on node values. Data is loaded from a JSON file, and the SVG renders labels and semi-transparent bubble markers around the circle’s perimeter.

PPranay Matalia

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

82% match

Loading thumbnail…

edge-bundling

A hierarchical edge-bundling diagram shows connections between music album credits and contributor roles, arranged radially around a circle. The code uses `d3.cluster` to compute the radial layout and `d3.radialLine` with `d3.curveBundle.beta(0.5)` to draw the bundled paths in SVG. Hovering highlights source and target nodes and links. Data comes from a CSV parsed by `d3.csv`, which is transformed into a hierarchy and import links via custom functions.

Pprateekvasi

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

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

79% match