Skip to main content
SimilarExport ZIP
100%

A8 - edge-bundling for the node-link diagram

✓ Published1🌍 Public
DDuc Pham
Last edited Mar 31, 2024
Created on Mar 31, 2024

This example uses D3.js v4 to create a radial edge-bundling diagram from a JSON dataset representing the Karate Club social network. The visualization displays nodes as labeled bubbles arranged in a circular hierarchy, with curved links that bundle together to reveal community structure. The code leverages `d3.radialLine` with `d3.curveBundle.beta(0.9)` for the bundled edges, `d3.cluster` for hierarchical layout, and custom SVG rendering with circles, text labels, and paths. The data is fetched from a GitHub gist, and links are derived from node import relationships.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

A8 - Edge Bundling with a Slider

This example visualizes edge bundling for the node-link diagram of the Zachary Karate Club dataset, rendered as an SVG with circular node labels and bubbles. A slider titled “Edge Bundling Tension” adjusts the curve interpolation in real time, updating the paths via `d3.curveBundle.beta()` as the user drags it. The code uses `d3.cluster()` for hierarchical layout, `d3.radialLine()` for curved links, and `d3.scaleLinear()` to map node values to bubble radii. Data is loaded as JSON from a GitHub gist.

DDuc Pham
88% 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
85% match
Loading thumbnail…

A8 - Edge Bundling in D3

This example demonstrates edge bundling for a network graph using D3.js within a React framework. It visualizes hierarchical data connections as curved, bundled paths that reduce visual clutter. The code employs D3’s force-directed simulation (`d3.forceSimulation`) to position nodes and `path` elements with Bézier curves to draw the edges. The rendering relies on SVG, with the graph’s structure defined in a local data file. The visualization showcases how edge bundling can clarify complex relationships in interconnected datasets.

RRiya Mathur
84% 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
83% 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
83% match
Loading thumbnail…

d3 edge bundling (soc dataset)

This example visualizes the Zachary karate club social network using edge bundling, showing friendships among 34 members as curved paths arranged in a radial hierarchy. A slider adjusts edge tension, dynamically changing how tightly the bundled links curve. The visualization uses d3.cluster to compute the hierarchical layout, d3.radialLine with d3.curveBundle to draw the bundled edges, and SVG rendering for the paths and labels. Data comes from a simplified version of the networkrepository.com soc dataset, loaded via d3.json.

AAndrew
83% match
Loading thumbnail…

A8-Edge-Bundling

This visualization shows an edge-bundling layout of a firm-to-firm network from a CSV dataset of high-tech companies. It uses d3.cluster to arrange leaf nodes on a circular radial layout, then draws cubic Bézier curves between linked nodes with d3.lineRadial and curveBundle.beta(0.85). SVG text labels rotate around the circle, and links are rendered as low-opacity blue strokes to reveal clusters of connections. The hierarchical structure is built via d3.hierarchy from CSV-processed source-target pairs.

Bbhavi.kenia@gmail.com
81% 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
80% match