Skip to main content
SimilarExport ZIP
100%

Fork of Fork of Family Tree ICE-8

✓ Published0🌍 Public
PPrathyusha0304
Last edited Apr 4, 2022
Created on Apr 4, 2022

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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

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

Fork of Family Tree ICE-8

This interactive family tree visualization displays a multi-generational hierarchy, with each node representing a person and colored by a `type` field. The SVG rendering uses D3.js v3’s layout tree and zoom behavior to support panning and scaling. Node colors distinguish generations, while red arrows mark links between relatives. The tooltip and clickable nodes provide additional interaction, with data loaded from an external JSON file.

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

Fork of Fork of Family Tree ICE-8

This interactive family-tree visualization uses D3.js v3 with an animated, expandable node-link diagram. It displays a hierarchical dataset of animal classifications and family member names, rendered as colored rectangles connected by curved links. The tree layout algorithm, `d3.layout.tree`, computes node positions, while custom SVG elements and CSS styling via `tree-boxes.css` create the visual presentation. The implementation includes zoom and drag behavior, tooltips, and collision detection to manage overlapping nodes.

GGogineni44
93% match