An interactive force-directed graph visualizer built with Vite, TypeScript, PixiJS, and D3 Force.
Live Demo: thegorav.xyz/graph-visualizer
- High-performance Canvas 2D rendering via PixiJS
- Smooth pan, zoom, and node dragging with D3
- Organic breadth-first wave reveal animation
- Preferential Attachment (Barabási–Albert) — realistic hub-and-cluster networks
- Random (Erdős–Rényi) — uniform random graphs
- Custom Input — define your own edge list
| Category | Options |
|---|---|
| Display | Labels, directional arrows, orphan nodes, node radius, edge thickness |
| Force Simulation | Center gravity, repulsion, link stiffness, link distance, velocity damping |
| Theme | Dark/light mode, customizable node and edge colors |
| Key | Action |
|---|---|
F |
Fit graph to view |
Space |
Re-run animation |
A |
Animate |
/ |
Focus search |
? |
Show shortcuts overlay |
Escape |
Deselect node |
- Node.js 18+
- npm
git clone https://github.com/gaurav7902/graph-visualizer.git
cd graph-visualizer
npm installnpm run devOpens at http://localhost:5173/graph-visualizer/
npm run buildOutputs to dist/ — ready for GitHub Pages, Vercel, Netlify, or Cloudflare Pages.
src/
├── components/ # React UI components (TopBar, SettingsPanel, etc.)
├── graph/ # PixiJS renderer + D3 force simulation
├── state/ # React state management hooks
├── styles/ # CSS tokens and globals
└── main.tsx # App entry point
Graph Lab uses a two-accent color system derived from the graph metaphor itself:
| Token | Color | Use |
|---|---|---|
--node |
#12E0C4 (teal) |
Nodes, primary actions, highlights |
--edge |
#7C5CFC (violet) |
Edges, connections, secondary elements |
This makes the UI legible — teal = things you create, violet = relationships between them.
Automated via GitHub Actions on push to master. Workflow: .github/workflows/deploy.yml
See CONTRIBUTING.md for guidelines.
MIT © Gaurav Patidar