| <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> |
|
|
