TnT Tree

100%

✓ Published0🌍 Public

Last edited Oct 9, 2018

Created on Oct 9, 2018

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.

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>

forked from <a href='http://bl.ocks.org/63anp3ca/'>63anp3ca</a>'s block: <a href='http://bl.ocks.org/63anp3ca/cae46688bce904e4d0a4244338ebf2d6'>TnT Tree</a>

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

93% match

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

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

77% match

Loading thumbnail…

Tree Example

This example demonstrates a collapsible tree diagram built with D3.js, visualizing hierarchical data loaded from an internal JSON array. It shows a root node ("DEF") with branches extending to children, including nested nodes and collapsed subtrees that users can expand by clicking. The code converts flat JSON records into a tree structure using array reduction and parent-child mapping, then renders it with the `d3.layout.tree` layout and `d3.svg.diagonal` paths for connecting links. Node transitions animate smoothly when toggling collapsed states.

Dd3noob

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

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

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

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

76% match