Tree of Life

100%

✓ Published0🌍 Public

Last edited Feb 7, 2018

Created on Feb 7, 2018

This radial phylogenetic tree of life visualizes evolutionary relationships among bacterial species as curved links radiating from a central root, with faded gray connector lines linking leaf nodes to their labels. A checkbox toggles between constant and variable branch lengths, showing evolutionary divergence. The code uses d3.cluster layout, d3.hierarchy, d3.text for data parsing, and transitions to animate between states, with mouseover highlighting the active path.

AI-generated description

A re-implementation of Jason Davies’ Phylogenetic Tree of Life, with faded gray lines to connect the leaf nodes of the tree to their corresponding labels inspired by a figure from Nature.

This implementation modifies the depth of interior nodes in a cluster layout to show branch lengths. Toggle the checkbox in the top-left corner to show or hide branch lengths, and mouseover a label to highlight its path to the root.

forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/c034d66572fd6bd6815a'>Tree of Life</a>

gpl-3.0 Licensed

Similar vizzes

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

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

88% match

Loading thumbnail…

Data Visualization ICE8- Tree Map

This interactive tree map visualizes a phylogenetic tree of life, showing the hierarchical relationships among Bacteria, Archaea, and Eukarya down to specific species. Built with D3.js version 3.5, it uses `d3.layout.tree` to compute node positions and `d3.svg.diagonal` to draw curved links between generations. Users can expand or collapse branches through click interactions, with smooth animations updating the SVG layout. The dataset is embedded as a JavaScript array, with nodes colored by taxonomic level, and node styling defined via CSS.

Ppravalika.thogaru10@gmail.com

76% match

Loading thumbnail…

RADIAL TREE 2

A radial tree visualization displays a hierarchical dataset as curved links radiating from a central root node, with leaf nodes positioned along the outer circumference. The code uses D3 v4's `d3.tree()` layout with a radial size, `d3.stratify()` to parse hierarchical CSV data, and `d3.linkRadial()` to generate the bezier paths. SVG circles mark nodes, while panning and zooming are enabled via the `d3.zoom()` API. The flare.csv dataset provides the hierarchy, and the rendering is entirely SVG-based with light blue translucent links.

WWillPCowan

74% match

Loading thumbnail…

Family Tree

This animated family tree visualizes the hierarchical relationships between animal species, using colored nodes to distinguish generations. The data is organized with `d3.stratify()` and laid out with `d3.tree()`, producing SVG paths that animate into position over 1.5 seconds. Node squares use a custom element with a `transition()` to grow to their final radius, while text labels display species names. All elements are rendered in SVG using D3 v6, with generation-specific fill colors and green animated connecting links.

Ssiddu7147

74% match

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

74% match

Loading thumbnail…

family tree

This interactive family tree visualization displays hierarchical relationships using collapsible nodes and animated transitions. Built with D3.js and jQuery, it renders an SVG tree with color-coded node types (blue, green, yellow, purple) and directional links labeled as SYNC or ASYN. The layout computes node positions dynamically via D3’s tree layout, with zooming, dragging, and tooltip support. Data comes from a local JSON file, and the tree adapts its dimensions to the maximum breadth and depth of the hierarchy during traversal.

AABCDB15

74% match

Loading thumbnail…

Tree chart

This interactive SVG tree chart displays a family lineage, using a hierarchical node-and-link diagram to show generational relationships from a single ancestor. The chart is generated with the D3.js library version 3.5.17, employing its layout tree and diagonal projection APIs to position nodes. Clicking on a node triggers an animated expansion or collapse of its children, with a 750-millisecond transition. Node circles are cyan with dark borders, and connecting links are coral, all set against a teal background. The data is hardcoded as a JavaScript array of family member names and parent-child links.

CChathurya

74% match