Example of basic tree layout in cartesian orientation. 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. Demo data is stored in json file format. By default, the tree isn't scalable and has fixed width for better readability, all levels are visible. The layout supports custom styling via CSS.

An example of basic tree layout with collapsible nodes. Current example has fixed width of 1280px. The object returned by d3.layout.tree is both an object and a function. That is: you can call the layout like any other function, and the layout has additional methods that change its behavior. Like other classes in D3, layouts follow the method chaining pattern where setter methods return the layout itself, allowing multiple setters to be invoked in a concise statement.

Basic example of tree dendrogram in cartesian orientation. 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. Demo data is stored in json file format. By default, the tree isn't scalable and has fixed width for better readability, all levels are visible.

Example of tree layout with typical bracket style. Demo data is stored in json file format and demonstrates demo set of winners and challengers. All nodes are collapsible. Basic usage demonstrates 2 different data trees that appears on two sides of the bracket. One data set is on one side, while the other is on the opposite side. Mid elbow connections are used to create the links and you can click on a node to collapse/expand it. Instead of resizing, drag and zoom features enabled.

Example of basic tree layout in radial orientation. 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. Demo data is stored in json file format. By default, the tree isn't scalable and has fixed width for better readability, all levels are visible. The layout supports custom styling via CSS.

Basic example of tree dendrogram in radial orientation. 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. Demo data is stored in json file format. By default, the tree isn't scalable and has fixed width for better readability, all levels are visible.