Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

D3 Network Graph and Family Tree

Public visualization

D3 Network Graph and Family Tree

0 stars0🌍 Public
VVarun Gadde
Last edited Apr 2, 2024
Created on Apr 2, 2024

This example presents a family tree and a network graph side-by-side, both visualizing the same 13-person genealogy dataset. The left panel uses a force-directed network layout, while the right panel uses a structured tree layout. The network graph employs D3's `forceSimulation` API with `forceLink`, `forceManyBody`, and `forceCenter` to position nodes, while the family tree uses the `d3.tree` and `d3.stratify` functions to create a hierarchical structure from the parent-child relationships. Both are rendered as SVG with circles and text labels.

AI-generated description

Comments

Sign in to join the discussion.

MIT Licensed