Commit 0396d29
feat: Add vis.js graph visualization examples
Added interactive visualization capabilities with vis.js:
New Files:
- examples/visualization-browser.html (15KB) - Standalone interactive demo
- 4 pre-loaded example datasets (job search, social, knowledge, dependencies)
- Color-coded node types with hover details
- Interactive controls: zoom, pan, reset view
- Real-time graph statistics panel
- No backend required - runs entirely in browser
- examples/visualization-export.ts (204 lines) - Export to vis.js format
- Convert sqlite-graph data to vis.js JSON format
- Generate standalone HTML visualizations
- Export raw JSON for custom visualizations
- Job search graph example with 11 nodes, 14 edges
- Demonstrates graph traversal queries for filtering
Dependencies:
- [email protected] (dev dependency)
- [email protected] (dev dependency)
Use Cases:
- Visual debugging of graph structures
- Interactive exploration of relationships
- Demo and presentation tool
- Export data for external visualization tools
Run Examples:
```bash
# Generate visualization from graph data
npx ts-node examples/visualization-export.ts
# Open in browser
open examples/job-search-visualization.html
open examples/visualization-browser.html
```
Features:
✅ Interactive node dragging and zooming
✅ Automatic graph layout with physics simulation
✅ Color-coded node types
✅ Edge labels showing relationship types
✅ Click nodes to see properties
✅ Export to JSON for custom tools
✅ Standalone HTML (no server needed)
🚀 Generated with Claude Code
Co-Authored-By: Claude <[email protected]>1 parent 5362e10 commit 0396d29
File tree
4 files changed
+713
-1
lines changed- examples
4 files changed
+713
-1
lines changed| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
| |||
| 1 | + | |
| 2 | + | |
0 commit comments