Fork of ice8

Fork of ice8

This fork of ice8 displays an interactive family tree from a JSON dataset, rendered as a collapsible hierarchy of circles and labels. Clicking a node toggles its children, animating the layout with smooth transitions. The visualization uses d3.layout.tree and d3.svg.diagonal to position and draw links, with SVG elements styled via CSS. Data loads from an external qn_tree.json file, and node expansion/collapse is handled through custom click events and update functions.

SSaivignesh-9176

Fork of Family tree ice8

This interactive family tree visualization displays hierarchical relationships from a JSON dataset, with nodes representing individuals and links showing parent-child connections. Users can click any node to collapse or expand its subtree, with smooth 1100ms transitions animating nodes and links to their new positions. The code uses D3.js v3’s `d3.layout.tree` for layout and `d3.svg.diagonal` for curved link paths, rendering as SVG. Nodes are styled with green circles and bold text, while collapsed nodes appear lightsteelblue. The animation is driven by D3 transitions, updating node transforms and link path geometry dynamically.

Aajaysonu

ice8

This interactive tree diagram visualizes a family hierarchy, starting with a root node and branching through named individuals. The graph shows parent-child relationships, with nodes that can be clicked to expand or collapse their descendants. Built with D3.js, the visualization uses a `d3.layout.tree` for positioning and `d3.svg.diagonal` for the connecting links. Data is loaded from an external JSON file, and the animated transitions between states are handled through D3’s `.transition().duration()` method.

PPujitha14challagulla

Fork of Fork of ICE-8 Family Tree

This example shows a family tree rendered as an interactive hierarchical diagram, with nodes representing people and links showing parent-child relationships. Users can click on nodes to expand or collapse their children, while smooth transitions animate the tree’s layout changes. Built with D3.js v3, it uses `d3.layout.tree` to compute positions and `d3.svg.diagonal` for curved links, with SVG circles and text for nodes. The data is hardcoded as nested JavaScript objects, and the visualization responds to user interaction via click handlers.

GGalineeharika

Fork of Fork of Family Tree ICE-8

This visualization shows an interactive family tree as a node-link diagram with collapsible branch nodes and directional links. It loads hierarchical JSON data and renders nodes as colored rectangles (coded by type) with SVG elements and animation. The code uses d3.layout.tree for the tree layout, d3.behavior.zoom for pan/zoom, and d3.select/append to build the SVG structure. Link labels and tooltips provide additional relationship details, while CSS styles define node colors, text appearance, and hover effects.

PPrathyusha0304

Fork of Fork of Family Tree ICE-8

PPrathyusha0304

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

Fork of Fork of ICE-8 Family Tree

AAnanyaSamala