Page Flow

100%

✓ Published1🌍 Public

Last edited Feb 6, 2020

Created on Feb 6, 2020

Page Flow is a workflow diagram that visualizes navigation paths between web pages, distinguishing source pages, desired events, and undesired outcomes with color-coded nodes. Built with the GoJS diagramming library, it supports editable node labels, a layered digraph layout, and an undo manager. Users can click an adornment button to add new connected nodes, and the diagram zooms via mouse wheel events, following forward-only linking rules.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Page Flow

This example shows a page-flow workflow diagram with colored nodes for sources, pages, and desired or undesired events, linked to illustrate navigation paths. Built with GoJS 2.1.2, it uses diagram templates for nodes and links, editable text blocks, and a layered digraph layout. Users can click a plus button on any selected node to add a new connected node, while the undo manager tracks modifications and the mouse wheel zooms the canvas.

AAlex Velez

88% match

Loading thumbnail…

Untitled

This example is an interactive flowchart editor that renders diagrams from text-based descriptions. Users input flowchart syntax into a text area, and the flowchart.js library parses and draws the result onto an SVG canvas. The code demonstrates custom styling options, including colored start and end nodes, conditional branches, and parallel tasks. It integrates D3.js for DOM manipulation to build the interface elements, while Raphael and jQuery handle the flowchart rendering and click interactions on subroutines.

JJoker-tr

66% match

Loading thumbnail…

Untitled

This example demonstrates an interactive flowchart editor that parses user-provided text input into a styled diagram, supporting custom states, colors, and hyperlinks on nodes. The visualization uses the flowchart.js library with Raphael for rendering, while D3 v5 handles DOM manipulation and layout of the interface. Users can edit the flowchart syntax in a textarea, click a button to draw the chart onto a canvas, and interact with nodes to trigger alerts or log events. The code defines custom flow states like "past," "current," and "approved" to visually distinguish different processing stages.

Jjsong

66% match

Loading thumbnail…

Untitled

This example shows an interactive flowchart generator where users input flowchart syntax into a textarea and press a button to render the diagram. The visualization uses the flowchart.js library to parse the text and draw the chart onto an SVG canvas, while D3.js (v5) handles DOM manipulation to create the input interface and dashboard layout. The code defines flow states like "past", "current", and "future" with custom colors and styles, and includes click handlers for subroutines that trigger alerts. It integrates Raphael for SVG rendering, jQuery for event handling, and custom CSS for end-element styling.

JJoker-tr

66% match

Loading thumbnail…

Flow Visualization - Tapered, Curved

Interactive nodes show aggregate flows between six circles, with link thickness and green color mapped from randomly assigned strength values. Dragging any circle interactively updates its connected paths, which are drawn as tapered, curved lines using `d3.svg.line` with a basis interpolation and offset calculations. The SVG visualization uses D3 v2, jQuery for node targeting, and includes drop-shadow filters and a background image.

MMbrownshoes

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

Interactive Force Directed Layout

Interactive Force Directed Layout uses the GoJS library with a custom ContinuousForceDirectedLayout that runs continuously while dragging nodes. Users can push and pull nodes around the diagram, with selected nodes remaining fixed while others respond to spring and electrical charge forces. The layout reuses an optimized ForceDirectedNetwork, invalidating and recomputing positions during drag operations. A data-driven node template binds text labels to circle-shaped vertexes, with links displaying arrowheads and radial-gradient label backgrounds.

Ssgzzhinde

62% match

Loading thumbnail…

Data Flow Diagram

This visualization renders a reactive data flow diagram for a ModelJS application, using a force-directed graph layout to display the dependencies between reactive properties and lambda functions. The graph is constructed from runtime-generated JSON describing the flow, with SVG rendering driven by D3's force layout. Nodes are positioned by the layout, with `property` nodes colored coral and `lambda` nodes white, while links trace the flow of data between them. The diagram includes zoom and pan interactions, and visually encodes the structure of reactive dependencies in a dynamic, graph-based form.

CCurran Kelleher

61% match