Skip to main content
100%

ICE-8 Family Tree

✓ Published1🌍 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.

MIT Licensed

Similar vizzes