Skip to main content
SimilarExport ZIP
100%

Cluster Dendrogram II

✓ Published0🌍 Public
Mmbostock
Last edited Feb 9, 2016
Created on Dec 5, 2013

This cluster dendrogram visualizes a hierarchical dataset from a flare.json file, displaying nodes as circles connected by curved links. The layout uses d3.layout.cluster to position nodes, with SVG paths generated using cubic Bézier curves to create distinctive non-intersecting links. Node styling includes white circles with steelblue strokes and text labels, while the entire chart renders at a fixed 960 by 2200 pixel size within an SVG container.

AI-generated description

A variation of the cluster dendrogram using a different style of curved links to avoid intersection.

gpl-3.0 Licensed

Similar vizzes

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
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
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
89% 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
86% 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
85% match
Loading thumbnail…

Untitled

This example shows a hierarchical clustering tree of the flare dataset, rendered as a radial layout with circular nodes and curved links. The visualization uses D3 v4’s `d3.stratify` to convert CSV data into a hierarchy and `d3.cluster` to compute the radial positions, projecting Cartesian coordinates with a custom `project` function. Nodes are drawn as SVG circles, with internal nodes filled darker and leaf labels rotated to follow the tree’s circumference. The code loads data from `flare.csv` and relies on SVG paths for the connecting links.

990561lkk
83% match
Loading thumbnail…

Untitled

This example shows a hierarchical clustering tree of the flare dataset, rendered as a radial layout with circular nodes and curved links. The visualization uses D3 v4’s `d3.stratify` to convert CSV data into a hierarchy and `d3.cluster` to compute the radial positions, projecting Cartesian coordinates with a custom `project` function. Nodes are drawn as SVG circles, with internal nodes filled darker and leaf labels rotated to follow the tree’s circumference. The code loads data from `flare.csv` and relies on SVG paths for the connecting links.

990561lkk
83% match
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
83% match