Skip to main content
SimilarExport ZIP
100%

Fault Tree

✓ Published3🌍 Public
JJoker-tr
Last edited Feb 8, 2020
Created on Feb 8, 2020
Forked from Hello VizHub

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.

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

Fork of 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.

SSEDKI91
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
78% match
Loading thumbnail…

Tree2

This interactive tree diagram visualizes a hierarchical dataset of defect categories, priorities, and related items. The graph.csv data is loaded with d3.csv, converted into a tree structure, and rendered as collapsible nodes and links using d3.layout.tree and d3.svg.diagonal. Clicking a node toggles its children, with transitions smoothly animating position changes via d3’s transition methods. The SVG output uses circle nodes and bold labels, with lightsteelblue indicating collapsed branches.

Nnadia-el
70% match
Loading thumbnail…

Untitled

This example visualizes a hierarchical fault tree for a Mars rover mission, showing components like avionics, cameras, and batteries with their potential failure modes. The radial tree layout, rendered as an SVG using D3 v4, positions failure categories and specific faults around a circular structure. Data comes from a CSV file with hierarchical IDs, processed through `d3.stratify` and `d3.tree` to create the node hierarchy. Curved links connect parent-child nodes, with text labels rotated along the circumference to display component names and failure codes.

NNikalculus
68% match
Loading thumbnail…

Tree

This interactive tree diagram visualizes a hierarchical dataset, displaying nodes as colored boxes connected by labeled links with directional arrows. The layout renders synchronously in SVG and supports zooming and dragging via `d3.behavior.zoom`. Node colors map to `type` fields, and tooltips appear on hover, while link direction (SYNC or ASYN) is shown through arrow markers. Data loads from JSON using `d3.json`, and the layout uses `d3.layout.tree` with a `breadthFirstTraversal` to adjust SVG dimensions dynamically.

Uusamazaibabbasi
68% match
Loading thumbnail…

Untitled

This example shows a hierarchical fault tree for a Mars rover mission, displaying components and their potential failure modes. Operations branch into launch and transit phases, with nested nodes for subsystems like avionics, cameras, and the single-board computer. Each leaf node is labeled with a failure code such as D1, D2, or E1. The visualization uses D3 v4’s `d3.tree` and `d3.stratify` to convert a flat CSV file with dot-separated paths into a structured hierarchy, rendered as an SVG with curved links and styled node circles.

NNikalculus
68% match
Loading thumbnail…

Tree Example

An interactive tree diagram displays hierarchical data with collapsible nodes, marking leaf nodes and internal nodes distinctly with text labels. Clicking a node toggles its child branches, with animated transitions repositioning nodes and links. The visualization uses D3.js 3.5.17, SVG rendering, and React via the VizHub framework, building the tree via `d3.layout.tree` and drawing curved diagonal links with `d3.svg.diagonal`.

JJonathan Liu
68% match