ICE 8 : Family Tree

100%

ICE 8 : Family Tree

✓ Published2🌍 Public

Last edited Apr 13, 2023

Created on Apr 10, 2023

This interactive family tree visualizes the lineage of the Maurya dynasty, starting from Chandragupta Maurya and branching to descendants like Bindusara and Ashoka. Built with React and D3.js, the tree uses animated transitions to reposition nodes and links over a 1-second duration. Each node is a colored circle with a label, and data is structured as nested JSON objects. The D3 layout tree algorithm computes node positions, while custom SVG paths and a diagonal projection connect parent-child relationships.

AI-generated description

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

Similar vizzes

Loading thumbnail…

ICE8: Family Tree

A family tree visualization displays the lineage of the Pandava and Kaurava dynasties from the Indian epic Mahabharata. Users can click any node to collapse or expand its subtree, with animated transitions that smoothly reposition nodes and links. The code uses the D3.js library, specifically `d3.layout.tree`, `d3.svg.diagonal`, and SVG transitions. Node circles are colored based on `type` and `level` properties from the JSON data file, enabling visual distinction between generations.

SSharmaAshwini

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

88% match

Loading thumbnail…

ICE 8 - Family Tree

This interactive family tree visualization displays a hierarchical structure of familial relationships using an animated, collapsible tree layout. The diagram shows three generations, with color-coded nodes distinguishing different family members and levels. Built with React and D3.js (version 3.5.17), the visualization leverages `d3.layout.tree()` for automatic tree positioning and `d3.svg.diagonal()` for curved connecting links. The SVG-based rendering supports click-to-expand/collapse interactions with smooth transitions, while CSS styling applies distinct node colors and an orange background theme.

NNiharika-Guthikonda

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

87% match

Loading thumbnail…

ICE-8 Family Tree

This interactive family tree visualizes a multi-generational genealogy dataset. The graph displays hierarchical relationships between individuals, with each node representing a person and connecting lines showing parent-child links. Users can click on nodes to expand or collapse their subtree, dynamically revealing or hiding descendants. The visualization uses the D3.js layout tree algorithm to position nodes and SVG paths for connections, with CSS-driven animations smoothly transitioning nodes between states. The code leverages D3's select, transition, and append APIs to manage the animated updates triggered by user interactions.

HHarshinireddyy19

87% match

Loading thumbnail…

ICE-8: Family Tree

This interactive family tree visualization shows a hierarchical genealogy through animated node-and-link diagrams. Users can click nodes to expand or collapse branches, revealing relationships between family members across generations. Built with React and D3.js, the visualization uses the `d3.layout.tree` for positioning and `d3.svg.diagonal` for curved links. Node colors derive from the `level` property in the inline data, while SVG transitions animate layout changes with 750-millisecond durations. The tree handles dynamic node addition and removal through D3's data join pattern, with text labels and circles styled via CSS.

RRebecca Moore

87% match

Loading thumbnail…

ICE-8: Family Tree

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.

MManasaPatange

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

86% match