Skip to main content
SimilarExport ZIP
100%

Fork of ICE8 - Family Tree

✓ Published0🌍 Public
TTejucmandava
Last edited Apr 12, 2023
Created on Apr 12, 2023
Forked from ICE8 - Family Tree

This example displays a family tree as an animated, zoomable node-link diagram, using color-coded rectangles to represent different generations and branches. Built with D3.js v3, it reads hierarchical family data from a JSON file and renders it as an SVG using `d3.layout.tree`. Nodes open and close on click with a smooth transition, while links are drawn with arrow markers and tooltips show additional details. The layout adjusts dynamically to prevent node collisions.

AI-generated description
MIT Licensed

Similar vizzes

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

Fork of ICE8 - Family Tree

This interactive family tree visualization displays hierarchical relationships using an SVG-based node-link diagram. The tree is rendered with colored, rounded rectangles representing individuals, connected by labeled, arrowed links. Built with D3 v3’s layout and behavior APIs (`d3.layout.tree`, `d3.behavior.zoom`), the visualization supports zooming, panning, and node expansion via click interactions. Data is loaded from a local JSON file (`data.json`), and custom CSS controls node colors and tooltip styling.

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

Fork of ICE8 - Family Tree

A family tree visualization renders hierarchical relationships as a branching SVG chart, with nodes colored by generation (type) and connected by directional links. The D3 v3 layout computes node positions, while custom collision detection prevents overlaps. Interactive zoom-and-drag behavior is enabled via `d3.behavior.zoom`, and clicking a node toggles its children. Node styling includes drop shadows and tooltips, with data loaded from a JSON file. Rendering uses SVG elements and foreignObject for text, with persistent animation during updates.

Yyaswanthsen
93% match
Loading thumbnail…

Fork of ICE - 8 : Family Tree

This example renders a hierarchical family tree as an interactive SVG visualization using D3 v3 and jQuery. The tree layout positions nodes by depth, with each generation colored by type (blue, green, yellow, purple) and connected by black links with orange arrow markers. Users can click nodes to expand or collapse branches, while drag-to-pan and zoom behavior is enabled via `d3.behavior.zoom`. Data is loaded from a JSON file containing nested student records, with tooltips and drop shadows enhancing node presentation.

Sspandhanabadekol
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
93% 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
92% match