https://github.com/blackwell-systems/knowing-viz
React graph visualization for knowing. Sigma.js 2D + Three.js 3D, 6 grouping algorithms, provenance/edge-type/blame filtering, timeline snapshot diff, Zustand state, framer-motion animations.
https://github.com/blackwell-systems/knowing-viz
code-intelligence graph-visualization graphology react sigma-js software-architecture static-site threejs visualization zustand
Last synced: 2 days ago
JSON representation
React graph visualization for knowing. Sigma.js 2D + Three.js 3D, 6 grouping algorithms, provenance/edge-type/blame filtering, timeline snapshot diff, Zustand state, framer-motion animations.
- Host: GitHub
- URL: https://github.com/blackwell-systems/knowing-viz
- Owner: blackwell-systems
- Created: 2026-05-15T19:44:28.000Z (about 2 months ago)
- Default Branch: main
- Last Pushed: 2026-07-08T01:58:19.000Z (2 days ago)
- Last Synced: 2026-07-08T03:26:52.523Z (2 days ago)
- Topics: code-intelligence, graph-visualization, graphology, react, sigma-js, software-architecture, static-site, threejs, visualization, zustand
- Language: TypeScript
- Size: 7.88 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Interactive graph visualization for cross-repo software relationships.
## What This Is
A static site that visualizes [knowing](https://github.com/blackwell-systems/knowing)'s knowledge graph: nodes (symbols), edges (relationships), cross-repo connections, provenance tiers, and blast radius. No backend, no database, no auth. Reads a JSON export from knowing and renders it.
## Views
**Galaxy View:** All repos as clusters, cross-repo edges as arcs between them. Nodes sized by blast radius. The hero screenshot.
**Blast Radius View:** Click a symbol, see all transitive callers fan out. Cross-repo callers highlighted. Confidence shown as edge opacity.
**Timeline View:** Scrub through commits. New edges glow, removed edges fade. Visualizes the event-sourced history.
**Provenance Overlay:** Toggle between static edges (blue), runtime edges (green), and stale edges (red).
## Usage
```bash
# In your knowing repo, export the graph
knowing export > graph.json
# Copy to this project
cp graph.json public/demo-graph.json
# Run locally
npm install
npm run dev
```
Or use the pre-baked demo data from polywave-go + polywave-web (228 cross-repo edges).
## Data Source
This project consumes JSON exported by `knowing export`. No runtime dependency on knowing. The JSON schema:
```json
{
"repos": [{"id": "...", "url": "...", "nodeCount": 6340}],
"nodes": [{"id": "hash", "label": "pkg.Func", "kind": "function", "repo": "...", "package": "..."}],
"edges": [{"source": "hash1", "target": "hash2", "type": "calls", "provenance": "lsp_resolved", "confidence": 0.9, "crossRepo": true}],
"snapshots": [{"hash": "...", "commit": "abc123", "timestamp": 1715700000}]
}
```
## Tech Stack
- [Cytoscape.js](https://js.cytoscape.org/) (2D interactive graph)
- [Three.js](https://threejs.org/) (3D galaxy view for screenshots)
- [Vite](https://vite.dev/) (build tool)
- TypeScript
- Static deployment (GitHub Pages)
## Relationship to knowing
`knowing` is the system of record. `knowing-viz` is a read-only visualization layer that consumes exported data. No code is shared between the two projects. Screenshots generated here are used in knowing's README.
## License
MIT