ICE8 - Family Tree

100%

ICE8 - Family Tree

✓ Published0🌍 Public

Last edited Jul 10, 2022

Created on Jul 10, 2022

This interactive family tree of carnivores visualizes hierarchical data using D3.js v3. The diagram displays animal classifications, from the root "Carnivores" through "Dog or Canine family" to specific species, with nodes colored by type. The visualization allows panning and zooming through the `d3.behavior.zoom` API, and clicking nodes to expand or collapse branches. JSON data from `familytree.json` drives the layout, rendered as SVG rectangles with `foreignObject` text elements and animated transitions.

AI-generated description

An example showing the capabilities of VizHub:

Loads D3 via UNPKG.
Demonstrates use of import from "d3".
Demonstrates use of import from local ES6 modules.

MIT Licensed

Similar vizzes

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

89% match

Loading thumbnail…

ICE8 - Family Tree

This interactive family tree visualizes the evolutionary relationships of hominoids, from the common ancestor "Hominoideo" down to the genera "Homo" and "Pan". Each node is a colored box representing a taxonomic group, loaded from a JSON data file via `d3.json`. The visualization uses `d3.layout.tree()` to compute the hierarchical layout, and renders the tree as an animated SVG, with user clicks triggering transitions of nodes and links. The code also applies CSS styling for the boxes and tooltips.

Nnehabaddam

88% match

Loading thumbnail…

ICE_8_Family_Tree

This interactive family tree visualization displays genealogical relationships using an animated, collapsible node-link diagram. Built with D3 v3 and SVG, it loads hierarchical JSON data from `family-data.json` and renders colored rectangular nodes representing family members, with links labeled by relationship direction. The visualization includes zoom and drag capabilities via `d3.behavior.zoom`, tooltips on hover, and smooth transitions when expanding or collapsing nodes through click interactions. The code uses `d3.layout.tree` for layout calculations and custom collision detection to prevent node overlap.

SShivaKarpe

87% match

Loading thumbnail…

Fork of Family Tree ICE-8

This interactive tree visualization displays hierarchical relationships among animal groups, using colored, rectangular nodes linked by directional arrows. The diagram organizes data from a JSON file into a branching structure rooted at "Animals," with categories like Vertebrates and Invertebrates. Rendered as an SVG using D3.js version 3, the visualization applies a tree layout and supports user interaction through zooming and dragging. The code uses `d3.layout.tree` to compute node positioning, and animates nodes with transitions, highlighting links and tooltips on hover.

SSharanya1307

87% match

Loading thumbnail…

ICE 8

This interactive visualization presents a classification tree of animals, grouping species into herbivores, omnivores, and carnivores with further subcategories. Built with D3.js version 3.5.17, the tree layout uses SVG rendering with animated transitions. Nodes are represented by teal circles with bold labels, connected by blue curved links. Clicking any node toggles its children, collapsing or expanding branches with smooth 750-millisecond transitions. The data structure is hardcoded in JavaScript, and the tree positions child nodes at fixed 180-pixel depth intervals.

Mmadanvemulapally

87% match

Loading thumbnail…

ICE-8 Animal Tree

This interactive visualization presents a hierarchical classification of animals as a branching tree. Built with D3.js v3, it uses an SVG-based layout with collapsible nodes, colored rectangles, and directional links to illustrate relationships between categories like vertebrates and non-vertebrates. The tree reads from a JSON data file and supports zoom and drag navigation via `d3.behavior.zoom`. Node colors correspond to taxonomic levels, while tooltips and click interactions reveal additional details about each group.

AAbhinav-Mullapudi

86% match

Loading thumbnail…

ICE8 - Family Tree

This example displays a family tree as an interactive hierarchical diagram using D3.js v3. The tree layout organizes nodes by generation, with each family member represented as a colored rectangle and labeled with their name. SVG elements render the nodes and links, while the data comes from a JSON file containing nested parent-child relationships. Clicking on nodes triggers zooming and dragging behavior via d3.behavior.zoom, and hovering reveals tooltips. The code employs d3.layout.tree for positioning and applies custom collision detection to prevent overlapping nodes.

LLakshmiVandanaNunna

86% match

Loading thumbnail…

Fork of ICE8 - Family Tree

This interactive visualization displays a phylogenetic family tree of animal groups, such as Ecdysozoa, Lophophore, and Trochophore, as an animated, zoomable SVG diagram. The code uses the D3.js v3 library, specifically `d3.layout.tree` and `d3.behavior.zoom`, to lay out and manipulate the hierarchical structure. Each node is colored by its type, and the tree is rendered dynamically from a JSON data source. The implementation includes interactive features like clicking nodes to expand or collapse branches, dragging to pan, and mouse-wheel zooming, all built with custom JavaScript functions and CSS styling.

Rradhadevarapu

86% match