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>

<!-- True linear time axis (disable gap compression) -->
<wt-document-growth maxgap="0"></wt-document-growth>

Long silences compress on the x-axis by default (maxgap="auto") and render as shaded break bands labelled with the true pause duration — the same treatment as the edit beeswarm. Growth lines split at each collapsed gap; change points and pause dots map through the same warp. Set maxgap to a number of seconds to pin the compression threshold, or 0 for a linear axis.

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 by type) and whose colour identifies insert, delete, paste, or cut events. Dot packing adapts to the chart dimensions in full and compact modes.

Attributes:

• keystrokes — opt out of binning and show every keypress as its own dot
• quantize — x-axis grid (seconds) for the keystrokes render, default 0.1. Snapping nearby events to stable columns makes the shape of a burst easier to read; it does not impose a hard height bound, so events in the same slot still stack. Set quantize="0" to plot exact times.
• maxgap — gap-compression threshold (seconds) for the keystrokes render. Pauses longer than the threshold are square-root compressed and drawn as shaded break bands labelled with their true duration. Default auto scales the threshold with session length (~span/20, clamped 1–60s); set a number to pin it, or maxgap="0" for a linear time axis.
• 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.