2019: Radial Cluster Dendrogram

100%

2019: Radial Cluster Dendrogram

✓ Published0🌍 Public

Last edited Feb 7, 2020

Created on Feb 7, 2020

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.

AI-generated description

A dendrogram is a node-link diagram that places leaf nodes of the tree at the same depth. In this example, the classes (leaf nodes) are aligned on the right edge, with the packages (internal nodes) to the left. Data shows the Flare class hierarchy, courtesy Jeff Heer.

Compare to this Cartesian layout.

forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/4339607'>Radial Cluster Dendrogram</a>

forked from <a href='http://bl.ocks.org/MisunoKitara/'>MisunoKitara</a>'s block: <a href='http://bl.ocks.org/MisunoKitara/8d477bc2dd675f298c543fafbe3fe791'>2019: Radial Cluster Dendrogram</a>

gpl-3.0 Licensed

Similar vizzes

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

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

95% match

Loading thumbnail…

Radial Cluster Dendrogram - link

A radial cluster dendrogram displays the Flare class hierarchy, with leaf nodes aligned along the outer ring and internal nodes positioned inward. Node labels radiate outward, and hovering over a text label displays a black tooltip showing the full hierarchical path and associated numeric value from the CSV data. The visualization uses d3.stratify and d3.cluster layout in D3 v4, rendering curved links and circles as SVG paths. Color is applied to the hovered label, while internal nodes appear darker than leaf nodes.

GGerardoFurtado

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

91% match

Loading thumbnail…

Radial Dendrogram

A radial dendrogram displays the hierarchical structure of the Flare dataset as a circular tree, with leaf nodes positioned along the outer ring and internal nodes nearer the center. The visualization uses D3 v4's `d3.stratify` to build the hierarchy from a CSV, `d3.cluster` to compute the radial layout, and SVG paths for curved links. Node labels are rotated and positioned based on their angle relative to the center. The code loads data from `flare.csv`, which contains node identifiers and values.

AAndresAnayaIsaza

90% match

Loading thumbnail…

Cluster Dendrogram

A cluster dendrogram displays the hierarchical structure of the Flare class hierarchy data, with leaf nodes aligned along the right edge and internal package nodes positioned to the left. The visualization uses d3.cluster() to compute node positions and d3.stratify() to construct the tree from parent-id pairs. SVG rendering draws cubic Bézier curves for links and circles with text labels for each node, using the Flare dataset curated by Jeff Heer.

FFrissAnalytics

90% match

Loading thumbnail…

Cluster Dendrogram

This cluster dendrogram shows the hierarchical structure of the Flare class hierarchy, with leaf nodes aligned along the right edge and internal package nodes branching to the left. The layout uses `d3.cluster()` to position nodes by tree depth, while `d3.stratify()` converts the flat CSV data (flare.csv) into a hierarchical structure. Node-link paths are drawn as cubic Bézier curves, and each node is rendered as a circle with a text label. The visualization is built with D3 v4, renders to SVG, and uses the `d3.csv` loader to ingest the dataset.

Mmbostock

89% match

Loading thumbnail…

Dendrogram

This dendrogram visualizes a hierarchical clustering of the Flare data set, showing the nested structure of its analytics, animation, and visualization classes. Internal nodes are rendered as small circles, with connecting links drawn as smoothed curves, while leaf nodes display labels. The example uses D3 v4 and SVG rendering, employing the `d3.cluster` and `d3.stratify` layouts to position nodes based on their hierarchical depth and computed height. Data is loaded from a CSV file, and the chart’s orientation places the root at the left, expanding rightward.

Mmbostock

86% match