Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Family tree (3 generations)

Public visualization

Viewing a saved revision (read-only)

3d38ea10eeb748c891223bd8dba844d2

Family tree (3 generations)

0 stars0🌍 Public
AAAL FORHAD
Last edited Apr 2, 2022
Created on Mar 31, 2022
Forked from HTML Starter

This interactive family tree visualization displays three generations of a family using a hierarchical node-link diagram. It loads data from a JSON file and renders the tree structure with D3.js v3, where each family member appears as a colored, labeled rectangle. The visualization supports zooming and panning through a custom zoom behavior, and it includes tooltips that appear on hover. The code uses D3's layout tree algorithm to position nodes and SVG paths to draw the connecting links, with animation to transition between states.

AI-generated description