A8 - Edge Bundling with a Slider

100%

A8 - Edge Bundling with a Slider

✓ Published0🌍 Public

Last edited Mar 31, 2024

Created on Mar 31, 2024

Forked from A8 - edge-bundling for the node-link diagram

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.

AI-generated description

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

Similar vizzes

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

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

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…

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

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

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

81% match

Loading thumbnail…

A8 - Graph Visualization in D3

This example presents a graph visualization as a series of four interactive demonstrations. It first shows a node-link diagram using a force-directed layout, then compares it to an adjacency matrix representation. The visualization then implements edge-bundling for the node-link diagram and concludes with a slider that allows users to modulate the amount of tension in the edge bundling. The examples use D3.js and are embedded from VizHub, with each part linked to its source code.

DDuc Pham

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