Family Tree
✓ Published0🌍 Public
This example visualizes a family tree as a hierarchical node-link diagram. It uses D3 v5’s `d3.stratify()` to convert flat parent-child data into a tree structure, then `d3.tree()` to compute layout positions. Nodes are rendered as SVG circles colored by depth (violet, yellow, red, green), connected by curved cubic Bézier paths, with each person’s name labeled via SVG text. The code runs in a React environment but renders entirely with SVG elements, with the dataset hardcoded in the script.
AI-generated descriptionA bare minimum HTML page demonstrating use of CSS and JavaScript.
See also React Starter.
MIT Licensed