Skip to main content
SimilarExport ZIP
100%

Swim Lanes (vertical)

✓ Published0🌍 Public
JJoker-tr
Last edited Jan 25, 2020
Created on Jan 25, 2020
Forked from Hello VizHub

This vertical swim lane diagram uses GoJS to organize workflow stages into labeled pools and lanes, with lanes that can be collapsed or resized by dragging. A custom `GridLayout` aligns lane lengths, while the `LaneResizingTool` enforces minimum sizes and synchronizes all lanes when one is lengthened. The diagram supports dragging nodes between lanes and relayouts the pools dynamically after any modification.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Swimlane using d3.js

This swimlane chart displays multiple lanes of time-based work items, with a main interactive chart linked to a mini overview for brushing and navigation. Items are color-coded by whether they are in the past or future relative to the current date. The visualization is built with D3.js v2 and uses `d3.time.scale`, `d3.svg.axis`, and `d3.svg.brush` to handle time axes and selection. Data is randomly generated by a helper script, producing lane assignments and start/end dates.

BBBischof
67% 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
59% match
Loading thumbnail…

Layer Bands using a Background Part

This example demonstrates a tree diagram that arranges connected nodes into distinct horizontal bands, each representing a stage in an airport process flow from entry to departure. Using the GoJS library with a custom BandedTreeLayout, the visualization overlays colored background panels and rotated labels onto the diagram’s Background layer to highlight each layer’s range. The layout’s commitLayers method updates the band positions and sizes dynamically, with data binding managing the panel bounds and visibility.

JJoker-tr
59% 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
58% match
Loading thumbnail…

Interactive Force Directed Layout

An interactive network visualization demonstrates a continuous force-directed layout in which users can push and pull nodes. Selected nodes remain fixed while the layout algorithm repositions all others, with the diagram re-laying out during and after drag operations. The example uses the gojs library’s `ForceDirectedLayout` class, extending it to create a `ContinuousForceDirectedLayout` that optimizes performance by caching the network. Nodes are rendered as circles with text labels, and links include arrowheads and fading label backgrounds, all output as SVG via the gojs `Diagram` component.

Mmylavarapus
57% match
Loading thumbnail…

Fork of Interactive Force Directed Layout

A fork of the Interactive Force Directed Layout example uses GoJS to demonstrate a continuously running force-directed layout where users can push and pull nodes. The layout automatically spreads nodes apart while dragging, with selected nodes remaining fixed. The diagram uses circular node templates and arrowed links with labels, styled through GoJS GraphObject.make. The code includes a model change listener to invalidate the cached network when structure changes.

VVictor Lorena
57% 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
56% match
Loading thumbnail…

Interactive Directed Layout

This example demonstrates an interactive directed layout where users can push and pull nodes within a continuously updating force-directed graph. Selected nodes remain fixed while other nodes are automatically repositioned through a custom `ContinuousForceDirectedLayout` that extends GoJS’s `ForceDirectedLayout`, reusing the layout network for performance. The visualization uses GoJS for diagram rendering and D3.js v7 for utility functions, with node dragging triggering layout invalidations to animate the graph in real time.

FFereidoun Mianji
56% match