Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

D3.js collapsible tree with boxes

Public visualization

D3.js collapsible tree with boxes

0 stars1🌍 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.

Comments

Sign in to join the discussion.

MIT Licensed