Fork of ICE-8_Family_Tree

100%

Fork of ICE-8_Family_Tree

✓ Published0🌍 Public

Last edited Mar 29, 2023

Created on Mar 29, 2023

This fork of ICE-8 Family Tree displays a hierarchical animal classification tree, from Animals down to specific species like Lion, Tiger, Beaver, and Turtles. It uses d3.v3 layout and zoom/pan behaviors, rendering nodes as colored rectangles with SVG and HTML foreignObjects, plus animated transitions. The code loads data from a JSON file and assigns distinct colors by node type.

AI-generated description

MIT Licensed

Similar vizzes

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

90% match

Loading thumbnail…

Fork of Fork of Family Tree ICE-8

This interactive family-tree visualization uses D3.js v3 with an animated, expandable node-link diagram. It displays a hierarchical dataset of animal classifications and family member names, rendered as colored rectangles connected by curved links. The tree layout algorithm, `d3.layout.tree`, computes node positions, while custom SVG elements and CSS styling via `tree-boxes.css` create the visual presentation. The implementation includes zoom and drag behavior, tooltips, and collision detection to manage overlapping nodes.

GGogineni44

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

87% match

Loading thumbnail…

Animal tree fork for ICE 8

This example visualizes a hierarchical animal classification tree, from "Animals" down to specific groups like mammals, birds, and arthropods. It shows the branching structure of the data with color-coded nodes and animated SVG rendering. The visualization is built with D3.js v3, using the `d3.layout.tree` API to compute the layout and coordinates. Link labels and directional arrows are included, and the tree supports zooming and dragging via `d3.behavior.zoom`. The underlying data is loaded from a JSON file, and node colors are assigned based on type attributes during a breadth-first traversal.

Ssushmithameher-patnam

87% match

Loading thumbnail…

Fork of ICE8 - Family Tree

This visualization displays a family tree as an interactive, collapsible hierarchy. Using the D3.js library (v3), it renders nodes as colored rectangles representing family members, connected by curved links, with tooltips and zoom/pan support. The tree layout is computed via `d3.layout.tree`, and the data is loaded from a JSON file containing nested family relationships. SVG elements and a zoom behavior enable animation and navigation, with node colors indicating generational types.

Bbhargavarathod

87% match

Loading thumbnail…

Fork of ICE8 - Family Tree

A family tree visualization renders hierarchical relationships as a branching SVG chart, with nodes colored by generation (type) and connected by directional links. The D3 v3 layout computes node positions, while custom collision detection prevents overlaps. Interactive zoom-and-drag behavior is enabled via `d3.behavior.zoom`, and clicking a node toggles its children. Node styling includes drop shadows and tooltips, with data loaded from a JSON file. Rendering uses SVG elements and foreignObject for text, with persistent animation during updates.

Yyaswanthsen

86% match

Loading thumbnail…

Fork of ICE8 - Family Tree

This interactive family tree visualization displays hierarchical relationships using an SVG-based node-link diagram. The tree is rendered with colored, rounded rectangles representing individuals, connected by labeled, arrowed links. Built with D3 v3’s layout and behavior APIs (`d3.layout.tree`, `d3.behavior.zoom`), the visualization supports zooming, panning, and node expansion via click interactions. Data is loaded from a local JSON file (`data.json`), and custom CSS controls node colors and tooltip styling.

Bbhargavarathod

86% match

Loading thumbnail…

Fork of ICE-8 (Family Tree)

This interactive family tree visualizes hierarchical relationships through a node-link diagram, where colored rectangles represent individuals and connecting lines show parent-child links. The visualization uses D3 v3 (d3.layout.tree) to compute a tidy tree layout, rendering nodes as SVG rectangles with hover tooltips and supporting click-to-expand/collapse interactions. Data is loaded from a JSON file containing a nested tree structure with different node types indicated by color coding. The implementation includes zoom and drag behavior through d3.behavior.zoom, with dynamic SVG dimensions calculated from tree depth and breadth to ensure all nodes fit within the viewport.

Bbhargavarathod

86% match