Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Simple Collapsible Tree

Public visualization

Simple Collapsible Tree

0 stars1🌍 Public
Rrainyrainyguo
Last edited Nov 21, 2020
Created on Nov 21, 2020

This interactive visualization displays a hierarchical tree that expands and collapses when nodes are clicked. The tree uses a horizontal layout with circular nodes and text labels, and collapsible branches animate smoothly via transitions. The code employs D3 v3’s `d3.layout.tree` for positioning and `d3.svg.diagonal` for link paths, with sample data from a manual tree structure containing "Top Level" and dummy child nodes. SVG elements provide the rendering, and animations use `transition().duration()` to update node positions on interaction.

AI-generated description

Comments

Sign in to join the discussion.

MIT Licensed