Interactive Playground

Live graph algorithm demos powered by @graphrs/core. Adjust parameters with the slider, click Run to regenerate. Scroll to zoom, drag to pan. Show Code to view the source, Fullscreen for immersive view.

Force-Directed Layout — Live Convergence

Watch a scale-free network self-organize in real time. Nodes start at random positions and spring into structure through the Fruchterman–Reingold algorithm — repulsion pushes apart, attraction along edges pulls together. The energy bar drops as the system converges:

Community Detection

Modularity-optimized label propagation identifies densely-connected clusters. Intra-community edges are highlighted, inter-community links dimmed. High-degree community hubs glow:

Betweenness Centrality

Brandes' algorithm scores every node by how many shortest paths pass through it. Warm colors (red/orange) indicate structural bridges between clusters:

PageRank

Power-iteration PageRank on a directed web graph. Node size and color encode authority — gold nodes are the most linked-to hubs. Edge opacity shows connection importance:

Graph Generators

Compare different random graph models — Barabási–Albert (scale-free hubs), Erdős–Rényi (uniform random), Watts–Strogatz (small-world clustering), and classical topologies (ring, star, complete). Node size reflects degree:

Performance Benchmark

Click Run Benchmark to measure BFS, Dijkstra, PageRank, and Betweenness at increasing scales. The chart shows O(V+E) vs O(V²·E) complexity — betweenness on 1000 nodes takes seconds in pure JS, while @graphrs WASM delivers 10-500x speedup:

G6 — Layout + Community Pipeline

AntV G6 lacks built-in community detection and its layout slows down at scale. This demo shows @graphrs computing force-directed layout + community detection as a single pipeline on 500+ nodes — solving G6's analysis bottleneck with timed results:

React Flow — Instant Hierarchical Layout

React Flow has zero built-in layout — users need external libraries (dagre, elkjs) that are slow and add bundle weight. This demo shows @graphrs computing Sugiyama hierarchical layout for DAG workflows instantly, with bezier edges and proper layer ordering: