app/src/content/embeds/d3-binary-metrics.html

<div class="d3-binary-metrics"></div>

<style>
  .d3-binary-metrics {
    font-family: var(--default-font-family);
    background: transparent;
    border: none;
    border-radius: 0;
    padding: var(--spacing-4) 0;
    width: 100%;
    margin: 0 auto;
  }

  .d3-binary-metrics .metrics-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
  }

  .d3-binary-metrics .confusion-matrix {
    display: grid;
    grid-template-columns: 100px 1fr 1fr;
    grid-template-rows: 100px 1fr 1fr;
    gap: 2px;
    max-width: 400px;
    margin: 0 auto;
  }

  .d3-binary-metrics .matrix-label {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-color);
  }

  .d3-binary-metrics .matrix-header-row {
    grid-column: 1;
    grid-row: 1;
  }

  .d3-binary-metrics .matrix-header-col {
    grid-row: 1;
    grid-column: 1;
  }

  .d3-binary-metrics .predicted-label {
    grid-column: 2 / 4;
    grid-row: 1;
    font-size: 13px;
    font-weight: 700;
    color: var(--primary-color);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  .d3-binary-metrics .actual-label {
    grid-column: 1;
    grid-row: 2 / 4;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 13px;
    font-weight: 700;
    color: var(--primary-color);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  .d3-binary-metrics .matrix-pos-label {
    grid-column: 2;
    grid-row: 1;
    font-size: 12px;
    padding-bottom: 10px;
  }

  .d3-binary-metrics .matrix-neg-label {
    grid-column: 3;
    grid-row: 1;
    font-size: 12px;
    padding-bottom: 10px;
  }

  .d3-binary-metrics .matrix-pos-label-row {
    grid-column: 1;
    grid-row: 2;
    font-size: 12px;
    padding-right: 10px;
  }

  .d3-binary-metrics .matrix-neg-label-row {
    grid-column: 1;
    grid-row: 3;
    font-size: 12px;
    padding-right: 10px;
  }

  .d3-binary-metrics .matrix-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-3);
    border-radius: 8px;
    min-height: 100px;
    border: 2px solid;
    transition: all 0.3s ease;
  }

  .d3-binary-metrics .matrix-cell:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }

  .d3-binary-metrics .cell-tp {
    grid-column: 2;
    grid-row: 2;
    background: oklch(from var(--primary-color) calc(l + 0.35) calc(c * 0.8) h / 0.3);
    border-color: oklch(from var(--primary-color) calc(l + 0.1) c h / 0.7);
  }

  .d3-binary-metrics .cell-fp {
    grid-column: 3;
    grid-row: 2;
    background: oklch(from #ff6b6b calc(l + 0.35) c h / 0.25);
    border-color: oklch(from #ff6b6b calc(l + 0.1) c h / 0.6);
  }

  .d3-binary-metrics .cell-fn {
    grid-column: 2;
    grid-row: 3;
    background: oklch(from #ffa500 calc(l + 0.35) c h / 0.25);
    border-color: oklch(from #ffa500 calc(l + 0.1) c h / 0.6);
  }

  .d3-binary-metrics .cell-tn {
    grid-column: 3;
    grid-row: 3;
    background: oklch(from var(--primary-color) calc(l + 0.35) calc(c * 0.8) h / 0.3);
    border-color: oklch(from var(--primary-color) calc(l + 0.1) c h / 0.7);
  }

  [data-theme="dark"] .d3-binary-metrics .cell-tp,
  [data-theme="dark"] .d3-binary-metrics .cell-tn {
    background: oklch(from var(--primary-color) calc(l + 0.25) calc(c * 0.8) h / 0.25);
    border-color: oklch(from var(--primary-color) calc(l + 0.05) c h / 0.75);
  }

  [data-theme="dark"] .d3-binary-metrics .cell-fp {
    background: oklch(from #ff6b6b calc(l + 0.25) c h / 0.2);
    border-color: oklch(from #ff6b6b calc(l + 0.05) c h / 0.65);
  }

  [data-theme="dark"] .d3-binary-metrics .cell-fn {
    background: oklch(from #ffa500 calc(l + 0.25) c h / 0.2);
    border-color: oklch(from #ffa500 calc(l + 0.05) c h / 0.65);
  }

  .d3-binary-metrics .cell-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-color);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--spacing-1);
  }

  .d3-binary-metrics .cell-value {
    font-size: 32px;
    font-weight: 700;
    color: var(--text-color);
  }

  .d3-binary-metrics .cell-description {
    font-size: 10px;
    color: var(--muted-color);
    text-align: center;
    margin-top: var(--spacing-1);
  }

  .d3-binary-metrics .metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-3);
    margin-top: var(--spacing-4);
  }

  .d3-binary-metrics .metric-card {
    background: oklch(from var(--primary-color) calc(l + 0.42) c h / 0.25);
    border: 1px solid oklch(from var(--primary-color) calc(l + 0.2) c h / 0.5);
    border-radius: 12px;
    padding: var(--spacing-4);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
  }

  [data-theme="dark"] .d3-binary-metrics .metric-card {
    background: oklch(from var(--primary-color) calc(l + 0.32) c h / 0.2);
    border-color: oklch(from var(--primary-color) calc(l + 0.15) c h / 0.55);
  }

  .d3-binary-metrics .metric-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--primary-color);
  }

  [data-theme="dark"] .d3-binary-metrics .metric-name {
    color: oklch(from var(--primary-color) calc(l + 0.05) calc(c * 1.1) h);
  }

  .d3-binary-metrics .metric-formula {
    font-size: 13px;
    color: var(--text-color);
    font-family: monospace;
    background: var(--surface-bg);
    padding: var(--spacing-2);
    border-radius: 6px;
    border: 1px solid var(--border-color);
  }

  .d3-binary-metrics .metric-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--primary-color);
    text-align: center;
  }

  .d3-binary-metrics .metric-interpretation {
    font-size: 12px;
    color: var(--muted-color);
    line-height: 1.4;
  }

  .d3-binary-metrics .example-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--primary-color);
    text-align: center;
    margin-bottom: var(--spacing-3);
  }

  .d3-binary-metrics .example-description {
    font-size: 13px;
    color: var(--text-color);
    text-align: center;
    font-style: italic;
    margin-bottom: var(--spacing-4);
  }

  @media (max-width: 768px) {
    .d3-binary-metrics .confusion-matrix {
      max-width: 100%;
      grid-template-columns: 80px 1fr 1fr;
      grid-template-rows: 80px 1fr 1fr;
    }

    .d3-binary-metrics .matrix-cell {
      min-height: 80px;
      padding: var(--spacing-2);
    }

    .d3-binary-metrics .cell-value {
      font-size: 24px;
    }

    .d3-binary-metrics .metrics-grid {
      grid-template-columns: 1fr;
    }
  }
