Network Graph Explorer
Nodes and edges that settle into shape, then let you pull them around.
AdvancedWeb appData viz14–28hAI-buildable 3/5no setup
A force-directed graph with draggable nodes, zoom and pan, and neighbour highlighting on hover. The simulation is satisfying to watch and genuinely tricky to keep stable — badly tuned forces produce a graph that never settles or flings itself off screen.
UI
Logic
Useful
Hosting · Free forever
Deploys free on GitHub Pages, Cloudflare Pages or Vercel Hobby.
Deploy it and share a link.
Core features · 7
- Nodes and edges lay out via a force simulation
- Nodes can be dragged and pinned in place
- Zoom and pan across the whole graph
- Hovering a node highlights it and its direct neighbours
- Node size encodes a data value such as degree
- The simulation cools and settles rather than jittering forever
- A search finds and focuses a node by name
The interesting part
- Tuning forces so the layout settles and stays on screen
- Combining drag with zoom and pan transforms correctly
- Performance once the edge count climbs
Once it works
- Add clustering by node attribute
- Add a detail panel for the selected node
- Handle a thousand nodes without dropping frames
Suggested stack
reacttypescripttailwindd3-force