Orbit: 3D Dependency Visualiser for Large Codebases
NEO built a 3D dependency graph you can rotate and inspect. Clusters, cycles, and risky hubs show up in a way flat 2D graphs rarely manage, especially in monorepos where hundreds of packages overlap.
Problem Statement
We asked NEO to turn lockfiles and import graphs into a 3D view that works for monorepos and mixed stacks, with filters for team and layer. Understanding dependency health is not only about whether a graph renders, but whether you can spot cycles, depth, and version skew without losing context in a dense edge list.
Solution Overview
- Graph build: Parse
npm lsJSON andpackage-lock.json(or compatible trees) into a unified dependency model. - Cycle detection: Run Tarjan’s algorithm for strongly connected components so circular dependency chains are explicit, not buried in edge lists.
- 3D layout: Three.js force-directed layout in the browser; nodes and edges are interactive.
- Config: Ignore patterns for test fixtures, build tools, or noise packages via
.orbit.jsonat the repo root.
Why 3D Helps
In a large JavaScript or TypeScript monorepo, dependency graphs are often too dense for a single flat view. Orbit maps packages into 3D space so clusters separate naturally. You can rotate the scene, zoom into a subgraph, and use search to focus a package and its neighbors. Cycles are first-class: Tarjan SCC identifies strongly connected components, which are the structural smell of circular dependencies that complicate builds and refactors.
Workflow / Pipeline
| Step | Description |
|---|---|
| 1. Import | Point at repo root; run npm client or ingest lockfile-derived JSON |
| 2. Resolve | Build unified dependency DAG with versions; compute SCCs for cycles |
| 3. Filter | Apply .orbit.json ignore patterns for dev-only or generated packages |
| 4. Render | WebGL scene with search, focus, and rotation controls |
| 5. Watch / export | Optional watch mode refreshes when lockfiles change; snapshot graph JSON for CI |
Stack and How to Run
The visualiser is a small Node application: Express serves static assets and the Three.js front end. After installing dependencies, you typically start the server from the project directory and open the local URL in a browser. A watch mode can re-run analysis when package.json or lockfiles change, which is useful during refactors that touch dependencies.
Repository & Artifacts
Generated Artifacts:
- Visualiser web app and optional graph export for CI artifacts
.orbit.jsonconvention for ignoring dev-only or noisy nodes