Skip to main content
SimilarExport ZIP
100%

Fork of Fault Tree

✓ Published0🌍 Public
SSEDKI91
Last edited Mar 28, 2022
Created on Mar 28, 2022
Forked from Fault Tree

A fault tree diagram visualizes logical relationships between system failure events. Non-root nodes display gate shapes—AND gates appear orange, OR gates blue, with circles and triangles for basic events—connected by orthogonal links. The implementation uses GoJS Diagram and TreeLayout with custom node templates that dynamically bind shape, fill, and rotation based on data. An included SVG figure set defines the gate geometries, and interactive features include tree dragging, expander buttons, and undo/redo management.

AI-generated description

An example showing the capabilities of VizHub.

MIT Licensed

Similar vizzes

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
91% 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
87% match
Loading thumbnail…

Collapsible Vertical Tree with Boxes

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.

RRafael Ortet
72% match
Loading thumbnail…

Fork of Fork of Tree with rectangular links

This interactive tree diagram visualizes hierarchical data from a JSON file, using rectangular links to connect parent and child nodes. The visualization is built with D3 version 6, employing the `d3.cluster` algorithm for layout and custom SVG path generation for the orthogonal edges. Users can click on individual nodes to expand or collapse their subtrees, triggering smooth animated transitions that reposition the remaining elements. The diagram displays node labels alongside colored rectangles indicating whether each node has children, with the viewport automatically adjusting to fit the current layout through transitions.

SSEDKI91
68% match
Loading thumbnail…

Fork of Tree3

This interactive D3.js tree diagram visualizes a hierarchical dataset of failure codes and priorities from a CSV file, with nodes representing categories like functional issues and process errors. The layout uses a collapsible tree structure where clicking a node toggles its children, enabling exploration of nested relationships. Built with D3 v3, it employs `d3.layout.tree` for positioning, `d3.svg.diagonal` for curved links, and SVG transitions to animate nodes and links as the hierarchy expands and collapses. The visualization renders text labels and circles styled with CSS, with data loaded asynchronously via `d3.csv`.

MMariaPapadopoulou
66% match
Loading thumbnail…

Fork of Fork of Tree

A static hierarchical tree diagram is built from a hard-coded dataset of parent-child name pairs. Each node is rendered as a large grey circle with a red outline, labeled with the person's name. The example uses D3 version 6 to construct the tree layout via `d3.stratify` and `d3.tree`, then draws the connecting links as blue paths. The SVG markup is created directly, with animated transitions on the path and circle elements that adjust positions and sizes over a short duration.

AArv1228
66% match
Loading thumbnail…

Fork of Fork of Fork of Tree 7

A clickable, animated tree diagram shows hierarchical data loaded from a local JSON file. Clicking a node toggles its children, collapsing or expanding subtrees with smooth transitions. The visualization uses D3 v3’s `d3.layout.tree` to calculate node positions and `d3.svg.diagonal` to draw curved links, while SVG circles and text labels update via `transition()` over 1100 milliseconds. Node fill colors distinguish collapsed branches from open ones.

Bbindhureddy98
66% match
Loading thumbnail…

Fork of Fork of Fork of Tree 7

A clickable, animated tree diagram shows hierarchical data loaded from a local JSON file. Clicking a node toggles its children, collapsing or expanding subtrees with smooth transitions. The visualization uses D3 v3’s `d3.layout.tree` to calculate node positions and `d3.svg.diagonal` to draw curved links, while SVG circles and text labels update via `transition()` over 1100 milliseconds. Node fill colors distinguish collapsed branches from open ones.

Bbindhureddy98
66% match