Event-Detail Charts

Event-detail charts consume raw WriteTrackDataSchema from getData(). They work without WASM — no analysis pipeline needed.

Usage

All event-detail charts follow the same pattern — import, register once, then pass capture data:

import { Sparkline } from 'writetrack/viz';

Sparkline.register(); // call once per component

document.querySelector('wt-sparkline').setData(tracker.getData());

Sparkline <wt-sparkline>

Compact speed chart with no axes or labels — designed for inline use. Recommended size: 200px × 40px.

You can also create a Sparkline programmatically without a pre-existing element:

const sparkline = Sparkline.create(containerElement, tracker.getData());

Document Growth <wt-document-growth>

Cumulative character count over time. The slope shows typing speed; vertical jumps indicate paste events, labeled with the character count pasted. Recommended size: width: 100%; height: 200px.

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. Recommended size: width: 100%; height: 160px.

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. Recommended size: width: 100%; height: 200px.

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. Recommended size: width: 100%; height: 80px.