Visualization

Standalone Vue 3 visualization packages plus exploratory in-app prototypes for explaining runtime evidence, traffic shape, and interaction models. Some are published libraries; some are active design-cycle surfaces.

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.

Qpixel

@qpoint-io/qpixel · Vue 3

ASCII block art editor. Paint with Unicode block characters and 24-bit ANSI colors, export as .txt, SVG, or PNG.

Signal Column Flow

Vue 3 + SVG hybrid · design prototype

Column-based provenance surface for moving from raw evidence to reduced entities, actions, and inferred outcomes.

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.

Signal Column Flow — evidence to explanation

Use when the question is "how did these raw traces turn into the cleaner action summary I am reading?" Best for provenance ladders, reduction explainers, and trust surfaces around qcontrol-style session output.

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