Collapsible tree diagram in v5
This interactive collapsible tree diagram displays a hierarchical dataset with parent nodes that can be clicked to collapse or expand their child branches. The visualization uses d3.tree() to compute node positions, d3.hierarchy() to structure the data, and SVG paths drawn with a custom diagonal function for the linking curves. Nodes are rendered as circles with text labels, and transitions animate with 750-millisecond duration when the tree structure changes. The example derives from Mike Bostock's collapsible tree and uses d3.v5's selection, transition, and merge APIs for smooth interactive updates.
AI-generated descriptionThis is a d3.js tree diagram that incldes an interactive element as used as an example in the book D3 Tips and Tricks v5.x.
Any parent node can be clicked on to collapse the portion of the tree below it, on itself. Conversly, it can be clicked on again to regrow.
It is derived from the Mike Bostock Collapsible tree example and updated to use v5.
Kudos and thanks also go out to Soumya Ranjan for steering me in the fight direction for the diagonal solution.