Skip to main content
SimilarExport ZIP
100%

Gist 524f4fcde9f1a572fcb66439053a99d1

✓ Published0🌍 Public
Mmbostock
Last edited Jul 23, 2018
Created on Jul 23, 2018

A radial hierarchical edge bundling diagram visualizes the Les Misérables character co-occurrence network, grouping nodes into a two-level hierarchy by numbered communities. Curved steel-blue paths link each character to their targets, using `d3.radialLine` with a bundled curve and `d3.cluster` for circular leaf placement. Labels rotate around the circumference, and the code’s data structure maps group children and target IDs before rendering with D3 v5 selections.

AI-generated description

A demonstration of downloading and embedding an Observable notebook.

Similar vizzes

Loading thumbnail…

Gist 9cf3726653a19fb89c2574bdde940323

This example visualizes the character co-occurrence network from *Les Misérables*, grouping nodes by community and bundling edges to reveal hierarchical structure. It adapts an Observable notebook to run directly in a browser via a JavaScript module, loading data with `d3-require`. Using `d3.cluster` for layout and `d3.radialLine` with `d3.curveBundle`, it draws curved paths between characters with a steelblue, semi-transparent stroke and multiply blending. Labels are rotated and positioned radially around the 640-pixel square SVG.

Mmbostock
86% 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
77% match
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
76% 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
76% match
Loading thumbnail…

Clustered Network

A clustered network of character co-occurrences from Les Misérables is visualized using D3’s force layout with SVG rendering. Nodes represent characters, grouped by community, while edges show coappearance weights. The animation supports interactive expansion and collapse of clusters via clicks, with a slider for debug levels and force parameters. Grid-based collision avoidance is attempted through position quantization, though the README notes this failed to improve layout stability.

GGerHobbelt
75% 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
75% 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
75% 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
75% match