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.
• curve — line interpolation: step (default) or monotone for smoothed product/process/cursor lines
• frameless — hide axes and legend at full point density (see Presentation Attributes)

<!-- 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>

An edit-flow swarm: edits are binned over active time into dots whose size is the volume of editing (keystrokes or pasted characters, weighted per type so corrections read clearly) and whose colour is the kind — insert, delete, paste, or cut. The swarm packs itself to fill the chart exactly, reacting to both width and height without clipping or overlap, at full and compact sizes.

Attributes:

• keystrokes — opt out of binning and show every keypress as its own dot
• frameless — hide axes and legend at full point density (see Presentation Attributes)

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. Supports the frameless attribute.