Assignment 7 -- edge-bundling

100%

Assignment 7 -- edge-bundling

✓ Published1🌍 Public

Last edited May 1, 2022

Created on Mar 29, 2022

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Assignment 7 -- edge-bundling

A radial edge-bundling diagram displays family relationships, mapping uncles and relatives (people) as leaf nodes connected to shared car brands (BMW, Tesla, Porsche, etc.) that they own. The hierarchical layout uses d3.cluster and d3.radialLine with d3.curveBundle.beta to draw bundled paths from a CSV file. Hovering highlights source and target links via mouseover events, with nodes colored green and red.

MMahlue-Goodson

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

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

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

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

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

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

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

77% match