Fishbone Layout

100%

Fishbone Layout

✓ Published0🌍 Public

Last edited Feb 11, 2020

Created on Feb 11, 2020

This example demonstrates a fishbone (Ishikawa) cause-and-effect diagram, with the root cause "Incorrect Deliveries" branching into four major categories and their sub-causes. It uses the GoJS library with the `FishboneLayout` extension and custom `FishboneLink` templates to position nodes and draw angled connectors. The diagram is read-only, with node text and font styling bound directly to structured JSON data.

AI-generated description

MIT Licensed

Similar vizzes

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

68% 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

65% match

Loading thumbnail…

Interactive Force Directed Layout

This interactive example uses the GoJS library’s `ForceDirectedLayout` to create a continuously updating network diagram. Users can push and pull nodes, with selected nodes remaining fixed while others respond to simulated spring and electrical forces. The layout is invalidated during dragging, and the network is cached for efficiency, updating only when structural changes occur. Data is rendered as labeled circular nodes connected by directed links with arrowheads and gradient-backed text labels.

JJoker-tr

63% 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

62% match

Loading thumbnail…

Fork of Interactive Force Directed Layout

This example demonstrates an interactive force-directed graph layout using the gojs library (yFiles for HTML). The visualization continuously re-runs a layout algorithm as users drag nodes, with selected nodes remaining fixed while all others are repositioned. The graph displays nodes as circles with text labels, connected by links featuring arrowheads and gradient-backed labels. The implementation extends `go.ForceDirectedLayout` with a `ContinuousForceDirectedLayout` subclass, optimizing performance by caching the network and only updating bounds for selected nodes during drag operations. The example also includes Node.js templates with binding for text content and custom link styling.

SSina Ja

60% match

Loading thumbnail…

Fork of Interactive Force Directed Layout

This interactive force-directed graph demonstrates a continuously running layout where users can push and pull nodes, with selected nodes remaining fixed while others rearrange. Built using GoJS 2.1.2, the `ContinuousForceDirectedLayout` subclass overrides the standard layout to cache the network and reuse it across frames, recalculating positions only for unselected nodes during drag operations. The diagram uses circle-shaped nodes with text labels and directed links with arrowheads, updating the layout live as users interact with the graph.

JJinnaF

60% match

Loading thumbnail…

Fork of Interactive Force Directed Layout

This example demonstrates an interactive force-directed graph using the GoJS library, where nodes and links can be pushed and pulled around the canvas. The layout continuously runs as users drag nodes, keeping selected nodes fixed while automatically repositioning all others. It uses a custom `ContinuousForceDirectedLayout` that extends GoJS’s built-in layout, with the diagram’s `draggingTool` triggering layout invalidation during drag operations. The code also includes standard GoJS node and link templates, with circular node shapes and arrow-headed links.

Mmah-far

60% 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

60% match