Fork of MY Tree ICE-8

100%

Fork of MY Tree ICE-8

✓ Published0🌍 Public

Last edited Jun 30, 2023

Created on Jun 30, 2023

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.

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

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

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

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

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

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

90% match

Loading thumbnail…

Fork of ice8

This interactive tree diagram displays a family hierarchy loaded from a JSON file, with nodes labeled by names and connected by curved links. Users can click any node to collapse or expand its subtree, with smooth 1.1-second transitions animating nodes and links to new positions. The visualization uses D3.js v3’s `d3.layout.tree` for layout and `d3.svg.diagonal` for link paths, rendered as SVG with green-bordered circles and bold text labels. Node expansion state is managed by toggling between `children` and `_children` arrays.

PPujitha14challagulla

90% match