Tree

100%

✓ Published2🌍 Public

Last edited Nov 8, 2025

Created on Nov 5, 2025

This example presents a three-generation family tree as a static SVG visualization using D3.js v6. It shows a root "Grandparents" node branching into two parent nodes, each with two child nodes. The layout is computed with `d3.stratify()` and `d3.tree()`, while `d3.linkVertical()` draws the connecting paths. Node shapes and colors encode generation depth: squares represent the root, circles represent parents, and triangles represent children. A legend explains the mapping, and each node includes a tooltip via a `<title>` element.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Tree

A vertical family tree displays three generations of descendants from a single ancestor, with each node represented by a labeled circle. The visualization uses D3’s `d3.stratify()` to convert the flat `{child, parent}` data into a hierarchy, then applies the `d3.tree()` layout algorithm to position nodes top-down. Parent-child connections are drawn as paths using `d3.linkVertical()`, and the SVG output is rendered with the `join` API. The tree includes 36 individuals, branching into four main subfamilies.

SSahil Thapa

91% match

Loading thumbnail…

Tree

This example displays a family tree as an animated SVG diagram using D3 v6. The visualization shows a hierarchical structure of names, with parent-child connections drawn as blue lines that animate from each parent node to its child. Circles representing individuals are grey with red borders, and text labels appear with staggered timing based on depth. The code uses D3's `stratify` method to convert the flat parent-child data into a hierarchy, then applies `tree` layout and `transition` animations to animate the paths, circles, and text.

AAkrutiKhurana2103

89% match

Loading thumbnail…

Tree

This tree visualization displays a five-generation family hierarchy, with each generation distinguished by both color and node shape, ranging from circles for the root and parents to squares, diamonds, and triangles for subsequent descendants. The D3.js code uses the `d3.stratify()` and `d3.tree()` APIs to convert flat data into a hierarchical structure and compute the layout, drawing links as lines and rendering nodes as SVG shapes within a white-bordered chart. A legend above the chart clarifies the mapping of generation to shape and color.

PP Manisha

89% match

Loading thumbnail…

Tree

This example shows a simple hierarchical family tree with three generations, drawn in a bottom-to-top orientation using the D3.js v3 library. It demonstrates the `d3.layout.tree` layout and `d3.svg.diagonal` for rendering curved link paths, while nodes appear as circles with text labels for each person’s name. The data comes from a local `graph.json` file containing a nested “Father,” “Son,” and grandchildren structure. The SVG output is styled with minimal CSS, using a light gray border and black links, and the layout is positioned within a fixed margin and size.

CCoola85

89% match

Loading thumbnail…

Family Tree

This example presents a three-generation family tree as a static, animated diagram. Circular nodes, colored by generation (blue, red, brown), represent individuals, while black connecting lines show parent-child relationships. The visualization uses d3.stratify() to convert the flat parent-child data into a hierarchy and d3.tree() to compute node positions. Nodes and links animate into place via the `.transition().duration()` API, with all elements rendered as SVG.

SSweetierams

88% match

Loading thumbnail…

Family Tree

This example displays a family tree as a hierarchical node-link diagram, with nodes colored by generation and green curved links connecting parents to children. The visualization renders in SVG and uses `d3.stratify()` to convert flat parent-child data into a hierarchy, then applies `d3.tree()` to compute the layout. Node circles, connecting paths, and name labels are appended to the SVG using data-bound selections, with custom bezier curves drawn for each link.

TTejaswi@3271

88% match

Loading thumbnail…

Family Tree

This example shows a family tree visualization with nodes colored by generation and animated SVG paths connecting parents to children. The tree layout uses d3.stratify() and d3.tree() to compute node positions from the hierarchical data. Circles and text labels are rendered as SVG elements, with d3 transitions animating the connecting paths and node sizing. Generation colors are assigned via a custom switch function, and the SVG fills the browser viewport.

AAshrith Kudidhi

88% match

Loading thumbnail…

Family Tree (

This example shows an animated family tree built with D3.js v6. It visualizes hierarchical relationships between family members using a tree layout, with nodes as circles colored by generation depth and connected by lime-green links. The data is defined as an array of child-parent pairs, processed with `d3.stratify()` and `d3.tree()`. The SVG rendering animates path connections and circle radii using `transition().duration()`, and labels each node with the child name.

Ssrivalliwuyyuru

88% match