Fork of tree of kids

Fork of Family Tree

A family tree for three generations is depicted, where each node is a colored circle representing a family member, and the connecting lines show parent-child relationships. The visualization uses a static dataset of ten family members and renders the hierarchy with D3 v6, employing the `d3.stratify()` function to build the hierarchy from link data and `d3.tree()` to calculate node positions. The SVG output animates the growth of the connecting paths and the appearance of the circles, with node colors (`#ff00ff`, `#00ff00`, `#ffa500`) distinguishing generations.

Ttejaswikalluri05

tree of kids

This family tree visualization displays three generations descending from a root couple, with each generation represented by a distinct shape: a golden circle for the root, green rounded rectangles for parents, and blue diamonds for descendants. The hierarchical layout uses `d3.stratify()` to structure the data and `d3.tree()` with `d3.linkHorizontal()` to position nodes and draw curved links. Node labels alternate sides based on whether they have children, and a legend clarifies the shape-to-generation mapping. The SVG rendering uses D3 v7 with a custom margin and coordinate system.

Mmodydxx@gmail.com

Aaddalalikitha15@gmail.com

Fork of D3 Starter-2

This example displays a family tree as a static node-link diagram, using a sample dataset with a grandparent, two parents, and five children. Node color encodes generation depth: red for the root, green for its children, and blue for leaves. Rendered as an SVG, the visualization applies `d3.tree()` layout and `d3.hierarchy()` to structure the data, then draws vertical links with `d3.linkVertical()` and labels each node. The implementation uses D3.js v7 and defines custom CSS for link and node styling.

Rrevanthdasari10@gmail.com

Fork of Fork of D3 Starter

This example shows a family tree as a hierarchical node-link diagram, with color-coded nodes that distinguish generations: red for the root, blue for grandparents, green for parents, and orange for children. Using D3.js v7, it builds the hierarchy with `d3.stratify()` and lays it out with `d3.tree()`, then renders the structure as an SVG. The code draws black links as lines and labels each node with text, positioning all elements based on the computed tree coordinates.

Fork of Family Tree

This fork of a family tree visualizes a hierarchical dataset using a static tree layout, with generations distinguished by node colors. Nodes animate in size, and connecting paths grow between parent and child elements. The visualization uses d3.stratify to construct the hierarchy and d3.tree for layout, rendering the result as an SVG with animated transitions. Each node is a circle with a bold label, and the dataset is hardcoded as a list of parent-child pairs.

SSaiSree0122

Fork of Fork of Famil Tree

This family tree visualization uses a static dataset of parent-child relationships to display a two-generation hierarchy. It shows the connections between a root ancestor and fifteen descendants, with each individual represented as a maroon-bordered, aqua circle. The example uses D3 v6 to create the tree layout via the `d3.stratify()` and `d3.tree()` APIs, computing node positions for the SVG render. Circles and connecting paths are animated into place using D3's `.transition().duration()` and `.attr()` methods, while text labels (in purple) identify each family member. The rendering uses SVG elements—`circle`, `path`, and `text`—and applies a simple animation on initial load.

VVineela Reddy

Fork of HTML Starter

This example shows a three-generation family tree with colored nodes representing grandparents, parents, and children, connected by curved links. The code converts flat family data into a hierarchy using `d3.stratify`, then lays it out with `d3.tree()`. Nodes are rendered as SVG circles with name and generation labels, while links use `d3.linkVertical()` to draw the connections. A `d3.scaleOrdinal()` maps generations to distinct colors.

Ssuddala2001@gmail.com

Family Tree

This family tree visualization displays a hierarchical dataset of family members across several generations, with nodes colored by generation and connected by animated green links. Built with D3.js v6, the code uses the `d3.stratify()` utility to structure the parent-child data and `d3.tree()` to compute the layout. Nodes are rendered as SVG circles with a 1.5-second path-drawing transition, while text labels identify each person. Generation colors are assigned via a custom `setGenerations()` switch function, ranging from orange for the root to teal for deeper levels.

GGARIDIDEEKSHITHREDDY