demo D268

ROC curve in ESM

See how well a score separates two outcomes, the curve bowing away from a coin toss

type: 'roc', score, label, positive

This draws an ROC curve showing how well a score separates two outcomes, the curve bowing away from a coin-toss line. It shows a classifier's quality at a glance, so how much better than chance it does reads as the bow of the curve.

Building…

Loading a live grid…

This is the ES module version. The grid is imported straight from a CDN as a module, the same configuration as the vanilla tab without a global script tag, so it drops into any bundler or a bare module script.

The configuration

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.71.0/lattice-grid.min.css">

<div id="grid" style="height: 320px"></div>
<div id="chart" style="height: 340px"></div>

<script type="module">
  import { createChart } from '@toclocoinc/lattice-grid/modules/charts';
  import '@toclocoinc/lattice-grid/modules/chart-roc';  // opt in to the roc type

  const grid = createGrid(document.getElementById('grid'), {
    rowKey: 'id',
    columns: [
      { field: 'score', title: 'Score', type: 'number', format: { decimals: 3 } },
      { field: 'fraud', title: 'Actually fraud', type: 'number', filter: { type: 'set' } },
    ],
    rows,  // one row a case: score, fraud (1 for positive, 0 otherwise)
  });

  // score is the classifier output, label the true outcome, positive its value.
  // The curve bows toward the top left as the score sorts better.
  createChart({
    grid,
    container: document.getElementById('chart'),
    type: 'roc',
    score: 'score',
    label: 'fraud',
    positive: 1,
    title: 'How well the score separates fraud',
  });
</script>