Model Evaluation Plots

Introduction

CanvasXpress turns the raw outputs of a trained classifier — truth labels, scores, predictions, importances or SHAP values — into render-ready charts. The builders compute the statistics (AUC, average precision, ECE, confusion counts) in the engine itself and return a plain {data, config} spec, so the same figure renders from JavaScript, R (cx_roc, cx_pr, cx_confusion, cx_calibration, cx_learning_curve, cx_importance, cx_shap) and Python. Each static runs before any chart exists — the same standalone pattern as recommend().

ROC & Precision-Recall

CanvasXpress.rocConfig(yTrue, yScore) sweeps the thresholds, computes the trapezoidal AUC and draws the ROC curve with the chance diagonal. prConfig does the precision-recall curve with the average precision and the no-skill baseline. evalPlots returns ROC + PR + confusion in one call.

var b = CanvasXpress.evalPlots(yTrue, yScore, { positive: 1 });
new CanvasXpress("cxRoc", b.roc.data, b.roc.config);   // AUC in the title
new CanvasXpress("cxPr",  b.pr.data,  b.pr.config);    // AP in the title

Confusion Matrix

CanvasXpress.confusionConfig(yTrue, yPred) counts every (actual, predicted) pair over the sorted union of labels and emits a Heatmap with the count printed in each cell.

var cm = CanvasXpress.confusionConfig(yTrue, yPred, { title: "Confusion matrix" });
new CanvasXpress("cxCm", cm.data, cm.config);

Calibration Curve

CanvasXpress.calibrationConfig(yTrue, yProb) bins the predicted probabilities, plots observed frequency against mean predicted probability, draws the perfect-calibration diagonal and reports the expected calibration error (ECE).

var cal = CanvasXpress.calibrationConfig(yTrue, yProb, { bins: 10 });
new CanvasXpress("cxCal", cal.data, cal.config);

Learning Curve

CanvasXpress.learningCurveConfig(sizes, train, val) draws training and validation score as two lines over the training-set size.

var lc = CanvasXpress.learningCurveConfig(sizes, trainScores, valScores);
new CanvasXpress("cxLc", lc.data, lc.config);

Feature Importance & SHAP

CanvasXpress.importanceConfig(features, importances) draws a sorted horizontal bar chart (cap it with {top: N}). shapConfig(shap, values, featureNames) builds a SHAP summary beeswarm: a jittered dotplot grouped by feature, points positioned by SHAP value and coloured by the underlying feature value.

var imp = CanvasXpress.importanceConfig(features, importances, { top: 10 });
new CanvasXpress("cxImp", imp.data, imp.config);

var sh = CanvasXpress.shapConfig(shapMatrix, featureValues, featureNames);
new CanvasXpress("cxShap", sh.data, sh.config);

Where Teams Use These

Framed as who, in what moment, does what — grounded in the builders above and the engine capabilities they ride on.

Across Languages

Every builder has an instance form (cx.rocConfig(...)) and matching R and Python wrappers that take a data frame and column names, so scientists get the same charts in their own language.