Fork of Family Tree ICE-8

100%

Fork of Family Tree ICE-8

✓ Published0🌍 Public

Last edited Apr 3, 2022

Created on Apr 3, 2022

This interactive family tree visualization displays a hierarchical dataset of named individuals connected by directional links. It uses D3.js v3 with SVG rendering to draw collapsible nodes, where each person is represented by a colored rectangle based on type, and animations smoothly transition nodes when clicked. The layout is computed with `d3.layout.tree`, while zoom and drag behavior is enabled via `d3.behavior.zoom`. Tooltips and arrow markers are included, and CSS defines styling for links, nodes, and selection states.

AI-generated description

MIT Licensed

Similar vizzes

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

93% match

Loading thumbnail…

Fork of Fork of Family Tree ICE-8

PPrathyusha0304

93% match

Loading thumbnail…

Fork of ICE-8 (Family Tree)

This interactive family tree visualizes hierarchical relationships through a node-link diagram, where colored rectangles represent individuals and connecting lines show parent-child links. The visualization uses D3 v3 (d3.layout.tree) to compute a tidy tree layout, rendering nodes as SVG rectangles with hover tooltips and supporting click-to-expand/collapse interactions. Data is loaded from a JSON file containing a nested tree structure with different node types indicated by color coding. The implementation includes zoom and drag behavior through d3.behavior.zoom, with dynamic SVG dimensions calculated from tree depth and breadth to ensure all nodes fit within the viewport.

Bbhargavarathod

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

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