Skip to main content
SimilarExport ZIP
100%

Fork of MY Tree ICE-8

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

AI-generated description

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

MIT Licensed

Similar vizzes

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

Fork of MY Tree ICE-8

This tree chart displays a family lineage starting with peddi kumara, with branching generations of descendants shown as clickable nodes. Built with D3.js v3.5, the visualization uses the `d3.layout.tree` algorithm and `d3.svg.diagonal` links to connect nodes. The SVG renders cyan circles with red borders for nodes, blue curved paths for links, and an orange page background. Animated transitions of 750 milliseconds reposition nodes when clicked, and the tree is arranged with fixed-depth spacing of 180 pixels per level.

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

Fork of MY Tree ICE-8

A family tree chart visualizes hierarchical relationships across three generations, with names displayed beside circular nodes connected by blue curved links. Users can collapse and expand branches by clicking nodes, revealing or hiding descendants. The visualization uses D3.js version 3.5.17 with the `d3.layout.tree` and `d3.svg.diagonal` APIs for layout and path generation, and applies CSS styling with cyan nodes, red strokes, and an orange background. SVG rendering is animated with transitions set to 750 milliseconds.

MMahitha-Moparthi
93% match
Loading thumbnail…

Fork of MY Tree ICE-8

This interactive tree chart displays a family hierarchy, starting with "nellore pedda Reddy" and branching into descendants. The visualization uses a red background, with cyan nodes connected by blue links; nodes expand or collapse when clicked. The code leverages the D3.js library (version 3.5.17) with its `d3.layout.tree` and `d3.svg.diagonal` APIs to calculate the radial layout and draw curved paths. Rendered as an SVG with animated transitions, the chart updates node positions and link paths when the hierarchy structure changes.

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

Fork of MY Tree ICE-8

This example displays a family tree as an animated node-link diagram, with a root ancestor and several generations of descendants. The tree data is manually defined in JavaScript, and each node can be clicked to collapse or expand its child branches. The visualization is built using the D3.js library (version 3.5.17), which handles the tree layout and SVG rendering. The code uses the `d3.layout.tree` API to compute node positions, `d3.svg.diagonal` to draw the connecting links, and animation via a `duration` variable to smoothly transition between states. The interface is styled with CSS, featuring a prominent heading and a strong color scheme of cyan, red, and blue on an orange background.

Cchoey1324@gmail.com
90% match
Loading thumbnail…

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.

VVAbhiram99
90% match