ICE8: Family Tree

100%

ICE8: Family Tree

✓ Published0🌍 Public

Last edited Apr 8, 2023

Created on Apr 8, 2023

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE 8 : Family Tree

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.

Ggunasindhuja

89% match

Loading thumbnail…

ICE8 - Family Tree

This interactive family tree visualizes hierarchical relationships using an animated D3.js tree layout with SVG rendering. The visualization displays nodes for family members like Krishna, Maheshbabu, and Rameshbabu, colored by type (lightblue, violet, red, yellow) with tooltips on hover. Built with d3.v3, it uses `d3.layout.tree` for positioning, `d3.behavior.zoom` for pan and zoom, and CSS-styled rectangles, edges, and arrow markers. The data structure from data.json defines parent-child links with directional attributes, while click-to-expand and collision detection manage the dynamic layout.

Mmanishcheruku

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

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

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

85% match

Loading thumbnail…

Family Tree ICE-8

This family tree visualization displays hierarchical relationships through an interactive, collapsible tree layout. Nodes represent family members, color-coded by generation level, with labeled links showing connections. The example uses D3.js v3’s `d3.layout.tree` for layout, with SVG rendering and animations for smooth transitions. Data is loaded from a JSON file containing nested family structures, and the tree supports zooming and dragging via `d3.behavior.zoom`.

KKrishnaPriyaKurra

85% match

Loading thumbnail…

ICE 8 Tree Graph

This example shows a family tree for the Mandava lineage, with three generations of named relatives branching from a single root. The visualization uses a D3.js tree layout (d3.layout.tree) with animated node transitions on click, rendered as SVG. Links appear as pink diagonal strokes, and nodes are styled with colored circles that change fill for highlighted states. The data is hardcoded as a JSON object, and the update function manages enter, update, and exit selections with a 750-millisecond duration.

MM Hema

85% match