Skip to main content
SimilarExport ZIP
100%

d3 edge bundling (soc dataset)

✓ Published2🌍 Public
AAndrew
Last edited Mar 26, 2024
Created on Mar 26, 2024

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.

AI-generated description

An edge bundling chart in D3

BTW: The data was simplified to help with creating this visualization.

Link to original dataset: https://networkrepository.com/soc.php

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

A8 - edge-bundling for the node-link diagram

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.

DDuc Pham
83% match
Loading thumbnail…

d3 node-link diagram (soc dataset)

This example visualizes the Zachary Karate Club network, a social graph of 34 members, using a force-directed node-link diagram. Nodes represent individuals and links represent friendships, with interactive features allowing users to hover over nodes to view IDs and neighbors, or drag nodes to reposition them. The visualization is built with D3 v7, using `d3.forceSimulation` for physics-based layout, `d3.forceLink` and `d3.forceManyBody` for forces, and `d3.drag` for node interaction. Data comes from a CSV file loaded via `d3.csv`, with edges and nodes rendered as SVG lines and circles.

AAndrew
81% 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
80% 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
80% 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
80% 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
79% 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
79% match