Skip to main content
100%

Tree of Life

✓ Published0🌍 Public
TTipTopCoder
Last edited Jun 26, 2018
Created on Jun 26, 2018

A radial phylogenetic tree of life, rendered with D3 v4, displays thousands of species as leaf labels arranged around a circle, connected by branching links to a central root. The tree uses a cluster layout with modified node depths to encode branch lengths, and faded gray line extensions connect each leaf to its label. Users can toggle a checkbox to show or hide branch lengths, and mouseover a label to highlight its path to the root. The visualization includes a color-coded legend for the three domains of life—Bacteria, Eukaryota, and Archaea—and animates the transition when toggling branch lengths.

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/git-ashish/'>git-ashish</a>'s block: <a href='http://bl.ocks.org/git-ashish/3aa81521f96e48198c80b4e2742bb6bc'>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

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.

RRodrigoGonzalez
91% 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
91% match
Loading thumbnail…

Tree

This example displays a three-layer biological taxonomy tree for the animal kingdom, organizing species under their respective classes beneath the root kingdom Animalia. The visualization uses D3.js v7 with the `d3.hierarchy` and `d3.tree` layout APIs to position nodes, while `d3.linkHorizontal` draws the connecting edges between hierarchical levels. Node colors and radii encode depth, with the root, class, and species layers distinguished by distinct hues. SVG rendering presents the tree with labels positioned to the left for parent nodes and to the right for leaf nodes.

Mmustafaksyed1@gmail.com
79% match
Loading thumbnail…

Tree Visualization

This visualization presents a hierarchical tree diagram of animal categories, showing the branching structure from a root "Animals" node down to leaf species. It uses D3 v6’s `d3.hierarchy` and `d3.tree` layouts to compute positions, rendering SVG paths for links via `d3.linkHorizontal` and circles with text labels for nodes. The code colors nodes by depth (black for root, blue for internal, green for leaves) within a hardcoded dataset of mammals, birds, and reptiles.

BBhavanaGIrni
78% 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
77% match
Loading thumbnail…

Fork of Tree

This fork of a tree visualization displays a biological taxonomy hierarchy, showing the classification of living organisms from the kingdom level (Animalia) down to specific species like Lion, Eagle, and Octopus. The diagram uses colored nodes and connecting links to distinguish four taxonomic layers: Kingdom, Phylum, Class, and Species, with a legend explaining the color coding. Built with D3 v7, the visualization constructs the hierarchy from a flat list of parent-child relationships using `d3.stratify`, then renders the result as an SVG tree with labeled circular nodes. The HTML page includes a styled chart container and a color legend, presenting the data vertically with a viewBox of 1000 by 800 pixels.

Ppragnyalipsa96@gmail.com
77% match
Loading thumbnail…

Fork of Animal Kingdom — Taxonomy Tree

This visualization presents the Animal Kingdom as an interactive taxonomic tree, branching from a root through kingdom, class, and order layers down to individual species. Nodes are colored by depth, and hovering reveals tooltips. Built with D3 version 7, it uses `d3.stratify()` to convert a flat parent-child data array into a hierarchy, then `d3.tree()` to compute positions for the SVG rendering. Links and node circles are styled with CSS classes based on depth, and a color legend explains the layer mapping.

Mmeangreen0067@gmail.com
75% match