Gist aab86eb5543eee75b540e8e173212007

100%

Gist aab86eb5543eee75b540e8e173212007

✓ Published0🌍 Public

AAdlopez2016

Last edited Oct 30, 2016

Created on Oct 30, 2016

This dendrogram visualization displays the Flare class hierarchy as a node-link tree diagram, with all leaf nodes aligned along the right edge and internal package nodes branching to the left. The example uses the classic Flare dataset (courtesy Jeff Heer) and employs D3's tree layout with SVG rendering. Leaf nodes are positioned at a uniform depth, creating a clean right-aligned column of class names, while curved links connect them to their parent packages. This layout makes it easy to compare hierarchical depth across different branches at a glance. The visualization is implemented with D3 v3 and uses the standard dendrogram layout algorithm.

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 radial layout.

forked from <a href='http://bl.ocks.org/samselikoff/'>samselikoff</a>'s block: <a href='http://bl.ocks.org/samselikoff/9539561'></a>

mit Licensed

Similar vizzes

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…

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

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

88% match

Loading thumbnail…

Gist e3a7564e0daaea9e8d19

This example shows a hierarchical tree layout rendered with D3.js, using the cluster layout to display the Flare visualization toolkit’s class hierarchy. The SVG visualization is organized as an indented dendrogram, with circular nodes connected by elbow-shaped paths. Parent nodes are labeled to the left of their circles, while leaf nodes are labeled to the right. The layout encodes the data’s parent-child relationships through vertical positioning, with the tree flowing horizontally across the 960×2200 pixel canvas.

CCBasis

87% match

Loading thumbnail…

Tidy Tree

A tidy tree diagram displays the hierarchical structure of the Flare class hierarchy, organizing nodes by distance from the root. The visualization uses the Reingold-Tilford algorithm via `d3.tree()` for an efficient, layered layout. Data is loaded from flare.csv and processed with `d3.stratify()` to build the tree. SVG rendering includes horizontal links with `d3.linkHorizontal()`, while internal nodes are distinguished with darker circles and varying text positions.

EEndNight95

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

84% match

Loading thumbnail…

pack layout

This visualization uses a packed circle layout to display the hierarchical structure of the Flare codebase. Each circle represents a node in the tree, with circle size encoding the node's numeric value and color mapping to depth in the hierarchy. The visualization is built using D3 v4, leveraging the `d3.stratify` and `d3.pack` APIs. The data comes from a CSV file containing file IDs and values, and interactive hover highlighting is implemented via SVG elements and mouse events.

BBrunoDumas

84% match

Loading thumbnail…

Bubble Chart

This bubble chart displays the hierarchical structure of the Flare class library, encoding each class’s value as the area of a circle. The visualization packs all leaf nodes into a square canvas, with circles colored by the top-level package and labeled with truncated class names. The code uses d3.pack for layout, d3.hierarchy for data binding, and d3.scaleOrdinal with schemeCategory20c for color assignment. It loads data from a CSV file and renders the result as SVG elements, with tooltips showing exact values.

663anp3ca

83% match