Circle Packing with hierarchical edge bundling

100%

Circle Packing with hierarchical edge bundling

✓ Published0🌍 Public

Last edited Aug 18, 2018

Created on Aug 18, 2018

This visualization combines circle packing with hierarchical edge bundling to display the import relationships between packages in the Flare Actionscript library. Circular bubbles represent each package, sized by value, while bundled paths connect related packages based on the provided `flare_links.csv` data. Built with D3 v5, the code uses `d3.stratify`, `d3.pack`, and `d3.curveBundle` to compute layouts and curved link paths, rendered as SVG with zoom support.

AI-generated description

Forked from Micak Stubb's Bl.ock, which was forked originally from Matteo Abrate's Circle packing with hierarchical edge bundling

Changes by Curran:

Upgraded to D3 v5.
Removed use of attrs, so it's just vanilla D3 now!

An iteration on the previous example, this time leveraging hierarchical edge bundling to show imports between packages in the historic flare Actionscript visualization library. Direction is ignored.

this iteration on Circle packing with hierarchical edge bundling from @matteoabrate runs lebab.sh on the output of the previous decaffeinated iteration. then, some syntax is manually optimized for readability.

this iteration makes the code (subjectively) nice to work with

use decaffeinate to produce modern Javascript

that modern Javascript is then Prettier formatted https://prettier.io/

special thanks to @currankelleher who tweeted about this nice block and motivated me to fork it.

apache-2.0 Licensed

Similar vizzes

Loading thumbnail…

Circle-Packing II

A circle-packing visualization displays the hierarchical structure of the Flare dataset, with each node represented as a circle whose size encodes a numeric value. The code uses D3 v4's `d3.pack` layout to compute circle positions and radii, and `d3.hierarchy` to process the CSV data. SVG elements are generated manually, with circle nodes, clip-paths for text labels that split on capital letters, and tooltips showing full paths and formatted values via `d3.format`.

663anp3ca

86% match

Loading thumbnail…

D3 v5 Circle-Packing

This visualization uses a circle-packing layout to display the hierarchical structure of the Flare software project’s classes and packages, with circle size encoding the value of each node. The example is implemented with D3 v5 and renders as SVG, using `d3.stratify` to build the hierarchy from a CSV file and `d3.pack` to compute the nested circle positions. Circle colors are mapped by depth using a sequential magma scale, and interactive mouseover highlighting is applied through class toggling.

Ppuinnovative

85% match

Loading thumbnail…

Fork of D3 v5 Circle-Packing Testing

This visualization shows a circle-packing layout of the Flare software package’s class hierarchy, using nested circles to represent the data’s hierarchical structure. The code loads data from `flare.csv` with `d3.csv`, processes it with `d3.stratify`, and computes the layout using `d3.pack`. Circles are colored by depth using `d3.scaleSequential` with the magma interpolator, and the visualization is rendered as SVG. Hovering highlights a node’s ancestors by toggling a `node--hover` class.

EEric Zimmerman

85% match

Loading thumbnail…

Hierarchical Edge Bundling

This hierarchical edge bundling visualization maps the dependency structure of the Flare class hierarchy into a circular layout. Using D3 v4’s `d3.cluster` and `d3.radialLine` with `d3.curveBundle`, it draws bundled SVG paths that connect each class to its imports. Hovering over a node highlights incoming dependencies in green and outgoing dependents in red via CSS classes. The data comes from the bundled `flare.json` file, which lists each class and its imports.

FFrissAnalytics

85% match

Loading thumbnail…

Hierarchical Edge Bundling

This example shows a planar hierarchical edge bundling visualization of the Flare class hierarchy, using a cluster layout to position nodes in a wide, tall SVG. Curved, steel-blue paths bundle related import links between classes, reducing visual clutter in the dense dependency graph. The code uses D3’s `d3.layout.cluster`, `d3.layout.bundle`, and a bundled `d3.svg.line` with tension to draw the paths, while node labels are appended as text elements. Data comes from the `readme-flare-imports.json` file.

Mmbostock

85% match

Loading thumbnail…

Hierarchical Edge Bundling

A circular dependency diagram visualizes the class hierarchy of the Flare software library, with bundles of curved links connecting classes that import one another. The radial layout positions class names around the circumference, while the hierarchical edge bundling algorithm groups related dependencies together. The implementation uses D3 v4's `d3.cluster` for tree layout, `d3.radialLine` with `d3.curveBundle` for the bundled paths, and renders text labels and paths as SVG elements. The data comes from the `flare.json` file, which records each class and its imports.

Mmbostock

85% match

Loading thumbnail…

Circle-Packing

This example visualizes the hierarchical structure of the Flare dataset using circle packing. Each node is represented as a circle, with leaf nodes sized by their value and grouped by their parent categories. The visualization uses D3 v4’s `d3.stratify` to build a hierarchy from the CSV and `d3.pack` to compute the circular layout. SVG circles are colored with a sequential magma scale based on depth, and hovering highlights the ancestors of a node via a CSS class and the `d3.selectAll` method.

Mmbostock

84% match

Loading thumbnail…

Fork of D3 v5 Circle-Packing

This D3 v5 circle-packing visualization displays the hierarchical structure of the Flare software system, using circle size to represent the number of metrics for each module. The graph is built from a CSV file using `d3.stratify()` and `d3.pack()`, with node depth encoded through the `d3.scaleSequential(d3.interpolateMagma)` color scale. Circles are rendered as SVG elements, with clip paths and tspan text for leaf labels, while hovering highlights the ancestor chain via the `node--hover` class.

LLouis Astorg

84% match