4 Generations Monkey ICE-8

100%

4 Generations Monkey ICE-8

✓ Published0🌍 Public

Last edited Mar 30, 2023

Created on Mar 27, 2023

This interactive tree diagram visualizes four generations of monkey species, starting from Macaca mulatta and branching through subspecies like Macaca fuscata and Saimiri boliviensis. The SVG animation, built with d3.layout.tree and d3.svg.diagonal, arranges nodes horizontally by depth, with green dashed links connecting 12 named species. Users can click nodes to collapse or expand subtrees, highlighting the evolutionary relationships among the displayed primate taxa.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Tree chart for monkey species

This tree chart visualizes the classification of monkey species, starting from the Primates root and branching into Strepsirrhini and Haplorrhini subgroups, with individual species as leaf nodes. Node colors and link strokes vary by taxonomic level using a hierarchical data structure processed by d3.hierarchy and d3.tree. The SVG rendering includes curved paths for links via a custom cubic Bézier generator, with node text and circles styled through CSS. The dataset is embedded directly as a JavaScript object.

Pprachow

75% match

Loading thumbnail…

MY Tree ICE-8

This interactive family tree displays four generations of a single lineage, using a collapsible node layout. The chart renders as an SVG with animated transitions, where nodes are colored cyan with red outlines and connected by light blue links. The visualization is built with D3.js, employing the `d3.layout.tree` and `d3.svg.diagonal` APIs to compute the tree structure and draw the connecting paths. Clicking a node triggers a collapse or expand animation via the `transition` methods, adjusting the layout dynamically.

VVAbhiram99

74% match

Loading thumbnail…

ICE - 8 Family Tree

This interactive family tree visualizes the evolutionary hierarchy of Homo sapiens, from Hominoidea down to the genera Homo and Pan. Built with D3.js, the SVG diagram uses a collapsible tree layout with animated transitions for expanding and collapsing nodes. Clicking a node toggles its children, while links and circles are rendered using D3’s `d3.layout.tree` and `d3.svg.diagonal`. The data is hardcoded in JavaScript, and the styling uses custom CSS for node and link appearance.

Nnehabaddam

72% match

Loading thumbnail…

Tree ICE-8 BM

This interactive family tree visualizes three generations of a family, with each node representing a person colored by gender (blue for male, magenta for female). Built with D3.js version 3.5.17, the SVG diagram uses the `d3.layout.tree` and `d3.svg.diagonal` APIs to render hierarchical links, while animated transitions expand and collapse branches on click. The embedded JSON data defines parent-child relationships, and node colors update dynamically based on the gender attribute during the 750-millisecond transitions.

Bbmurill2019

72% match

Loading thumbnail…

Tree ICE-8

An interactive family tree visualization renders a multi-generational dataset as an animated node-link diagram. The chart displays relationships from a root ancestor downward, using cyan nodes with pink outlines and gray links. Users can click nodes to collapse or expand branches. The implementation utilizes the D3.js layout and SVG diagonal APIs to compute positions and draw curved edges, with CSS transitions animating node movements and link redraws over 750 milliseconds.

Cchandanagandla

72% match

Loading thumbnail…

Fork of MY Tree ICE-8

This interactive tree chart displays a family genealogy, starting with "peddi kumara" and branching into children and grandchildren. Users can click on a node to collapse or expand its subtree, with nodes and links smoothly animating to their new positions. The visualization is built with the D3.js library, using the `d3.layout.tree` for hierarchical layout and `d3.svg.diagonal` for curved links. The static SVG is rendered with custom CSS styles, including an orange background, cyan-filled circles with red strokes, and blue links, with an HTML page providing the interface.

Ppauldbayes@gmail.com

72% match

Loading thumbnail…

MY Tree ICE-8

This interactive family tree visualization shows a multi-generational genealogy chart with expandable and collapsible nodes. Using D3.js version 3.5.17, the tree layout (d3.layout.tree) arranges family members hierarchically, with cyan nodes connected by blue diagonal links. The chart features animated transitions (750ms duration) when clicking nodes to expand or collapse branches, with data embedded directly in the page as a JavaScript array. SVG rendering styles nodes with red strokes and orange background, while text labels display each person's name.

VVishnu Sudireddy

71% match

Loading thumbnail…

ICE 8 animals family tree

This interactive family tree visualizes animal classifications and their evolutionary relationships using a hierarchical tree layout. Users expand or collapse branches by clicking on nodes, with smooth 1.1-second transitions animating nodes and links to their updated positions. The code uses d3.layout.tree to position nodes, d3.svg.diagonal for curved connection paths, and d3.json to load the embedded data.json file containing taxonomic groupings. The SVG rendering includes custom node styling defined in CSS, with collapsed nodes distinguished by lightsteelblue fill.

MMounika0927

71% match