Skip to main content
SimilarExport ZIP
100%

ICE8 - Family Tree

✓ Published0🌍 Public
Nnehabaddam
Last edited Mar 30, 2023
Created on Mar 29, 2023

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.

AI-generated description
MIT Licensed

Similar vizzes

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

ICE8 - Family Tree

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.

SShishiraRudrabhatla
88% match
Loading thumbnail…

ICE-8 Family Tree

This interactive D3 v3 visualization displays a hierarchical family tree, using a collapsible node layout to show relationships from grandparents down to nieces and nephews. The tree renders as SVG rectangles with color-coded node types and includes animated transitions. Built with the `d3.layout.tree` API, it loads family data from a JSON file and supports click interactions to expand or collapse branches, with tooltips providing additional details.

KKande2011
88% match
Loading thumbnail…

ICE 8 Family Tree

This interactive family tree visualization displays the ICE 8 lineage, using a hierarchical layout to organize three generations of relationships. Each node is labeled with a family member's name and colored according to their generational level. The implementation uses D3 v5’s `tree` layout, `linkHorizontal` path generator, and `hierarchy` function to structure the data from a nested JSON file, with SVG rendering. Pan and zoom capabilities are added via D3’s `zoom` event, while text styling and custom fonts are applied through CSS.

NNaimisha-M
87% match
Loading thumbnail…

ICE-8 Family Tree

This interactive family tree visualization displays generational relationships using a collapsible hierarchy. The D3 v3 tree layout positions colored nodes by family type, with light green for grandparents, grey for parents’ siblings, blue for siblings/cousins, and pink for the next generation. Clicking nodes collapses or expands branches with animated transitions, while SVG arrows and light steelblue links trace connections. Tooltips provide additional relationship details when hovering. The code uses `d3.layout.tree`, `transition().duration()`, and `foreignObject` for wrapped text labels, loading data from a local JSON file.

AAnanyaSamala
87% 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…

ICE-8_Family_Tree

This interactive family tree visualizes hierarchical relationships among named individuals using a collapsible, animated node-link diagram. The SVG-based visualization uses D3.js v3 with the `d3.layout.tree` API to compute tree layouts, and includes features like color-coded node types (Type1–Type4), zoom and drag behavior, and tooltip interactions. Data is loaded from a JSON file via `d3.json`, and animations are triggered through `d3.behavior.zoom` and node click handlers. The rendering emphasizes clear parent-child links and supports interactive exploration of the genealogy structure.

MMahitha-Moparthi
87% match
Loading thumbnail…

ICE-8(Family Tree)

This family tree visualization presents a hierarchical genealogy using an interactive node-link diagram. Data loaded from `data.json` via `d3.json` populates the tree structure, which is rendered as SVG rectangles and labels. Implemented with `d3.layout.tree`, the visualization uses colored nodes (based on `type`), animated transitions on click, and includes zoom and drag capabilities, with drop shadows and tooltips to enhance the presentation.

Jjayanthamol99
87% match