Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Family Tree - Colors

Public visualization

Viewing a saved revision (read-only)

d66045eeadd843d09c5d94815f967308

Family Tree - Colors

0 stars1🌍 Public
SSohilaBheemReddy
Last edited Apr 4, 2022
Created on Apr 4, 2022

This example visualizes a family tree as a set of color-coded nodes, where each generation is represented by a distinct color (orange, yellow, pink, and green) assigned via a custom `setGeneration` function. The tree structure is built using `d3.stratify` and `d3.tree`, with SVG circles for family members and text labels showing their names. Links between generations are drawn as animated paths that transition from the parent to the child node over one second, while circles grow to a radius of 40 pixels upon loading. The rendering uses D3 v6 with SVG and transitions.

AI-generated description