Skip to content

Analysis Charts

Analysis charts consume a SessionAnalysis object from getAnalysis(). They require the WASM analysis pipeline.

Usage

Section titled “Usage”

All analysis charts follow the same pattern — import, register once, then pass analysis data:

import { SpeedTimeline } from 'writetrack/viz';


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


const analysis = await tracker.getAnalysis();
document.querySelector('wt-speed-timeline').setData(analysis);

Speed Timeline <wt-speed-timeline>

Section titled “Speed Timeline <wt-speed-timeline>”

Line + area chart showing typing speed (CPM) over time from temporalPatterns.metrics.speedTimeline. Recommended size: width: 100%; height: 200px.

Rhythm Heatmap <wt-rhythm-heatmap>

Section titled “Rhythm Heatmap <wt-rhythm-heatmap>”

2D binned heatmap of dwell time vs flight time from timingAuthenticity.metrics.timingOverTime. Reveals typing style clusters — touch typists show a tight cluster; hunt-and-peck typists show scattered points. Recommended size: 350px × 350px.

Pause Distribution <wt-pause-distribution>

Section titled “Pause Distribution <wt-pause-distribution>”

Histogram of pause durations from temporalPatterns.metrics.pauseDistribution. Uses pre-binned data from the analysis pipeline. Recommended size: width: 100%; height: 200px.