</style>

<script>
  (() => {
    const bootstrap = () => {
      const scriptEl = document.currentScript;
      let container = scriptEl ? scriptEl.previousElementSibling : null;
      if (!(container && container.classList && container.classList.contains('d3-binary-metrics'))) {
        const candidates = Array.from(document.querySelectorAll('.d3-binary-metrics'))
          .filter((el) => !(el.dataset && el.dataset.mounted === 'true'));
        container = candidates[candidates.length - 1] || null;
      }

      if (!container) return;

      if (container.dataset) {
        if (container.dataset.mounted === 'true') return;
        container.dataset.mounted = 'true';
      }

      // Example: Question answering - checking if answer is correct
      const TP = 45;  // Correctly identified as correct answer
      const FP = 8;   // Incorrect answer marked as correct
      const FN = 5;   // Correct answer marked as incorrect
      const TN = 42;  // Correctly identified as incorrect answer

      // Calculate metrics
      const precision = TP / (TP + FP);
      const recall = TP / (TP + FN);
      const f1 = 2 * (precision * recall) / (precision + recall);

      // MCC calculation
      const numerator = (TP * TN) - (FP * FN);
      const denominator = Math.sqrt((TP + FP) * (TP + FN) * (TN + FP) * (TN + FN));
      const mcc = numerator / denominator;

      container.innerHTML = `
        <div class="metrics-container">
          <div class="example-title">Binary Classification Metrics Example</div>
          <div class="example-description">
            Question Answering: 100 model predictions evaluated (50 correct, 50 incorrect)
          </div>

          <div class="confusion-matrix">
            <div class="matrix-label predicted-label">Predicted</div>
            <div class="matrix-label actual-label">Actual</div>

            <div class="matrix-label matrix-pos-label">Correct</div>
            <div class="matrix-label matrix-neg-label">Incorrect</div>
            <div class="matrix-label matrix-pos-label-row">Correct</div>
            <div class="matrix-label matrix-neg-label-row">Incorrect</div>

            <div class="matrix-cell cell-tp">
              <div class="cell-label">True Positive</div>
              <div class="cell-value">${TP}</div>
              <div class="cell-description">Correct answer identified as correct</div>
            </div>

            <div class="matrix-cell cell-fp">
              <div class="cell-label">False Positive</div>
              <div class="cell-value">${FP}</div>
              <div class="cell-description">Incorrect answer marked as correct</div>
            </div>

            <div class="matrix-cell cell-fn">
              <div class="cell-label">False Negative</div>
              <div class="cell-value">${FN}</div>
              <div class="cell-description">Correct answer marked as incorrect</div>
            </div>

            <div class="matrix-cell cell-tn">
              <div class="cell-label">True Negative</div>
              <div class="cell-value">${TN}</div>
              <div class="cell-description">Incorrect answer identified as incorrect</div>
            </div>
          </div>

          <div class="metrics-grid">
            <div class="metric-card">
              <div class="metric-name">Precision</div>
              <div class="metric-formula">TP / (TP + FP)</div>
              <div class="metric-value">${precision.toFixed(3)}</div>
              <div class="metric-interpretation">
                ${(precision * 100).toFixed(1)}% of answers marked correct are actually correct.
                Critical when false positives (wrong answers accepted) are costly.
              </div>
            </div>

            <div class="metric-card">
              <div class="metric-name">Recall</div>
              <div class="metric-formula">TP / (TP + FN)</div>
              <div class="metric-value">${recall.toFixed(3)}</div>
              <div class="metric-interpretation">
                ${(recall * 100).toFixed(1)}% of actually correct answers were identified.
                Critical when missing positives (rejecting correct answers) is costly.
              </div>
            </div>

            <div class="metric-card">
              <div class="metric-name">F1 Score</div>
              <div class="metric-formula">2 × (P × R) / (P + R)</div>
              <div class="metric-value">${f1.toFixed(3)}</div>
              <div class="metric-interpretation">
                Harmonic mean of precision and recall.
                Balances both metrics, good for imbalanced data.
              </div>
            </div>

            <div class="metric-card">
              <div class="metric-name">MCC</div>
              <div class="metric-formula">(TP×TN - FP×FN) / √((TP+FP)(TP+FN)(TN+FP)(TN+FN))</div>
              <div class="metric-value">${mcc.toFixed(3)}</div>
              <div class="metric-interpretation">
                Matthews Correlation Coefficient ranges from -1 to +1.
                Works well with imbalanced datasets.
              </div>
            </div>
          </div>
        </div>
      `;
    };

    if (document.readyState === 'loading') {
      document.addEventListener('DOMContentLoaded', bootstrap, { once: true });
    } else {
      bootstrap();
    }
  })();
</script>