Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Collapsible Tree New Tree Each Time

Public visualization

Viewing a saved revision (read-only)

770c297cda61405a8a8b1cb8da5ab8cb

Collapsible Tree New Tree Each Time

0 stars0🌍 Public
QQuinn Sebso
Last edited May 7, 2024
Created on May 7, 2024

This example demonstrates a collapsible tree diagram where each click on a node generates a fresh tree layout. It uses d3.hierarchy and d3.tree to compute the node positions, with d3.transition to animate the expanding and collapsing of branches. The visualization updates the SVG elements dynamically, reassigning parent-child relationships and rebuilding the tree structure on each interaction. Data is derived from a hardcoded hierarchical JSON object, rendered as colored circles and connecting links.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.