Skip to main content
SimilarExport ZIP
100%

Family tree

✓ Published0🌍 Public
Aadapavaishnavi12
Last edited Apr 13, 2023
Created on Apr 13, 2023
Forked from MY Tree ICE-8

This interactive family tree chart displays three generations of the Adapa family, with the oldest member, Adapa Yadagiri, at the root and descendants branching downward. Users can click on nodes to expand or collapse the children of each individual, and the tree animates smoothly as positions update. Built with D3.js (version 3.5.17), the visualization uses a custom tree layout, SVG paths for connecting links, and CSS-styled circle and text nodes on a pink background.

AI-generated description

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

MIT Licensed

Similar vizzes

Loading thumbnail…

Family Tree :)

This interactive family tree visualization displays a three-generation genealogy, with the root ancestor ’Bhadraiah’ at the top and his children and grandchildren branching downward. The diagram uses a collapsible tree layout that responds to clicks, allowing users to expand or collapse nodes. Built with D3.js (version 3.5.17), it employs the `d3.layout.tree` for node positioning and `d3.svg.diagonal` to draw curved links between relatives. The SVG rendering includes animated transitions (750ms duration) that smoothly move nodes to new positions when the tree structure changes, while circle and text elements are styled via CSS classes.

Vvagdevi-369
88% match
Loading thumbnail…

my-family-tree

A family tree chart shows three generations of a family, with the root ancestor Narasimha branching to children and grandchildren. Using the D3.js library, the visualization lays out nodes as cyan circles connected by blue paths, with orange as the page background. The tree uses a hierarchical layout (`d3.layout.tree`) and SVG rendering, with animated transitions (`transition().duration()`) that move nodes into position and support click-to-collapse interactions. Data is embedded directly in the code as a JavaScript array.

DDeepikaGoud08
84% match
Loading thumbnail…

Family Tree

This example shows an animated family tree built with D3.js, using a hierarchical layout to display generations from a root ancestor down to descendants. Each person appears as a labeled node connected by curved bézier links, with nodes expanding and collapsing on click. The visualization loads static JSON data and renders it as SVG, using the D3 tree layout, diagonal path generator, and transition animations to smoothly reveal branches as users interact.

Aavinash021997
83% match
Loading thumbnail…

Family Tree

This interactive family tree visualizes a multi-generational genealogy dataset using a collapsible tree layout. Users can click on nodes to expand or collapse branches, with smooth animated transitions between states. The visualization is built with React and D3.js, specifically using `d3.layout.tree` for hierarchical positioning and `d3.svg.diagonal` for curved links. SVG elements render nodes and text labels, while CSS styles define the red node circles and blue connecting lines. The tree data is embedded directly in the JavaScript, and the animation duration is set to 750 milliseconds.

Aavinash021997
83% match
Loading thumbnail…

My Family Tree

This interactive family tree visualizes three generations of a family, with each node displaying a person's name and colored circles (fill and stroke) to distinguish branches and levels. Using D3 version 3’s `d3.layout.tree` and `d3.svg.diagonal`, the SVG diagram renders hierarchical connections as curved links, with smooth transitions (`duration`) animating node positions on click. The hierarchical data is hardcoded as a JavaScript array, and clicking a node toggles its children, dynamically updating the tree layout.

TTejucmandava
82% match
Loading thumbnail…

dpka- Family Tree

This interactive family tree visualizes a multi-generational hierarchy, starting with the root "Narsimha" and branching into descendants like Venkatesh, Satyanarayana, Murali, and Lakshmi. It uses D3.js v3 to render the tree as an animated SVG layout, with color-coded nodes based on type and expandable/collapsible children. The code leverages `d3.layout.tree`, `d3.behavior.zoom`, and transitions to animate node positions, while custom CSS and SVG filters add drop shadows and hover tooltips. Data is loaded from a JSON file defining the family structure and link relationships.

DDeepikaGoud08
82% match
Loading thumbnail…

Family Tree

This interactive family tree uses a static dataset of parent-child relationships to display three generations of a family. The visualization uses D3.js v6 and React, rendering circles as nodes connected by animated lines in an SVG. The tree layout is computed using D3's stratify and tree algorithms, with the nodes and links animating into place via transitions that vary in duration based on node depth. The data is hardcoded in the source file, and each node displays the family member's name.

PPrasanth Damarla
82% match
Loading thumbnail…

Family Tree

This interactive family tree visualization displays hierarchical relationships among family members using a collapsible tree layout. The D3.js v3 library constructs the diagram as SVG elements, with nodes represented as colored rectangles that branch from a root ancestor. The tree loads its structure from a JSON data file, and users can click individual nodes to expand or collapse their branches. The visualization includes zoom and pan capabilities through D3's behavior API, while a custom tooltip system displays additional information on hover.

PPavaniMangugari
81% match