Fork of ICE 8 Family Tree

100%

Fork of ICE 8 Family Tree

✓ Published0🌍 Public

Last edited Apr 3, 2022

Created on Apr 3, 2022

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.

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

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

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

95% match

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

94% match

Loading thumbnail…

Fork of 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.

NNaimisha-M

94% match

Loading thumbnail…

ICE 8 Family Tree

This visualization displays a hierarchical family tree using a horizontal dendrogram layout. The tree shows a root ancestor with three children, each branching into multiple generations with colored labels. The code uses D3 v5's `tree` layout and `hierarchy` function to compute node positions, with `linkHorizontal` for connecting paths. SVG elements are rendered within a React application, and the visualization includes zoom functionality via D3's `zoom` behavior. Node names and colors come from a local JSON file, with font size varying by tree depth.

KK V VINITHA

93% match

Loading thumbnail…

Fork of ICE 8 - Family Tree

This visualization displays a family tree using hierarchical data, with each person represented as a colored circle and labeled with their name. The tree is built from an array of parent-child relationships using the `d3.stratify()` and `d3.tree()` APIs, which compute node positions and link paths. Nodes are color-coded by depth—red for the root, blue for depth 1, and green for depth 2—while curved `path` elements with cubic Bézier curves connect each parent to their children. The data originates from a static JavaScript array, and the entire scene is rendered as SVG.

RRamakanth771

93% match