Fork of ICE8 - Family Tree

100%

Fork of ICE8 - Family Tree

✓ Published0🌍 Public

AAkramjon1995

Last edited Apr 9, 2023

Created on Apr 9, 2023

This interactive family tree visualization displays a hierarchical genealogy of the Sammaiah family using D3.js v3. The tree layout arranges colored nodes representing family members, with each node color-coded by generation type and connected by labeled links showing relationship directions. Users can click nodes to collapse or expand branches, while CSS tooltips provide additional information on hover. The visualization loads data from a JSON file and renders as an SVG with zoom and drag capabilities.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE8 - Family Tree

This interactive family tree visualization displays a hierarchical genealogy chart rooted at Sammaiah, with branches extending to children and grandchildren. The tree uses color-coded nodes by generation type and animated expanding/collapsing interactions. Built with D3.js v3, it implements a custom `d3.layout.tree()` for positioning, with SVG rendering for nodes and links. The visualization includes tooltips, zoom and drag behavior, and transition animations. Node data comes from a JSON file, with CSS styling handling visual properties like node appearance, link strokes, and hover states.

PPallaviManupati

93% match

Loading thumbnail…

Fork of ICE8 - Family Tree

This interactive family tree visualization displays a hierarchical genealogy chart with color-coded nodes representing different family members across four generations. Built with D3.js v3 and SVG, the tree uses a collapsible node layout with animated transitions, allowing users to expand and collapse branches. The data comes from a JSON file structure populated with names and relationship links. The visualization includes zoom and drag capabilities, tooltips, and directional arrows showing parent-child connections, with node colors distinguishing between different types of family relationships.

SSANEEM MOHAMMAD

91% match

Loading thumbnail…

Fork of ICE-8 Family Tree

This interactive family tree uses D3.js version 3 to render hierarchical data from a JSON file as a collapsible layout. SVG rectangles represent family members, colored by generation, with HTML foreignObject labels showing names and relations. Clicking a node triggers a transition that expands or collapses its children, while tooltips and arrow markers highlight connections. The layout dynamically adjusts its width and height based on tree depth and breadth, using D3’s tree layout and transition methods for smooth animations.

AAnanyaSamala

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

89% match

Loading thumbnail…

Fork of ICE8 - Family Tree

This interactive family tree visualization displays hierarchical relationships using collapsible nodes, with each person represented as a colored rectangle. Built with D3 v3, it loads data from a JSON file and renders an SVG tree layout. Users can click nodes to expand or collapse branches, with the view supporting both zoom and drag interactions. The code uses `d3.layout.tree`, `d3.behavior.zoom`, and custom tooltip elements to show link details, with node colors distinguishing different relationship types.

Mmandalasaikrishna007

88% match

Loading thumbnail…

Fork of ICE8 - Family Tree

This interactive family tree displays a genealogical hierarchy from a JSON data source, with each person represented as a colored node and connected by labeled links. The visualization uses D3 v3’s tree layout and behavior.zoom API to arrange nodes and enable panning and zooming, while SVG rectangles and foreignObject elements render the nodes and their text labels. A custom collision function adjusts node positions to prevent overlap, and clicking a node triggers an update function to reorganize the tree.

NNiha

88% match

Loading thumbnail…

Fork of ICE8 - Family Tree

This interactive family tree visualization displays a hierarchical dataset of individuals, with nodes color-coded by their type and labeled with names. Clicking nodes toggles their child branches, while tooltips appear on hover. Built with D3.js v3, it uses a collapsible tree layout with SVG rendering, zoom and drag behavior, and animated transitions between states. Data is loaded from an external JSON file, and custom styles define node shapes, link colors, and tooltip backgrounds.

KKarnisrikanth

88% match

Loading thumbnail…

Fork of ICE8 - Family Tree

This interactive family tree visualizes genealogical relationships as a collapsible tree diagram. Built with D3.js v3 and jQuery, it uses SVG rendering and smooth animations to expand and collapse hierarchical nodes. Each family member is represented by a colored rectangle, with node types mapped to distinct colors (light green, grey, pink, orange). The layout automatically calculates dimensions via breadth-first traversal, and includes zoom and drag functionality via D3's zoom behavior. Data is loaded from a JSON file, and tooltips show additional information while links display relationship direction markers.

PPiotr Paszek

88% match