Layer Bands using a Background Part

100%

Layer Bands using a Background Part

✓ Published0🌍 Public

Last edited Jan 26, 2020

Created on Jan 26, 2020

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.

AI-generated description

An example showing the capabilities of VizHub.

MIT Licensed

Similar vizzes

Loading thumbnail…

Rounded Groups With a Header and a Footer

This example shows a tree diagram where nodes are grouped into containers, each with a header, a body, and a footer. The container’s header and footer use custom GoJS shapes, `RoundedTopRectangle` and `RoundedBottomRectangle`, from the `RoundedRectangles` extension, while the body holds child nodes via a `Placeholder`. Node templates similarly combine these shapes to display role-based coloring and optional loop indicators using `BpmnActivityLoop`. The diagram uses `go.TreeLayout` for automatic positioning, and links are drawn with orthogonal routing and triangular arrowheads. Data is provided as a static JSON-like array of nodes and groups.

JJoker-tr

61% match

Loading thumbnail…

Three-Layer Tree Visualization

This visualization displays a hierarchical tree with three labeled layers beneath a root node, covering categories like Animals, Vehicles, Countries, and Continents. It uses a left-to-right layout implemented with D3.js v7, employing `d3.tree` and `d3.hierarchy` to compute node positions. The SVG rendering draws gray curved links via `d3.linkHorizontal`, while circular nodes are color-coded by depth—red for the root, blue, green, and orange for subsequent levels—with text labels positioned based on whether each node has children. The interactive hover tooltips show each node’s name.

Ssaikrishnabussa

61% match

Loading thumbnail…

tier-layout

Four tiers are arranged horizontally across the top of the SVG, each containing a variable number of groups. Groups are represented as labeled white circles, positioned proportionally across each tier. Inside each group, nodes are laid out in a grid pattern within small grey circles. Links connect groups across tiers: gA points to gB and gC, gB to gC, gD to gC and gE, gH to gF, gG, and gE. Tier labels are placed above each tier, and group labels appear above their circles. The layout uses a vertical banding to show hierarchical tiers, with nodes and links nested inside the groups.

11wheel

61% match

Loading thumbnail…

Swim Lanes (vertical)

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.

JJoker-tr

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

58% match

Loading thumbnail…

Layout Test

This example demonstrates a hierarchical tree layout rendered as an SVG visualization, with data representing a page structure of components and partials. The tree uses d3.tree and d3.hierarchy to compute node positions, while d3.linkHorizontal draws curved paths between parent and child nodes. The visualization supports pan and zoom through d3.zoom, with the zoom transform applied to a group element containing the rendered tree. A data store module supplies the hierarchical data, and the code includes a typo where circles are appended using the incorrect tag name instead of “circle.”

MMatt Morris

58% match

Loading thumbnail…

Tree

This example shows a hierarchical tree of medical fields and related professionals, with nodes color-coded by generation depth. The visualization uses d3.stratify() to structure the flat parent-child data, d3.tree() to compute the layout, and SVG circles, paths, and text elements for rendering. Labels appear to the right of each node, and brown cubic Bézier curves connect parents to children. The background and text styling come from the linked stylesheet.

Kkakumanusreya

58% match

Loading thumbnail…

SystemschichtenUndUebung

Three stacked rectangular layers in red, teal, and green represent system layers (UI, code, and data) in an abstract static diagram. Each layer uses an SVG `rect` with a fill-opacity of 0.4, a CSS `rotate3d` transform, and a colored drop-shadow filter to create a pseudo-3D stacked appearance. The visualization is rendered with React and D3 v6 inside a reusable `VizContainer` that follows the margin convention and displays the chart frame. No dynamic interaction or data binding occurs; the example focuses solely on styling layered geometric shapes.

CChrisHeinirch

58% match