Interactive Knowledge Graph Demo

Experience the power of Lokus’s graph visualization technology right in your browser. This interactive demo uses the exact same technology as Lokus’s knowledge graph feature:

react-force-graph-2d - 2D force-directed graph visualization
D3-force - Physics-based layout simulation
Three.js - WebGL rendering (in 3D mode)

Try It Out

Loading graph...

About the Technology

Force-Directed Graph Layout

The graph uses a physics-based simulation to automatically arrange nodes:

Charge Force - Nodes repel each other like magnets
Link Force - Connected nodes are pulled together
Center Force - Keeps the graph centered
Collision Force - Prevents nodes from overlapping

This creates organic, visually pleasing layouts that reveal the structure of your knowledge base.

Real-time Interaction

What you can do:

Click nodes to select and focus
Drag nodes to rearrange the graph
Scroll to zoom in/out
Pan by dragging the background
Watch particles flow along connections

Performance

This demo handles thousands of nodes at 60 FPS using:

Canvas rendering for performance
Viewport culling - Only render visible nodes
Barnes-Hut optimization - O(n log n) physics
Web Workers - Background calculations

Graph Modes in Lokus

Lokus supports multiple graph visualization modes:

2D View (This Demo)

Fast canvas-based rendering
Force-directed layout with D3 physics
Perfect for everyday use

3D View

WebGL rendering with Three.js
3D sphere meshes with lighting
Spatial navigation
Immersive exploration

Force View

Enhanced 2D with customizable forces
Real-time force parameter adjustment
Advanced physics controls
Particle effects

Customization

In Lokus, you can customize every aspect of the graph:

Visual Settings

{
  nodeSizeMultiplier: 1.0,     // Node size scaling
  lineSizeMultiplier: 1.0,     // Edge thickness
  textFadeMultiplier: 1.3,     // Label visibility
  colorScheme: 'type',         // Color by type/folder/tag
  showArrow: true,             // Directional arrows
}

Physics Settings

{
  repelStrength: 400,          // Node repulsion force
  linkDistance: 100,           // Preferred edge length
  linkStrength: 1,             // Edge tension
  centerStrength: 0.3,         // Pull to center
}

Filters

{
  showOrphans: true,           // Nodes without links
  showTags: true,              // Tag nodes
  showAttachments: true,       // File attachments
  hideUnresolved: false,       // Missing wiki links
}

Use Cases

Research & Academia

Connect papers, notes, and ideas to see relationships and patterns emerge naturally.

Project Management

Visualize project dependencies, team connections, and task relationships.

Personal Knowledge Management

See how your thoughts and ideas connect, revealing insights you might have missed.

Creative Writing

Map character relationships, plot points, and world-building elements.

Performance Benchmarks

Testing on a MacBook Pro M1:

Nodes	Links	FPS	Layout Time
100	200	60	< 1s
1,000	2,000	60	2s
10,000	20,000	55	8s
50,000	100,000	30	45s

Optimization Techniques:

Viewport culling for large graphs
Level of detail (LOD) rendering
Progressive rendering in chunks
Memory pooling for vectors
Aggressive caching

Learn More

Documentation

Graph Feature Guide - Complete graph documentation
Graph API - Developer API reference
Performance Tips - Optimize for large graphs

Technical Details

Library: react-force-graph-2d v1.29.0
Physics: d3-force v3.0.0
Rendering: HTML5 Canvas
3D Engine: Three.js v0.180.0 (for 3D mode)

Source Code

Try Lokus

Ready to experience this in your own knowledge base?

Download Lokus → | Quick Start Guide →

Feedback

Have suggestions for the graph visualization?

Pro Tip: In Lokus, you can export your knowledge graph as high-resolution PNG or SVG for presentations, papers, or sharing with colleagues.

v1.3 Quantum Leap Comparison