Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Family tree

Public visualization

Viewing a saved revision (read-only)

8ba9478c8c9a41638135f192570f92d0

Family tree

0 stars2🌍 Public
Eeravellisaimeghana
Last edited Apr 4, 2022
Created on Apr 4, 2022

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.

AI-generated description