Knowledge Graph Visualiser

Interactive knowledge graph editor and visualizer powered by D3.js. Create, explore and edit entity relationship graphs with live preview, Wikidata integration and force-directed layouts.

Demo

Live Demo

Features

• Visual Graph Editor — interactive force-directed graph with D3.js, drag nodes, zoom & pan
• JSON Editor — edit graph data directly with live preview and syntax validation
• Wikidata Explorer — search Wikidata entities, select properties and build knowledge graphs iteratively
• Entity Salience — node size reflects entity importance (0–1 scale)
• Categories — color-coded node categories with legend and filtering
• Import/Export — load and save graphs as JSON files
• LLM Prompts — included prompts for generating knowledge graphs with AI (entity extraction, graph generation)

Quick Start

No build tools required. Just open in a browser:

git clone git@github.com:romek-rozen/knowledge-graph-visualiser.git
cd knowledge-graph-visualiser
open index.html

Or visit the live demo.

Stack

• Vanilla HTML / CSS / JavaScript (no frameworks, no npm)
• D3.js v7 (CDN)
• Wikidata REST API

Project Structure

css/                   — stylesheets (variables, base, toolbar, editor, graph, panels, modals, buttons)
js/
  app.js               — entry point, module initialization
  graph-renderer.js    — D3.js graph rendering (force simulation, zoom, drag)
  graph-editor.js      — CRUD for nodes, links, categories
  info-panel.js        — node info panel on click
  editor.js            — JSON editor, parsing, status indicator
  toolbar.js           — toolbar buttons (new, import, export)
  resizer.js           — draggable panel boundary
  wikidata.js          — Wikidata API integration
data/example-data.js   — example graph data
prompts/               — LLM prompts for entity extraction and graph generation

Graph Data Format

{
  "title": "My Knowledge Graph",
  "categories": {
    "person": { "label": "Person", "color": "#e74c3c" }
  },
  "nodes": [
    { "id": "node1", "label": "Albert Einstein", "category": "person", "description": "Physicist", "salience": 0.95 }
  ],
  "links": [
    { "source": "node1", "target": "node2", "label": "developed" }
  ]
}

License

MIT