AndreDelgo

@AndreDelgo·3 public vizzes

D3.js collapsible tree with boxes

This example presents an interactive collapsible tree diagram where each node is rendered as a colored box, with the root in yellow, inner nodes in blue and green, and leaf nodes in purple. Clicking a node expands or collapses its children, with smooth animated transitions. The visualization uses D3.js v3’s `d3.layout.tree` for hierarchical layout and `d3.behavior.zoom` for panning and zooming, while SVG elements and CSS styles define the boxes, links, and tooltips. Data is loaded from a JSON file containing node names, types, versions, and link directions.

Sep 18, 2020

Loading thumbnail…

D3.js collapsible tree with boxes

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.

Sep 18, 2020

Loading thumbnail…

D3.js collapsible tree with boxes

This collapsible tree diagram visualizes hierarchical data using colored rectangular nodes, with each box representing a node and its metadata such as type, code, label, and version. The tree renders in SVG with animated expand/collapse transitions, and supports zooming and panning through D3’s `d3.behavior.zoom`. Links between nodes display direction attributes (SYNC or ASYN) and change color on selection. The example loads sample JSON data via `d3.json` and applies custom styling from `tree-boxes.css`, while node colors are assigned per type (e.g., blue, green, yellow, purple).

Sep 18, 2020