Gist 56af2d45167ac12dca14

100%

Gist 56af2d45167ac12dca14

✓ Published0🌍 Public

Last edited Jun 11, 2015

Created on Jun 27, 2015

This radial visualization displays the dependency structure of the Flare visualization toolkit, using data from a JSON file of class imports. The D3.js layout.cluster algorithm positions classes in concentric rings around a central point, with hierarchical relationships encoded by radius. Curved, bundled links (using `d3.svg.line.radial` with bundle interpolation) connect classes to their imports, revealing dependency patterns in the software architecture. Leaf nodes are labeled with class names, and the radial arrangement organizes the hierarchy from the center outward. The visualization is rendered as an SVG, with steel-blue links and plain-text node labels, providing an overview of the dependency network.

AI-generated description

An implementation of Danny Holten's hierarchical edge bundling algorithm in D3, showing dependencies between classes in a software class hierarchy. Dependencies are bundled according to the parent packages. This example uses two layouts: a radial d3.layout.cluster to position the tree nodes, and d3.layout.bundle to group the dependencies into spline bundles. Thanks to Jason Davies for contributing the layout implementation!

Compare to this treemap layout.

See also the interactive version with link highlighting!

Similar vizzes

Loading thumbnail…

Untitled

This visualization displays the dependency structure of the Flare class hierarchy as a radial dendrogram. The code uses D3 v4's `d3.cluster` layout and `d3.radialLine` with a curve bundle to draw curved paths between connected classes, with node labels around the perimeter. When hovering over a class, its source and target dependencies are highlighted in red and green, respectively, with the associated links thickened. The data comes from the `flare.json` file containing class names, sizes, and imports, rendered as SVG text and paths.

CClaire Ahn

88% match

Loading thumbnail…

Untitled

This radial visualization displays the dependency structure of the Flare visualization toolkit, using a bundle layout to group curved links between related code modules. The code loads hierarchical JSON data and applies `d3.layout.cluster` with `d3.layout.bundle` to position nodes around a circular layout, while `d3.svg.line.radial` with bundle interpolation draws the connecting paths. Leaf nodes are labeled with class names, rotated to orient text along the circle's edge. The example builds the visualization incrementally in a React component using a `VizContainer` wrapper that implements the margin convention.

SShruti

86% match

Loading thumbnail…

php

This radial hierarchy visualization displays the dependency structure of the Flare visualization toolkit, with the dataset read from a JSON file containing module names, sizes, and import relationships. The visualization uses D3’s cluster layout combined with a bundle layout to draw curved edges that connect dependent modules in a circular arrangement. Upon mouseover, incoming links (dependants) are highlighted in brown and outgoing links (dependencies) in red, with associated nodes emphasized through font weight. The static view shows all links in blue with low opacity, and the color highlighting clarifies the directional relationships. The nodes are arranged around the circle, with labels placed outside the circumference and rotated for readability. The SVG rendering uses a radial layout with bundled edges to reduce visual clutter in the dense dependency graph of the PHP language ecosystem. The visualization is part of a gallery of data visualization examples, providing an interactive way to explore the dependency structure of the Flare visualization toolkit.

9909010901

85% match

Loading thumbnail…

Radial Dendrogram

A radial dendrogram displays the hierarchical structure of the Flare data visualization toolkit, with nodes arranged in concentric rings radiating from a central root and curved links tracing parent-child relationships. Internal nodes appear darker, while leaf labels rotate to follow their radial position. The visualization uses D3 v4’s `d3.stratify` to build the hierarchy from CSV data and `d3.cluster` to compute radial layout angles and radii, with SVG paths and text elements rendered through a custom polar-to-Cartesian projection function.

Mmbostock

85% match

Loading thumbnail…

Radial Cluster Dendrogram

A radial cluster dendrogram visualizes the Flare class hierarchy as a circular node-link diagram, with leaf nodes aligned on the outer ring and internal package nodes positioned inward. Using d3.stratify to structure the data and d3.cluster to compute radial coordinates, d3.v4 renders the tree as SVG paths and circles. The code loads comma-separated values from flare.csv, projects each node’s position via a custom trigonometric function, and labels classes with rotated text.

Mmbostock

85% match

Loading thumbnail…

2019: Radial Cluster Dendrogram

This radial cluster dendrogram displays the hierarchical structure of the Flare class hierarchy, with leaf nodes positioned around the outer ring and internal nodes connected by curved links. The visualization uses d3.stratify to construct the tree from CSV data and d3.cluster to compute the radial layout. Rendered as SVG, the code projects node coordinates from polar to Cartesian space using a custom project function, with node circles and rotated text labels for each class and package.

MMisunoKitara

84% match

Loading thumbnail…

2018: Radial Cluster Dendrogram

A radial cluster dendrogram displays the Flare class hierarchy as a circular node-link tree, with leaf nodes aligned at the outer edge and internal package nodes placed inward. The visualization uses `d3.stratify` to convert CSV data into a hierarchy and `d3.cluster` with a radial size to arrange nodes. Curved links are drawn as SVG paths, while circles and rotated text labels mark nodes. The dataset is derived from the Flare visualization toolkit, provided by Jeff Heer.

MMisunoKitara

84% match

Loading thumbnail…

Radial Tidy Tree

This radial tidy tree visualizes the hierarchical structure of the Flare class hierarchy, with nodes arranged in concentric rings around a central root. The visualization uses the Reingold-Tilford algorithm via D3’s `d3.tree` layout, with node depth mapped to radial distance and angular position based on the branch order. The code loads CSV data from a file, processes it with `d3.stratify`, and renders SVG paths and circles using `d3.linkRadial`. Leaf and internal nodes are visually distinguished by circle fill color, and text labels are rotated to follow the radial layout, with positions and anchors adjusted based on the node’s angle and whether it has children.

Mmbostock

84% match