Sina Ja

@sinathecoder·2 public vizzes

Fork of Interactive Force Directed Layout

This example demonstrates an interactive force-directed graph where users can push and pull nodes, with selected nodes remaining fixed in place during continuous layout. The visualization uses the gojs library (`go.ForceDirectedLayout`, `go.Diagram`, `go.Shape`, `go.TextBlock`) to compute spring and electrical forces that automatically space nodes apart while dragging. The implementation customizes the layout to reuse a cached `ForceDirectedNetwork`, updating bounds for selected nodes and recalculating positions only when the structure changes. A “SelectionMoved” event triggers an extra layout pass after each drag interaction.

Jul 12, 2021

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.

Jul 12, 2021