Graph Canvas
The graph canvas renders your engagement correlation data as an interactive network visualization.
2D Mode (Default)
The 2D canvas uses Sigma.js with WebGL rendering. Nodes are positioned using the ForceAtlas2 algorithm, which runs in a web worker for smooth performance even with thousands of nodes.
Controls
| Action | Input |
|---|---|
| Pan | Click and drag background |
| Zoom | Scroll wheel or pinch gesture |
| Select node | Click a node |
| Deselect | Click the background |
| Reset view | Target icon in graph controls |
| Search | Cmd+K / Ctrl+K |
3D Mode (Coming Soon)
The 3D view will render the same graph data in a three-dimensional space using Three.js with orbit controls: click and drag to rotate, scroll to zoom, right-click to pan. Toggle via the dimension button in the graph controls.
Graph Density
The canvas renders all node types including Touchpoints, which typically make up ~80% of nodes. This creates the characteristic dense cluster that reveals engagement patterns. Use Filters to focus on specific node types.