Event Charts

Event-detail charts consume raw WriteTrackDataSchema from getData(). They work without WASM — no analysis pipeline needed. Import, register once, then pass capture data to the element.

Document Growth <wt-document-growth>

Writing process chart. By default shows net document length (product) over time. Opt-in attributes enable additional series:

• process — cumulative total input activity (cyan) — always rises, gap vs product reveals revision
• cursor — cursor position over time (purple dashed) — jumps reveal navigation
• pauses — orange dots sized by inter-keystroke gap duration (≥ 500 ms by default)
• pause-threshold — minimum gap in ms to show as a pause dot (default 500). Set to 0 to show all pauses.

<!-- Default: product line only -->
<wt-document-growth></wt-document-growth>

<!-- All series enabled -->
<wt-document-growth process cursor pauses></wt-document-growth>

<!-- Show all pauses (no threshold) -->
<wt-document-growth pauses pause-threshold="0"></wt-document-growth>

The threshold is also configurable programmatically via extractProcessData:

import { extractProcessData } from 'writetrack/viz';

// Only show pauses longer than 2 seconds
const { points, pauses } = extractProcessData(tracker.getData(), 2000);

Edit Beeswarm <wt-edit-beeswarm>

Keystroke-level beeswarm showing every keypress as a dot, dodge-stacked over time. Paste and cut events appear as larger prominent dots. Density indicates typing speed; gaps indicate pauses.

Edit Waterfall <wt-edit-waterfall>

Cursor position over time. Diagonal lines show sequential typing; jumps indicate navigation. Cyan dots mark paste events. The Y-axis is reversed so position 0 (start of document) is at the top.

Corrections Bubble <wt-corrections-bubble>

Edit runs visualized as bubbles — green for insertions, red for deletions, cyan for pastes. Size is proportional to log₂(character count). Consecutive same-type actions are grouped into runs.