A8-Edge-Bundling

100%

A8-Edge-Bundling

✓ Published1🌍 Public

Last edited Mar 25, 2025

Created on Mar 25, 2025

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.

AI-generated description

MIT Licensed

Similar vizzes

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

82% match

Loading thumbnail…

Assignment 7 -- edge-bundling

This radial edge-bundling visualization uses D3 v4 to display a hierarchical network of family members and the car brands they own. The SVG rendering shows connections between people and brands, with hover interactions highlighting source and target nodes in red and green. The code builds a hierarchy from CSV data using d3.cluster and d3.radialLine with curveBundle, while d3.csv loads the credits1.csv file containing the relationship matrix.

Vvishusikka

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

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

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

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

80% 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 -D3 Edge Bundling

This example visualizes a network of nodes and edges using a force-directed layout, with the data sourced from a CSV file containing node and edge information. The visualization shows the interconnected structure of the network, where each node is represented by a circle and each edge by a line, with the spatial arrangement determined by the simulated physical forces. The code uses D3 v6 utilities such as `d3.forceSimulation`, `d3.forceLink`, and `d3.forceManyBody` to perform the simulation, while also incorporating `d3.drag` for interactive node manipulation, and the SVG rendering is handled by `d3.select` and `svg.append`. The node and edge elements are styled with CSS classes, and the graph is displayed within an SVG container sized at 1280 by 800 pixels.

Rragregory@dons.usfca.edu

80% match