Tree

100%

✓ Published1🌍 Public

Last edited Apr 12, 2026

Created on Apr 12, 2026

A family tree plots ten individuals across three generations, separating root, middle, and leaf nodes by color—red, blue, and green—while labels identify each person and lines connect parent to child. The chart uses the D3.js v7 `stratify` and `tree` layout functions to position the hierarchy, drawing circles and connecting lines as SVG elements within an 800-by-500 canvas. Interactivity is included through mouseover and mouseout events that enlarge and recolor nodes when hovered.

AI-generated description

MIT Licensed

Similar vizzes

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

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

89% match

Loading thumbnail…

Tree

This example shows a family tree constructed from a hardcoded array of parent-child name pairs. The visualization renders green circles connected by red links, with each person’s name displayed inside their circle. Using d3.stratify and d3.tree, the hierarchy is computed and positioned in an SVG canvas. The code animates the connections and circle radii with d3 transitions, while text fades in based on each node’s depth. The page uses a light blue background and centers the layout.

Ppreethamkesa

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

87% 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…

Family Tree

A family tree visualization renders hierarchical relationships as an SVG diagram. Colored circles mark each person, with blue, yellow, and orange indicating their depth in the tree, while curved paths connect parents to children. The example uses D3 v5, but notably relies on the missing `d3.stratify` and `d3.tree` APIs, which are not part of the standard D3 library. The code manually positions nodes and links using the x and y coordinates from those undefined functions, with hard-coded data listing individuals and their parents.

DDINESH SAI BOPPANA

87% match

Loading thumbnail…

Family Tree

A family tree displays three generations of relatives as orange circles connected by green lines on a pink background. Using D3 v6, the code builds a hierarchical layout with `d3.stratify()` and `d3.tree()`, then renders SVG paths and circles with animated transitions. Node labels show each person's name, while the tree expands from a single root ancestor through children and grandchildren.

LLakshmipriya-kalapala

87% match

Loading thumbnail…

Family tree

A family tree visualization maps a ten-person genealogy dataset with D3.js v6, using ancestor relationships to position nodes across four generations. Distinct colors (blue, lawngreen, magenta, white) encode each generation’s depth. The rendering uses SVG elements with animated transitions: paths draw over two seconds to form connections between parents and children, while circles grow to size 40 and labels appear with bold black text. The code leverages d3.stratify and d3.tree to compute hierarchical layout and link data.

Eeravellisaimeghana

87% match