Visualization
Two libraries for rendering network traffic — one in 3D space, one on a 2D canvas. Both are standalone Vue 3 packages consumed via npm install.
QMap
@qpoint-io/qmap · Vue 3 · Three.js
3D network visualization. Renders actors, data flows, and boundary crossings in an explorable isometric scene.
QFlow
@qpoint-io/qflow · Vue 3 · PixiJS 8
2D traffic flow visualization. Renders audit log data as animated pulses between source and destination nodes on an HTML5 canvas.
When to use which
QMap — spatial relationships
Use when the question is "what's talking to what, and what boundaries does that traffic cross?" Best for showing actors, zones, and the topology between them. Static or slow-updating scenes.
QFlow — temporal traffic
Use when the question is "what traffic is flowing right now?" Best for animated audit log playback — sources on the left, destinations on the right, pulses between them.
Architecture
Both libraries follow the same three-layer pattern:
Layer 3
Vue Component
QMap / TrafficViz
Layer 2
Composable
useQMap / useTrafficViz
Layer 1
Core Engine
SceneManager / PixiStage