Skip to main content
SimilarExport ZIP
100%

MY family Tree

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

A family tree chart displays hierarchical relationships among relatives, with clickable nodes that expand and collapse child branches. The visualization shows names of family members across multiple generations, using red circular nodes and connecting red lines on a silver background. The chart is built with D3.js version 3.5.17, utilizing the `d3.layout.tree` for positioning and `d3.svg.diagonal` for curved link paths. The SVG-based animation transitions nodes smoothly over 750 milliseconds, while node size and text styling remain consistent throughout.

AI-generated description

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

MIT Licensed

Similar vizzes

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
89% match
Loading thumbnail…

Tree chart

This interactive SVG tree chart displays a family lineage, using a hierarchical node-and-link diagram to show generational relationships from a single ancestor. The chart is generated with the D3.js library version 3.5.17, employing its layout tree and diagonal projection APIs to position nodes. Clicking on a node triggers an animated expansion or collapse of its children, with a 750-millisecond transition. Node circles are cyan with dark borders, and connecting links are coral, all set against a teal background. The data is hardcoded as a JavaScript array of family member names and parent-child links.

CChathurya
87% match
Loading thumbnail…

My Family tree

This visualization displays a family tree as an animated hierarchical diagram, with each person represented by a red circle and labeled with their name. The code uses D3.js (v6) alongside React to render the data, employing `d3.stratify` and `d3.tree` to compute the layout from a flat list of parent-child relationships. SVG paths show connections between nodes, while transitions animate the lines, circles, and text over time to reveal the tree structure.

JJyothicherukuri
86% 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
86% 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
86% match
Loading thumbnail…

Family Tree

A family tree displays ten nodes connected by animated paths, with each circular node labeled by a family member's name. The visualization uses D3 v6's `d3.stratify()` to build a hierarchy from flat parent-child data, followed by `d3.tree()` to compute node positions. SVG circles and text elements are rendered on a black background, with lime-green strokes and light-green fills. Paths between nodes animate from zero length to full connections over one second, while circles expand over 800 milliseconds, creating a sequential reveal of the hierarchical relationships.

SSohilaBheemReddy
85% match
Loading thumbnail…

family tree

This example shows an animated family tree using D3.js v6, with nodes representing family members and lime-green links indicating parent-child relationships. The visualization uses `d3.stratify()` to build the hierarchical structure from a flat data array, then applies `d3.tree()` to compute node positions in a 900x350 layout. SVG elements—circles for nodes and paths for connections—are rendered with transitions that animate the links over 1000 milliseconds and the node radii over 800 milliseconds. The data includes ten named family members, with the root node "Surya" having no parent.

VVaishnavi6199
85% match
Loading thumbnail…

family tree

This example shows an animated family tree using D3.js v6, with nodes representing family members and lime-green links indicating parent-child relationships. The visualization uses `d3.stratify()` to build the hierarchical structure from a flat data array, then applies `d3.tree()` to compute node positions in a 900x350 layout. SVG elements—circles for nodes and paths for connections—are rendered with transitions that animate the links over 1000 milliseconds and the node radii over 800 milliseconds. The data includes ten named family members, with the root node "Surya" having no parent.

VVaishnavi6199
85% match