Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

ICE-8 Family Tree

Public visualization

ICE-8 Family Tree

0 stars1🌍 Public
SSanjib Paudel
Last edited Apr 9, 2023
Created on Apr 9, 2023
Forked from React Starter

This example displays a family tree as a hierarchical node-link diagram. It uses d3.hierarchy and d3.tree to compute the layout, then renders it as SVG with d3.linkHorizontal for curved edges and circles for individual nodes. Named labels appear above each node, while custom logic assigns distinct stroke colors—maroon, indigo, orange, and green—based on generation depth. Data is loaded from a remote JSON file via fetch, and the visualization updates reactively within a React component using useEffect.

AI-generated description

React Starter code.

Comments

Sign in to join the discussion.

MIT Licensed