{
const plt = Plot.plot({
width: 600,
height: 600,
grid: true,
aspectRatio: 1.0,
x: { nice: true, axis: "top" },
y: { nice: true, reverse: true },
color: { legend: true, domain: [0, 1], scheme: "Inferno" },
marks: [
Plot.frame(),
Plot.contour(data, {
x: "pr",
y: "nr",
fill: select,
opacity: 1.0
}),
Plot.dot(data, {
x: "pr",
y: "nr",
fill: select,
tip: true,
opacity: 0.5
}),
segments > 20
? undefined
: Plot.text(data, {
x: "pr",
y: "nr",
text: (d) => d[select].toFixed(2),
fill: "white",
fontSize: 10
})
]
});
img.width = 450;
img.height = 450;
return htl.html`
<div style="display: flex; align-items: center">
${plt}
<div>
<h2>${select}</h2>
${img}
</div>
</div>
`;
}
img.width
data = mkData(numPositive, numNegative, segments)
data
Type Table, then Shift-Enter. Ctrl-space for more options.
exampleData = mkData(10, 10, 20)
mkData = (p, n, s) => {
const data = [],
pr = linspace(0.01, 0.99, s), //d3.range(0.01, 1, 0.1),
nr = linspace(0.01, 0.99, s); //d3.range(0.01, 1, 0.1);
pr.map((pr) => {
nr.map((nr) => {
const tp = pr * p,
fn = p - tp,
tn = nr * n,
fp = n - tn,
pp = tp + fp,
pn = fn + tn;
data.push({ p, n, pr, nr, tp, fn, fp, tn, pp, pn });
});
});
methods.map((method) => data.map(method));
return data;
}
linspace(0.01, 0.99, 50)
linspace = (start, stop, num) => {
const step = (stop - start) / num;
return d3.range(start, stop + step, step).filter((d) => d <= 1.0);
}
/**
* Make sure the methods are operated in-order
* The methods are described in https://en.wikipedia.org/wiki/Confusion_matrix
*/
methods = [
prevalence,
accuracy,
truePositiveRate,
falseNegativeRate,
falsePositiveRate,
trueNegativeRate,
informedness,
prevalenceThreshold,
balancedAccuracy,
positivePredictiveValue,
falseDiscoveryRate,
f1Score,
falseOmissionRate,
negativePredictiveValue,
fowlkesMallowsIndex,
positiveLikelihoodRatio,
negativeLikelihoodRatio,
markedness,
diagnosticOddsRatio,
matthewsCorrelationCoefficient,
criticalSuccessIndex
]
diagnosticOddsRatio = (obj) => {
const {lrp, lrn} = obj,
dor =lrp / lrn;
Object.assign(obj, {dor})
}
matthewsCorrelationCoefficient = (obj) => {
const {tpr, tnr, ppv, npv, fnr, fpr, for:_for, fdr} = obj,
mcc=Math.sqrt(tpr*tnr*ppv*npv) - Math.sqrt(fnr*fpr*_for*fdr);
Object.assign(obj, {mcc})
}
criticalSuccessIndex = (obj) => {
const { tp, fn, fp } = obj,
csi = tp / (tp + fn + fp);
Object.assign(obj, { csi });
}
markedness = (obj) => {
const { ppv, npv } = obj,
mk = ppv + npv - 1;
Object.assign(obj, { mk });
}
positiveLikelihoodRatio = (obj) => {
const {tpr, fpr} = obj,
lrp = tpr / fpr;
Object.assign(obj, {lrp})
}
negativeLikelihoodRatio = (obj) => {
const { fnr, tnr } = obj,
lrn = fnr / tnr;
Object.assign(obj, { lrn });
}
fowlkesMallowsIndex = (obj) => {
const { ppv, tpr } = obj,
fm = Math.sqrt(ppv * tpr);
Object.assign(obj, { fm });
}
falseOmissionRate = (obj) => {
const { fn, pn } = obj,
_for = fn / pn;
Object.assign(obj, { for: _for });
}
negativePredictiveValue = (obj) => {
const { tn, pn } = obj,
npv = tn / pn;
Object.assign(obj, { npv });
}
f1Score = (obj) => {
const { tp, fp, fn } = obj,
f1 = (2 * tp) / (2 * tp + fp + fn);
Object.assign(obj, { f1 });
}
falseDiscoveryRate = (obj) => {
const { fp, tp } = obj,
fdr = fp / (fp + tp);
Object.assign(obj, { fdr });
}
positivePredictiveValue = (obj) => {
const { tp, fp } = obj,
ppv = tp / (tp + fp);
Object.assign(obj, { ppv });
}
balancedAccuracy = (obj) => {
const { tpr, tnr } = obj,
ba = (tpr + tnr) / 2;
Object.assign(obj, { ba });
}
prevalenceThreshold = (obj) => {
const { tpr, fpr } = obj,
pt = (Math.sqrt(tpr * fpr) - fpr) / (tpr - fpr);
Object.assign(obj, { pt });
}
informedness = (obj) => {
const { tpr, tnr } = obj,
bm = tpr + tnr - 1;
Object.assign(obj, { bm });
}
trueNegativeRate = (obj) => {
const { tn, fp } = obj,
tnr = tn / (tn + fp);
Object.assign(obj, { tnr });
}
falsePositiveRate = (obj) => {
const { n, fp } = obj,
fpr = fp / n;
Object.assign(obj, { fpr });
}
falseNegativeRate = (obj) => {
const {p, fn} =obj,
fnr = fn / p;
Object.assign(obj, {fnr})
}
truePositiveRate = (obj) => {
const { p, tp } = obj,
tpr = tp / p;
Object.assign(obj, { tpr });
}
accuracy = (obj) => {
const { p, n, tp, tn } = obj,
accuracy = (tp + tn) / (p + n);
Object.assign(obj, { accuracy });
}
prevalence = (obj) => {
const {p, n } = obj,
prevalence = p / (p + n);
Object.assign(obj, { prevalence });
}
d3 = require("d3")
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
