TnT Tree

100%

✓ Published0🌍 Public

Last edited Feb 16, 2017

Created on Feb 16, 2017

This interactive phylogenetic tree visualization renders a Newick-format dataset using the TnT tree API and D3 v3. It displays a collapsible tree where nodes toggle between circular and triangular markers via a click handler, and hover events highlight the path from a selected leaf back to the root by adding a `marked` class to corresponding `path.tnt_tree_link` elements. A button switches the layout between vertical and radial modes using the `tnt.tree.layout` API.

AI-generated description

Built with blockbuilder.org

This example is forked from Collapsible nodes.

This framework is awesome but i still feel very strange while using d3.selection.classed() function, for some of the path selections can not attach one specific class name. Very odd behavior!

More information relate to Newick Format please reference Wikipedia and TnT tree API.

mit Licensed

Similar vizzes

Loading thumbnail…

TnT Tree

This interactive phylogenetic tree visualizes evolutionary relationships from a Newick-format string, using the TnT Tree library built on D3 v3. It shows a collapsible cladogram where circular and triangular nodes indicate expanded or collapsed subtrees, with a button toggling between vertical and radial layouts. Hovering over a leaf highlights the path to the root by adding a dashed red class to relevant link elements. The code explicitly uses `tnt.tree.parse_newick`, `tnt.tree.layout.vertical/radial`, and D3 selection methods like `classed` and `on` for interactivity.

663anp3ca

94% match

Loading thumbnail…

TnT Tree

This example visualizes a phylogenetic tree from a Newick-formatted string, showing collapsible nodes that expand or collapse on click. It uses the TnT tree API alongside d3.v3, with circle nodes for expanded leaves and triangle nodes for collapsed branches. A button toggles the layout between vertical and radial orientations. Hovering over a leaf highlights the path from the root to that node by adding a CSS class to the relevant `path.tnt_tree_link` elements, using `d3.selectAll` and `classed` to manage the highlighting.

663anp3ca

93% match

Loading thumbnail…

Node height

This example demonstrates how TnT Tree's vertical layout determines tree height based on node size. It loads a Newick-format phylogenetic tree using `tnt.tree.parse_newick`, then renders it with a custom `node_display` that separates layout size (24 pixels) from circle drawing size (14 pixels). The layout uses `tnt.tree.layout.vertical` with a fixed width and disabled scaling, while `circle_node` controls the visual circle appearance. The code shows how providing a node display size differing from the plotted shape gives extra vertical space, affecting overall tree height calculation.

663anp3ca

76% match

Loading thumbnail…

Tree Example

This interactive tree diagram displays a hierarchical dataset with a single root node and two levels of children. Clicking any parent node collapses its subtree, and clicking again expands it. The visualization is built with D3.js version 3.5.17, using `d3.layout.tree` and `d3.svg.diagonal` to compute and draw the layout as SVG elements. Animated transitions, controlled by `node.transition` and a 750-millisecond duration, smoothly move nodes and links between states. The example is adapted from Mike Bostock’s collapsible tree and uses hardcoded JavaScript data.

Dd3noob

75% match

Loading thumbnail…

Tree Example

An interactive tree diagram displays hierarchical data with collapsible nodes, marking leaf nodes and internal nodes distinctly with text labels. Clicking a node toggles its child branches, with animated transitions repositioning nodes and links. The visualization uses D3.js 3.5.17, SVG rendering, and React via the VizHub framework, building the tree via `d3.layout.tree` and drawing curved diagonal links with `d3.svg.diagonal`.

JJonathan Liu

75% match

Loading thumbnail…

Tree of Life

A radial tree of life visualization displays the evolutionary relationships among hundreds of species. The circular layout uses a d3.cluster layout, with branch lengths shown as radial distances. Gray line extensions connect leaf labels to the tree, and hovering over a label highlights the path to the root. A checkbox toggles between constant and variable branch lengths using d3 transitions. The code parses Newick data with a custom parser and uses d3.hierarchy and d3.scaleOrdinal for coloring major taxonomic groups.

Mmbostock

74% match

Loading thumbnail…

Simple Collapsible Tree

This interactive visualization displays a hierarchical tree that expands and collapses when nodes are clicked. The tree uses a horizontal layout with circular nodes and text labels, and collapsible branches animate smoothly via transitions. The code employs D3 v3’s `d3.layout.tree` for positioning and `d3.svg.diagonal` for link paths, with sample data from a manual tree structure containing "Top Level" and dummy child nodes. SVG elements provide the rendering, and animations use `transition().duration()` to update node positions on interaction.

Rrainyrainyguo

74% match

Loading thumbnail…

Tree Example

This tree diagram shows a hierarchical dataset with collapsible nodes, where clicking a parent node hides or reveals its children with animated transitions. The visualization uses D3.js v3’s `d3.layout.tree` to compute node positions and `d3.svg.diagonal` for curved links, rendered as SVG elements. Node and link styling are defined via CSS classes, and the `update` function handles enter, update, and exit transitions with a 750ms duration. The static sample data includes a top-level node with two second-level branches, demonstrating the interactive expand/collapse behavior.

663anp3ca

74% match