Skip to main content
100%

D3.js collapsible tree with boxes

✓ Published1🌍 Public
AAndreDelgo
Last edited Sep 18, 2020
Created on Sep 18, 2020

This example visualizes a hierarchical tree structure using D3.js, where each node is rendered as a colored rectangle containing text and interactive tooltips. The visualization displays a collapsible tree that users can expand and collapse by clicking on nodes, with SVG graphics and smooth animations for transitions. The code uses D3.js v3’s `d3.layout.tree` and `d3.behavior.zoom` to manage layout and pan/zoom interactions, along with jQuery for event handling. Node colors correspond to different `type` values in the JSON data, and links between nodes are styled with arrows, with tooltips appearing on hover.

AI-generated description

This is a description using Markdown.

MIT Licensed

Similar vizzes