Skip to main content
SimilarExport ZIP
100%

Collapsible Vertical Tree with Boxes

✓ Published0🌍 Public
RRafael Ortet
Last edited Jan 25, 2021
Created on Jan 25, 2021
Forked from Fault Tree

A collapsible vertical fault tree displays hierarchical relationships with rounded boxes as nodes, each supporting expand/collapse via a TreeExpanderButton. Non-root nodes incorporate gate shapes (AndGate, OrGate, Circle, Triangle) that rotate vertically, with colors mapped by a nodeFillConverter function. The GoJS library renders the diagram using a TreeLayout with orthogonal links, while the model loads from embedded JSON via `go.Model.fromJson`. A Save button exports the current state to that JSON format.

AI-generated description

An example showing the capabilities of VizHub.

MIT Licensed

Similar vizzes

Loading thumbnail…

D3.js collapsible tree with boxes

This example shows a collapsible tree diagram where each node is a colored box representing a hierarchical data structure, with labels, types, and version information. Users can expand and collapse branches by clicking nodes, and the layout animates smoothly as the tree changes. Built with D3.js v3 and jQuery, it uses the d3.layout.tree layout, SVG rendering, and d3.behavior.zoom for panning and zooming. Node colors correspond to the “type” field in the JSON data, and tooltips appear on hover to show additional details.

RRafael Ortet
79% match
Loading thumbnail…

Fault Tree

This interactive fault tree diagram uses GoJS 2.1.2 to display a hierarchical reliability structure, with each non-root node shaped as an AND gate, OR gate, circle, or triangle based on its fault condition. The TreeLayout arranges nodes vertically at 30-pixel layer spacing, while the sample data loads from an embedded JSON model. Nodes use gradient fills via a figure converter, and orthogonal links with 20-pixel curviness connect parent and child elements. The diagram supports tree dragging, undo/redo, and saving the modified model back to JSON.

JJoker-tr
78% match
Loading thumbnail…

D3.js collapsible tree with boxes

This example shows a collapsible tree layout where each node is rendered as a labeled box, with hierarchical relationships indicated by curved links and directional arrows. The visualization uses D3.js v3’s `d3.layout.tree` to compute node positions and supports interactive collapsing/expanding of branches, along with zoom and drag navigation. Node colors correspond to a `type` field in the accompanying JSON data, and tooltips appear on hover to reveal additional metadata. The SVG output animates layout transitions using D3’s built-in transition system.

DDamien Dotta
77% match
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).

AAndreDelgo
77% match
Loading thumbnail…

D3.js collapsible tree with boxes

This example shows a collapsible tree diagram where each node is rendered as a labeled box, with child nodes expandable or collapsible by clicking. It visualizes hierarchical JSON data representing nodes with types, versions, and link directions. The tree uses D3.js v3 layout and SVG rendering, with zoom and drag support via `d3.behavior.zoom`. Nodes are color-coded by type, and the layout dynamically recalculates height and width based on the tree’s depth and breadth. Animated transitions smooth node repositioning during updates.

Ttkhurana
76% match
Loading thumbnail…

D3.js collapsible tree with boxes

This example shows a hierarchical tree diagram where each node is a box containing text, with links drawn between parent and child nodes. Clicking a node collapses or expands its children with a smooth animated transition. The tree uses D3 v3’s layout and zoom behavior, with SVG for rendering. Node colors correspond to a `type` field from the JSON data, and tooltips appear on hover, while link arrows indicate sync or async direction.

Ssrinivasjavvadi
76% match
Loading thumbnail…

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.

AAndreDelgo
76% match
Loading thumbnail…

Fork of Fault Tree

This example demonstrates a fault tree diagram built with GoJS, showing hierarchical relationships through nodes connected by orthogonal links. Each non-root node displays a gate shape—including AndGate, OrGate, Circle, or Triangle—with distinct color fills and an attached choice label. The diagram uses a TreeLayout with a vertical angle and implements drag-to-rearrange tree functionality. Code examples include node template bindings that dynamically set shape figures, fill colors, and rotation angles based on data properties, with undo/redo support enabled through the diagram’s UndoManager.

AAlex Velez
76% match