NexusGraph — Transform Any Text into a Stunning AI Knowledge Graph (Gemma 4 + D3.js)

What I Built

NexusGraph is an AI-powered knowledge graph explorer that transforms any text into a stunning, interactive force-directed graph visualization.

Paste an article, research paper, meeting notes, or any content — and watch as Gemma 4 extracts entities, discovers relationships, and builds a beautiful animated knowledge graph in real-time.

✨ Key Features

• 🧠 AI-Powered Entity Extraction — Gemma 4 identifies people, organizations, concepts, technologies, events, and places from any text
• 🔗 Relationship Discovery — Automatically maps how entities connect with descriptive relationship labels
• 🎬 Real-Time Streaming — Nodes and edges appear one-by-one via Server-Sent Events, creating a mesmerizing build animation
• 🖱️ Interactive Graph — Click, drag, zoom, and pan. Hover over nodes to highlight connections. Click any node to see its details and relationships
• 🔍 Explore Deeper — Select any node and ask Gemma 4 to expand it with additional sub-entities and connections
• 💬 Ask Gemma 4 — Ask natural language questions about the graph and get contextual AI-powered answers
• 📊 Category Visualization — Nodes are color-coded by type (person, concept, technology, organization, etc.) with glowing effects
• 📥 Export — Download your knowledge graph as a PNG image
• 🌍 Multilingual — Works with text in 35+ languages thanks to Gemma 4's multilingual training

The Stack

• Backend: Node.js + Express
• AI: Gemma 4 31B Dense via OpenRouter
• Visualization: D3.js force-directed graph
• Streaming: Server-Sent Events (SSE)
• Frontend: Vanilla HTML/CSS/JS — zero frameworks, zero bloat

Demo

🔗 Live Demo → https://nexusgraph-production.up.railway.app

Try clicking one of the built-in examples ("AI & Machine Learning", "History of the Internet", or "The Solar System") to see it in action instantly!

How It Looks

The app analyzes the "AI & Machine Learning" example and extracts 21 entities and 22 relationships, building this interactive graph:

Code

saquiblancework / NexusGraph

How I Used Gemma 4

Why Gemma 4 31B Dense?

I chose the Gemma 4 31B Dense model because knowledge graph extraction requires deep reasoning that smaller models can't match:

1. Complex entity extraction — Identifying that "Dartmouth Conference" is an event, "Geoffrey Hinton" is a person, and "Transformer Architecture" is a technology requires nuanced understanding
2. Relationship reasoning — Generating specific relationship labels like "pioneered" or "defeated" (not generic "related to") demands strong language comprehension
3. Structured JSON output — Reliably producing valid JSON with nested objects and consistent IDs requires instruction-following capability that the 31B model handles excellently
4. Long context — The 256K context window handles lengthy articles and papers without truncation

Three Intentional Integration Points

NexusGraph uses Gemma 4 in three distinct, purpose-built ways — not just a chat wrapper:

1. Analyze (/api/analyze) — The core pipeline. Gemma 4 receives carefully engineered prompts that instruct it to:

• Extract 10-25 entities with categories, descriptions, and importance scores (1-10)
• Map relationships with descriptive labels and strength scores
• Output strict JSON schema for programmatic parsing

// Structured prompt engineering for reliable graph extraction
const ANALYZE_PROMPT = `You are an expert knowledge graph builder...
OUTPUT FORMAT — respond with ONLY this JSON:
{
  "nodes": [{"id": "snake_case_id", "label": "...", "category": "person|concept|...", "importance": 8}],
  "edges": [{"source": "node_id_1", "target": "node_id_2", "label": "relationship verb", "strength": 7}]
}
RULES:
- Extract 10-25 nodes for optimal visualization
- Every node MUST connect to at least one other node
- Use specific relationship labels — never "related to"`;

2. Explore (/api/explore) — When a user clicks "Explore Deeper" on any node, Gemma 4 generates a sub-graph with 5-10 additional entities specifically related to that concept, while being aware of existing nodes to avoid duplicates.

3. Ask (/api/ask) — Context-aware Q&A. Gemma 4 receives both the original text AND the extracted graph structure, enabling it to answer questions like "What's the connection between Geoffrey Hinton and modern LLMs?" with graph-aware reasoning.

The SSE Streaming Architecture

Instead of waiting for the full response and rendering everything at once, I stream the graph to life:

User Input → Gemma 4 (extract JSON) → Parse → SSE Stream nodes one-by-one → SSE Stream edges → Done

Each node arrives as an individual SSE event with a 120ms delay, triggering a D3.js elastic spring animation. The result is a mesmerizing "graph building itself" effect that makes the AI feel alive.

// Stream nodes one by one for animation effect
for (const node of graph.nodes) {
  await delay(120);
  sseWrite(res, { type: 'node', data: node });
}

This isn't just eye candy — it gives users real-time feedback during the 10-30 second analysis, turning wait time into an engaging experience.

What I Learned

• Gemma 4's instruction-following for structured JSON is remarkably reliable — I rarely needed to retry for parse errors
• The 31B Dense model strikes the perfect balance between quality and speed for this use case
• Prompt engineering matters more than model size — specific examples and strict format rules dramatically improved extraction quality.