Raja Yaswanth Varma Vegesna 11640007

100%

Raja Yaswanth Varma Vegesna 11640007

✓ Published0🌍 Public

Last edited Apr 12, 2023

Created on Apr 12, 2023

This interactive tree diagram visualizes a fictional family lineage using D3.js. It displays hierarchical relationships between parent and child nodes, with each person represented by a circle and label. The chart uses a left-to-right layout with green links connecting nodes, and users can click on nodes to expand or collapse branches. The visualization is rendered as an SVG with smooth animated transitions, and it uses D3's layout tree, diagonal paths, and transition methods to create the dynamic, collapsible hierarchy.

AI-generated description

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

MIT Licensed

Similar vizzes

Loading thumbnail…

Raja Yaswanth Varma Vegesna 11640007 Tree Map

This example visualizes a family tree using a treemap layout rendered as an animated SVG diagram. Gold circles represent each family member, connected by lime-colored paths that animate into place, with bold black labels showing names. The code uses d3.stratify() and d3.tree() to compute the hierarchical layout from flat parent-child data, then transitions the link paths and circle radii to create the entrance effect.

Vvryvarma5577@gmail.com

90% match

Loading thumbnail…

Fork of Raja Yaswanth Varma Vegesna 11640007 Tree Map

This fork builds a family tree using a node-link diagram with animated transitions. The visualization maps individual data records with `child` and `parent` fields into a hierarchical structure using `d3.stratify()`, then lays out the nodes with `d3.tree()`. Golden circles represent the family members, connected by lime-colored paths that animate from parent to child positions over one second. Text labels display each member's name, and the initial render uses D3's `.transition()` API to smoothly grow the circle radii and draw the connecting links.

Vvryvarma5577@gmail.com

86% match

Loading thumbnail…

Tree Chart - IC8 - Rajasri

This tree chart visualizes a family classification hierarchy, showing generational relationships from Muni Naidu down to descendants like Samrat Chowdary and Alekya Chowdary. The code uses D3.js version 3.5.17 with `d3.layout.tree()` and `d3.svg.diagonal()` to render curved links and nodes as SVG elements. Node stroke colors come from the `type` property (e.g., orange, purple), while `level` drives fill colors (e.g., blue, green, pink, violet). A 750-millisecond transition animation expands the tree on load, with a pink background and custom CSS styling for interactive cursor pointers.

Rrajasrilekkala

79% match

Loading thumbnail…

Family Tree

This interactive D3.js v3 visualization displays a hierarchical family tree, with nodes representing individuals like Mohan, Ishaan, and Ananya, connected by labeled links indicating relationships. The tree uses colored rectangles for nodes, with SVG and animation enabling a dynamic, zoomable interface. Users can click nodes to expand or collapse branches, and tooltips provide additional information. The layout is computed using D3's tree layout API, with data loaded from a JSON file.

AAkrutiKhurana2103

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

79% match

Loading thumbnail…

Assignment2_Task7_Tree

This example visualizes the Vijayanagara family lineage as an animated, color-coded tree diagram, showing hierarchical generations from the founding ruler downward through descendants. The visualization uses D3.js version 3, specifically the `d3.layout.tree` for node positioning and `d3.svg.diagonal` for link paths. Each node is rendered as a circle with a fill color indicating generation level (black for root, blue for first generation, red for second, green for third). The tree expands with a 1000-millisecond transition, using node data updates to shift positions and reveal new descendants dynamically.

Ssreekarthanda@gmail.com

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

79% match

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

78% match