Tree of Life

100%

✓ Published0🌍 Public

Last edited Mar 10, 2023

Created on Mar 9, 2023

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.

AI-generated description

MIT 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

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

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

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

78% match

Loading thumbnail…

Fork of Fork of Fork of Family Tree of plants

This visualization presents an interactive hierarchical tree of the animal kingdom, showing the classification from "Animals" down through vertebrates and invertebrates to specific groups like Mammals, Birds, Fish, and Amphibians. Built with D3.js v3, it renders nodes as colored rectangles connected by animated SVG links, with each node color-coded by its hierarchical level (type1 through type4). The layout uses `d3.layout.tree` with zoom and drag behaviors, and includes tooltips and click interactions to expand or collapse subtrees. Data comes from a JSON file structured with nested children arrays.

NNikhilchiguru-8

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

78% 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…

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

78% match