Fork of ICE 8 Family Tree

100%

Fork of ICE 8 Family Tree

✓ Published9🌍 Public

Last edited Apr 3, 2022

Created on Apr 3, 2022

This interactive family tree visualizes hierarchical relationships using a horizontal dendrogram layout. Each node displays a name and is colored according to a distinct hex value from the included JSON data structure. The visualization is rendered as SVG using D3 v5’s `tree`, `hierarchy`, and `linkHorizontal` APIs, with zoom functionality provided by d3’s `zoom` behavior. Text labels vary in size based on node depth, and the layout adjusts dynamically to the viewport dimensions.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

Fork of ICE 8 Family Tree

This interactive family tree visualization presents hierarchical relationships as a horizontal dendrogram, with root nodes branching outward to descendants. The tree is rendered as SVG using D3 v5’s `tree()` layout and `linkHorizontal()` path generator, while a `zoom()` behavior enables pan and zoom. Node colors and font sizes vary by depth, with labels drawn from a JSON data file. The React framework manages the component, and CSS applies the Playfair Display font and a white text shadow for readability.

Mmanvithareddykarra

96% match

Loading thumbnail…

Fork of ICE 8 Family Tree

This visualization shows a family tree rendered as a horizontal dendrogram, with each individual displayed as a colored label connected by black links. The tree's structure is derived from a hierarchical JSON data file, and the node fill colors are specified within the data itself, distinguishing generations. Built with React and D3 v5, the code uses `tree()` and `hierarchy()` to compute the layout, `linkHorizontal()` to generate the connecting paths, and a `zoom()` interaction for panning and scaling. Text elements are styled with a Playfair Display font and a white text-shadow on an SVG canvas.

Mmanvithareddykarra

95% match

Loading thumbnail…

Fork of Fork of ICE 8 Family Tree

This example displays a family tree as a horizontal dendrogram, with each node colored according to its branch. The visualization uses D3 v5’s `tree` layout and `hierarchy` to compute node positions, while `linkHorizontal` generates the curved links between parent and child nodes. Interactive pan and zoom are enabled via D3’s `zoom` behavior, and SVG `text` elements render labels with sizes scaled by depth. The data is loaded as JSON and parsed with `d3.json`, with node colors applied directly from the dataset’s `color` property.

PPrathyusha0304

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

93% match

Loading thumbnail…

Fork of ICE 8 Family Tree

This example presents a family tree as a zoomable, horizontal node-link diagram. It visualizes hierarchical relationships across multiple generations, with each individual represented as a labeled node and colored links connecting parents to children. The visualization uses D3 v5's `tree` layout and `linkHorizontal` generator to position nodes and draw curved paths, while labels display each family member's name with distinct colors. The SVG scene supports pan and zoom through D3's `zoom` behavior, and the code loads data from a JSON file, using the `hierarchy` function to structure the nested family data.

Bbhanuteja1807@gmail.com

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

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