Family Tree
This interactive family tree visualizes hierarchical relationships using D3.js’s tree layout, with nodes as white circles connected by gray links. Users can click a node to collapse or expand its children, and double-click a node’s label to edit names in place via a foreignObject input. The rendering uses SVG paths with smooth `transition` animations for node and link repositioning. Zooming is enabled through `d3.zoom`, scaling the entire diagram between 0.1× and 10×. The code defines the tree structure with `d3.hierarchy` and `d3.tree`, and updates positions dynamically during interactions.