{"version":"1.0","type":"rich","title":"Family Tree","description":"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.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/378a9fd914cc468f810045c84a02cf6f?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}