Skip to main content
SimilarExport ZIP
100%

Fork of ICE 8 Family Tree

✓ Published0🌍 Public
NNaimisha-M
Last edited Jul 7, 2022
Created on Jul 7, 2022
Forked from ICE 8 Family Tree

This example renders a hierarchical family tree as an interactive SVG visualization using D3.js v5 within a React framework. The tree layout positions nodes by depth, with colored labels—crimson root, orange children, indigo grandchildren, and blue leaves—displayed in a brush script font. The code uses `d3.tree`, `d3.hierarchy`, and `d3.linkHorizontal` to generate the structure and paths, while `d3.zoom` enables panning and scaling. Data comes from a local `data.json` file, and white text shadows improve label readability against the black link strokes.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of ICE 8 Family Tree

This example renders a family tree as a hierarchical node-link diagram using React and D3 v5. The visualization reads hierarchical data from a JSON file, applying a tree layout (`d3.tree`) and drawing curved links with `d3.linkHorizontal`. Nodes appear as colored labels, with font size scaling by depth and fill color set per node’s data. The SVG supports pan and zoom via `d3.zoom` on the root group.

Mmanvithareddykarra
95% match
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
94% 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
94% 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 Fork of ICE-8 Family Tree

This example shows a family tree rendered as an interactive hierarchical diagram, with nodes representing people and links showing parent-child relationships. Users can click on nodes to expand or collapse their children, while smooth transitions animate the tree’s layout changes. Built with D3.js v3, it uses `d3.layout.tree` to compute positions and `d3.svg.diagonal` for curved links, with SVG circles and text for nodes. The data is hardcoded as nested JavaScript objects, and the visualization responds to user interaction via click handlers.

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

Fork of ICE-8: Family Tree

This example visualizes a family tree using a hierarchical layout, with nodes representing individuals and links showing parent-child relationships. Rectangular nodes with names animate into position, and connecting paths draw from parent to child. The visualization is rendered as SVG using D3 v6, employing `d3.stratify()` to structure the flat data and `d3.tree()` to compute positions. Transitions animate the paths and text, with staggered delays based on node depth.

Bbhargavarathod
92% match
Loading thumbnail…

Fork of ICE 8 Family Tree

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.

Ssaivinay143
92% match