Skip to main content
100%

Reingold–Tilford Tree

✓ Published0🌍 Public
Aaht
Last edited Jan 29, 2016
Created on Jan 29, 2016

The Reingold–Tilford tree displays a decision-tree hierarchy from the Flare class structure, with leaf nodes sized and colored by probability. It uses d3.layout.tree with d3.svg.diagonal to draw tidy layered nodes and curved links in SVG. Node circles encode leaf size via radius and churn probability via a linear color scale, while labels show feature splits and segment details.

AI-generated description

The tree layout implements the Reingold-Tilford algorithm for efficient, tidy arrangement of layered nodes. The depth of nodes is computed by distance from the root, leading to a ragged appearance. Radial orientations are also supported. Implementation based on work by Jeff Heer and Jason Davies using Buchheim et al.'s linear-time variant of the Reingold-Tilford algorithm. Data shows the Flare class hierarchy, also courtesy Jeff Heer.

Compare to this radial layout.

Similar vizzes

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
84% match
Loading thumbnail…

Tidy Tree

A tidy tree visualization displays the Flare class hierarchy as layered nodes and links, using a horizontal layout where depth is determined by distance from the root. The code implements the Reingold-Tilford algorithm via `d3.tree` and `d3.stratify`, rendering with SVG paths and circles. Interactive text labels identify each class, while internal nodes are visually distinguished by darker fill. The data comes from a CSV file, and the visualization uses `d3.linkHorizontal` to draw curved connecting links.

Mmbostock
82% match
Loading thumbnail…

Collapsible Tree

This interactive collapsible tree displays the flare software class hierarchy using the Reingold–Tilford layout algorithm. The visualization renders nodes and links as SVG elements, with leaf nodes showing sizes from the flare.json dataset. Users can click on any node to expand or collapse its children, with smooth animated transitions updating the tree layout. The tree uses a tidy radial layout with curved links, white circular nodes with steelblue outlines, and text labels for node names.

Aadenade
81% 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
80% match
Loading thumbnail…

Collapsible Tree

This interactive tree diagram visualizes the hierarchical structure of the Flare dataset, using a Reingold–Tilford layout to position nodes. Each circle represents a data category, with parent-child relationships shown as curved links. Clicking any node smoothly expands or collapses its children, animating the transition. The visualization is rendered in SVG and uses the d3.v3 library, with white node circles, steelblue borders, and gray links against a clean background.

AAdlopez2016
80% match
Loading thumbnail…

Collapsible Tree

This interactive tree diagram visualizes hierarchical data from the flare library using a Reingold–Tilford layout. Nodes represent categories and leaves represent individual modules, with circle marks sized by a numeric value and colored by depth. Clicking a node expands or collapses its children with a smooth animated transition, implemented in D3 v3 with SVG rendering. The layout updates the tree’s horizontal positioning to reflect the current set of visible nodes, keeping the visualization tidy and readable.

663anp3ca
79% match
Loading thumbnail…

Collapsible Tree

This interactive collapsible tree visualizes the hierarchical structure of the Flare software class hierarchy using a Reingold–Tilford layout. Nodes represent classes, with circles at each node and text labels; clicking a node toggles the expansion and collapse of its children, smoothly animating the tree’s layout. The visualization uses SVG rendering with D3 v3, and the underlying data is loaded from a JSON file describing the Flare class hierarchy.

663anp3ca
78% match
Loading thumbnail…

Collapsible Tree

This interactive visualization displays a hierarchical tree of the Flare data structure, with nodes that can be clicked to expand or collapse their children. The tree is laid out using the Reingold–Tilford algorithm, rendering nodes as white circles with steelblue outlines and connecting parent-child relationships with gray curved links. The visualization is implemented in D3 v3 using SVG, and includes smooth animated transitions as nodes are expanded or collapsed. The node labels are displayed in a 10px sans-serif font, and the layout adjusts dynamically to the visible portion of the hierarchy, allowing users to explore the nested structure of the Flare dataset by clicking on nodes to reveal or hide their children.

Aadenade
78% match