Skip to main content
SimilarExport ZIP
100%

Fork of MY Tree ICE-8

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

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

Fork of Fork of ICE-8 Family Tree

A family tree visualization renders hierarchical relationships as an interactive node-link diagram, with each family member displayed in a color-coded box with text for name, node type, and relation. Built with D3 v3, the layout uses `d3.layout.tree` to position nodes, and SVG rectangles and `foreignObject` elements render the node content, while links are drawn as paths with arrow markers. Clicking a node toggles its children’s visibility, and transitions animate nodes to new positions over 600 milliseconds. Data comes from a JSON structure containing nested family members, with tooltips providing additional details on hover.

AAnanyaSamala
87% match
Loading thumbnail…

Fork of Fork of ICE-8 Family Tree

A family tree visualization renders hierarchical relationships as an interactive node-link diagram, with each family member displayed in a color-coded box with text for name, node type, and relation. Built with D3 v3, the layout uses `d3.layout.tree` to position nodes, and SVG rectangles and `foreignObject` elements render the node content, while links are drawn as paths with arrow markers. Clicking a node toggles its children’s visibility, and transitions animate nodes to new positions over 600 milliseconds. Data comes from a JSON structure containing nested family members, with tooltips providing additional details on hover.

AAnanyaSamala
87% match