Skip to main content
๐ŸŒ Public

Share visualization

Send this visualization to others.

Family Tree

Public visualization

Family Tree

0 stars0๐ŸŒ Public
MMar-99
Last edited Apr 4, 2022
Created on Apr 3, 2022
Forked from Interactive Tree

A D3.js v5 family tree visualizes hierarchical relationships with colored nodes and horizontal links, using SVG rendering and animated transitions. The tree layout (`d3.tree`) positions nodes, while `d3.hierarchy` converts the JSON data from `data.js` into a traversable structure. Users can click nodes to collapse or expand branches, triggering smooth animations via `transition()`. Zoom and pan functionality is implemented with `d3.zoom`, and drag gestures are detected on node groups. Node colors derive from the data object, and labels display names with dynamic sizing based on text length.

AI-generated description

Comments

Sign in to join the discussion.

MIT Licensed