Skip to main content
SimilarExport ZIP
100%

MY Tree ICE-8

✓ Published1🌍 Public
VVAbhiram99
Last edited Apr 12, 2023
Created on Apr 12, 2023
Forked from 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.

AI-generated description
MIT Licensed

Similar vizzes

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

MY Tree ICE-8

This interactive tree diagram displays a family genealogy with animated expansion and collapse of branches. Built with React and D3.js v3, it uses `d3.layout.tree` to compute node positions and `d3.svg.diagonal` for curved links, rendered as SVG. Clicking a node toggles its children, with transitions animating nodes and links via `transition().duration()`. The data is a hardcoded JavaScript array of family members, styled with cyan circles, green links, and a light pink background.

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

ICE-8

This interactive family tree visualizes three generations of a family, with names displayed in a hierarchical layout branching from a single root ancestor. The SVG rendering uses D3.js v3’s `d3.layout.tree` to position nodes and `d3.svg.diagonal` for curved links. Users can click any node to collapse or expand its children, with smooth `transition` animations adjusting node positions and link paths. The data is hardcoded as a JSON array in the script, and styling includes violet backgrounds, cyan circles, and green strokes.

DDineshK2602
91% match
Loading thumbnail…

MY Tree ICE-8

This interactive tree chart displays a family genealogy, with the root ancestor “chandraiah” branching into children and grandchildren. Nodes representing each person are drawn as cyan circles with blue outlines, connected by black curved links. The visualization is built using the D3.js library (version 3.5.17) and its `d3.layout.tree` and `d3.svg.diagonal` APIs. Clicking a node collapses or expands its subtree with a smooth 750-millisecond transition, and the SVG is rendered with animated updates to node positions and link paths.

Hhm0421
91% 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
90% 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
90% match