Viewing a saved revision (read-only)
4bda20ea10474a039d95dac6ccfabffe
Tree Map
This example presents an interactive family tree diagram rendered with SVG and animated transitions. The visualization uses D3.js’s `d3.layout.tree` to compute hierarchical node positions and `d3.svg.diagonal` to draw curved links between generations. Nodes appear as red circles with blue outlines, labeled with names, and users can click any node to collapse or expand its children. The tree’s layout normalizes horizontal spacing by depth, while entering and exiting elements animate smoothly via `transition` methods over a 750-millisecond duration. The data is a hardcoded array representing three generations of a family lineage.
AI-generated descriptionA bare minimum HTML page demonstrating use of CSS and JavaScript.
See also React Starter.