Skip to main content
SimilarExport ZIP
100%

ICE-8: Family Tree

✓ Published1🌍 Public
MManasaPatange
Last edited Apr 3, 2022
Created on Mar 30, 2022
Forked from HTML Starter

This example visualizes a family tree using a hierarchical layout, displaying relationships between individuals such as Sai, Raju, Swathi, and their descendants. The tree is rendered as an SVG with orange rectangular nodes connected by purple animated links, which draw from source to target over one second. The code constructs the hierarchy with `d3.stratify()` and positions nodes using `d3.tree()`, then applies transitions to text and paths for a dynamic reveal. Data is hardcoded as an array of child-parent pairs, with styling defined via CSS for circles, text, and paths.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE - 8: Family_Tree_Srinivas

This example shows a family tree of named characters, with circular nodes connected by animated straight-line links. The layout is computed using `d3.stratify()` to build a hierarchy from parent-child data and `d3.tree()` to position nodes. The SVG rendering uses `d3.select`, and node circles and text are appended with transitions that animate their appearance. Links are drawn as path elements that animate from the source to the target position. The data is a static array of ten entries, and the visualization uses d3 v6 with a light blue background and orange nodes.

Ssrinivasaraosankula
92% match
Loading thumbnail…

ICE-8: Family Tree

This interactive visualization shows a family tree graph using D3.js version 6 within a React framework, rendered as animated SVG elements. The code uses d3.stratify to convert a flat array of parent-child relationships into a hierarchical structure, then d3.tree() to compute node positions. Links animate from source to target positions via transition.duration(), while descendant nodes appear as skyblue rectangles with brown borders, displaying names through text elements. The visualization demonstrates how d3.js transitions bring static hierarchical data to life through sequential path and text animations.

RRohith arabati
91% match
Loading thumbnail…

ICE 8 - Family Tree

This visualization displays a family tree as a tidy tree layout using D3.js v5. The code defines hierarchical data with parent-child relationships and renders it as an SVG, with circular nodes colored by depth (green for the root, red for the second level, and blue for deeper nodes). Curved paths connect parent and child nodes using cubic Bézier commands. Each node is labeled with the person’s name. The example uses D3’s `stratify`, `tree`, and `links` APIs to compute the layout and structure.

Ssaidhiraj16
91% match
Loading thumbnail…

ICE 8 - Family Tree

This interactive family tree visualization presents hierarchical relationships using collapsible nodes, with each person’s name displayed and colored by generational level. Built with D3.js (v3) and rendered as animated SVG, the tree uses a diagonal link generator and tree layout to organize entries like Srinivasulu, Venkateswar, and Jasvitha. Clicking a node toggles its children, with smooth transitions updating node positions via the `update` function. The static data is embedded in JavaScript, and the page includes custom CSS for node styling and a light green background.

JJasvitha Allamsetty
91% match
Loading thumbnail…

ICE 8 - Family_Tree_Srinivas

This example visualizes a family tree using D3.js v5 within a React framework. It shows hierarchical relationships among named individuals, with nodes colored by depth level: red for the root, blue for the first generation, and green for deeper descendants. The code uses `d3.stratify` to convert flat parent-child data into a hierarchy and `d3.tree` to compute node positions. Links are drawn as cubic bezier curves, and the SVG output includes labeled text for each family member.

Ssrinivasaraosankula
91% match
Loading thumbnail…

ICE8 - Family Tree

This interactive family tree visualizes a multi-generational hierarchy using collapsible nodes and animated layout transitions. It shows relationships between individuals like ViplavaKumari, Rambabu, and their descendants, with color-coded node types indicating different generations or branches. Built with D3.js v3, the visualization uses a tree layout to position nodes, SVG rectangles with external HTML foreign objects for labels, and CSS-based tooltips. Clicking a node collapses or expands its subtree, while panning and zooming is enabled through `d3.behavior.zoom`. The tree loads hierarchical data from a JSON file and arranges nodes with animated transitions.

Kkartik900
91% match
Loading thumbnail…

ICE 8 : Family Tree

This interactive family tree visualization displays a hierarchical dataset of three generations, with each node color-coded per its position in the lineage. The code uses D3’s `d3.layout.tree` and `d3.svg.diagonal` to compute the layout and draw curved links, while SVG circles and text labels render each family member. Node positions animate via `transition` and `duration` settings, and the fill color for each circle is drawn directly from the `fill` property in the JSON data.

IIndiraSiripurapu
91% match
Loading thumbnail…

ICE 8 FAMILY TREE

This example shows a family tree diagram with ten individuals, including notable names like SHIVAJI, PARVATHI, and RAJENDRA, connected through hierarchical parent-child relationships. The visualization uses D3 v6’s `d3.stratify()` to convert flat data into a hierarchy and `d3.tree()` to compute node positions, rendering circles, connecting paths, and text labels with SVG. Animations are applied using `transition()` with varying durations for links, nodes, and labels, making the tree appear to grow and populate over time.

Ssaidhiraj16
91% match