Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

D3.js collapsibleRRR tree with boxes

Public visualization

Viewing a saved revision (read-only)

6f5bbeeb9c8743299248cc4a30f0761f

D3.js collapsibleRRR tree with boxes

0 stars0🌍 Public
Kkaran1904
Last edited Jun 19, 2020
Created on Jun 19, 2020

This example presents a collapsible hierarchical tree visualization using D3.js v3, where each node is rendered as a colored rectangle with text and tooltip support. The tree layout (d3.layout.tree) organizes nodes by depth, with curved SVG paths (d3.svg.diagonal) representing links between parent and child nodes. Users can collapse or expand branches by clicking on nodes, which triggers animated transitions (transition.duration) to update the layout. The visualization reads hierarchical JSON data containing node properties like type, code, and version, and uses jQuery alongside D3 for DOM manipulation and zoom/pan interactions.

AI-generated description

This is a description using Markdown.