Skip to main content
SimilarExport ZIP
100%

Tree ICE-8

✓ Published0🌍 Public
SSubhas Ramdass
Last edited Jan 12, 2025
Created on Jan 11, 2025
Forked from MY Tree ICE-8

A family tree visualization presents hierarchical relationships among members of the Peddi family, rendered as an animated, collapsible tree diagram. The chart uses D3.js version 3.5.17 with the `d3.layout.tree` for layout and `d3.svg.diagonal` for curved links between nodes. Each person appears as a cyan circle with red borders and a name label; clicking a node toggles the visibility of its children. The visualization loads data from an embedded JavaScript array and displays it via SVG elements with CSS styling. The page includes an orange background and a centered title.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript. .

MIT Licensed

Similar vizzes

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

Tree Chart ICE-8

A collapsible family tree chart displays hierarchical relationships among named individuals using D3.js layout and SVG rendering. Clicking nodes toggles child branches, with animated transitions updating node positions and link paths. The code constructs a tree layout with `d3.layout.tree`, draws links as red diagonal paths, and styles nodes with cyan circles and green borders. The dataset is a hardcoded JSON family tree, rendered on a yellow background with 750-millisecond duration animations.

Ggayuvurukuti@gmail.com
89% match
Loading thumbnail…

MY Tree ICE-8

This interactive tree chart visualizes a family hierarchy using D3.js. An animated SVG layout, with blue links and red-bordered nodes, shows the relationships from a single ancestor down through multiple generations. The code uses the `d3.layout.tree` API to position nodes and `d3.svg.diagonal` for the connecting paths. Clicking a node triggers a smooth transition, collapsing or expanding its children, while all elements are styled through inline CSS.

Ssaishashank
89% match
Loading thumbnail…

ICE8_family_tree

This interactive family tree visualization displays hierarchical relationships using a branching node-and-link layout, with each person represented as a circle and their descendants connected by curved paths. The tree expands smoothly when new nodes are introduced, with transitions animating nodes to their final positions. Built with D3.js version 3.5, it uses `d3.layout.tree`, `d3.svg.diagonal`, and CSS-styled SVG elements, with node colors and names coming from the embedded JavaScript dataset.

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

Fork of MY Tree ICE-8

This interactive tree chart displays a family lineage, starting with Peddi Kumara and branching through multiple generations of children and grandchildren. Rendered as an animated SVG using the D3.js library (version 3.5.17) and its `d3.layout.tree` and `d3.svg.diagonal` APIs, the visualization lets users click on nodes to expand or collapse subtrees. The cyan and red circular nodes with blue connecting links are styled via CSS, and the tree is laid out vertically with a dark orange page background.

GGalineeharika
88% match
Loading thumbnail…

Fork of MY Tree ICE-8

This animated tree chart displays a three-generation family tree rooted at "peddi kumara," with branches for children and grandchildren. Built with the D3.js library (version 3.5.17), the SVG visualization uses the `d3.layout.tree` algorithm to position nodes and `d3.svg.diagonal` to draw curved links between relatives. Nodes are clickable, triggering smooth transitions that expand or collapse subtrees, while the orange background, cyan-filled circles with red strokes, and blue links give the chart a distinctive color scheme. The interaction and layout transitions rely on D3's selection and transition methods to animate node positions and link paths.

LLin Xing
88% match