TnT Tree

100%

✓ Published0🌍 Public

Last edited Oct 9, 2018

Created on Oct 9, 2018

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.

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.

forked from <a href='http://bl.ocks.org/1Cr18Ni9/'>1Cr18Ni9</a>'s block: <a href='http://bl.ocks.org/1Cr18Ni9/66cf9dd9093b17f3204632d155596840'>TnT Tree</a>

mit Licensed

Similar vizzes

Loading thumbnail…

TnT Tree

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.

11Cr18Ni9

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…

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

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

75% match

Loading thumbnail…

Tree of Life

A phylogenetic tree visualization presents the evolutionary relationships among organisms, arranged radially with colored branches distinguishing major domains such as Bacteria, Eukaryota, and Archaea. The interactive chart allows users to toggle branch length display with a smooth animated transition. Built with D3.js, it uses hierarchical clustering to position nodes, SVG rendering for scalable graphics, and transition animations to update paths smoothly. Mouseover interactions highlight the lineage from a leaf back to the root. The data originates from a Newick-format phylogenetic tree file.

BBoris Gomaz

75% match

Loading thumbnail…

Tree Example

This interactive tree diagram displays a three-generation family lineage, using an animated collapsible hierarchy. The visualization is built with the D3.js library (version 3.5.17) and renders as SVG, using the `d3.layout.tree` for layout computation and `d3.svg.diagonal` for curved link paths. Nodes are white circles with steel blue strokes, and clicking a node toggles its children’s visibility, smoothly transitioning positions via `node.transition()` and `link.transition()` over 750 milliseconds. The data is hardcoded in the script as a JSON array, with each node containing a name and parent reference.

Mmanishcheruku

74% match

Loading thumbnail…

Tree Example

This interactive tree diagram displays hierarchical data with collapsible nodes. The visualization uses the D3.js library (version 3.5.17) with a static JSON dataset containing a root node and its descendants. The code employs `d3.layout.tree` for layout computation and `d3.svg.diagonal` for link rendering. Users can click nodes to expand or collapse subtrees, triggering smooth animated transitions via D3's `.transition()` method. The SVG rendering includes styled circles and text labels, with nodes colored steelblue or lightsteelblue depending on collapsed state.

RRahulSai05

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

74% match