Last active
August 16, 2025 11:52
-
-
Save leonmak/13e6cf14b4b3cfa47f8273e62ad69dda to your computer and use it in GitHub Desktop.
Confusion Matrix - small explainer
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>Confusion Matrix Visualization</title> | |
| <style> | |
| body { | |
| font-family: Arial, sans-serif; | |
| padding: 20px; | |
| } | |
| canvas { | |
| border: 1px solid #ccc; | |
| display: block; | |
| margin-top: 20px; | |
| } | |
| .slider-container { | |
| margin: 10px 0; | |
| } | |
| label { | |
| display: block; | |
| margin-bottom: 5px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h2>Confusion Matrix Visualization</h2> | |
| <p> | |
| Model outputs: Positive / Negative | |
| <br /> | |
| Reality is True / False | |
| </p> | |
| <p> | |
| <strong>Legend:</strong> T = Positive prediction, F = Negative | |
| prediction<br /> | |
| <strong>Colors:</strong> Black = Correct prediction, Red = Incorrect | |
| prediction | |
| </p> | |
| <div class="slider-container"> | |
| <label | |
| >True Positives (TP): <span id="tpVal">50</span> | |
| <input type="range" min="0" max="100" value="50" id="tpSlider" /> | |
| </label> | |
| </div> | |
| <div class="slider-container"> | |
| <label | |
| >False Positives (FP): <span id="fpVal">10</span> | |
| <input type="range" min="0" max="100" value="10" id="fpSlider" /> | |
| </label> | |
| </div> | |
| <div class="slider-container"> | |
| <label | |
| >False Negatives (FN): <span id="fnVal">30</span> | |
| <input type="range" min="0" max="100" value="30" id="fnSlider" /> | |
| </label> | |
| </div> | |
| <div class="slider-container"> | |
| <label | |
| >True Negatives (TN): <span id="tnVal">100</span> | |
| <input type="range" min="0" max="200" value="100" id="tnSlider" /> | |
| </label> | |
| </div> | |
| <div> | |
| <b>Precision:</b> <span id="precision">0.83</span> | <b>Recall:</b> | |
| <span id="recall">0.62</span> | <b>F1 Score:</b> | |
| <span id="f1">0.71</span> | <b>Accuracy:</b> | |
| <span id="accuracy">0.83</span> | |
| </div> | |
| <canvas id="confMatrix" width="400" height="400"></canvas> | |
| <p>Loans → False Positives matter (financial loss risk).</p> | |
| <p> | |
| Fraud / Cancer Screening → False Negatives matter (missed diagnosis, health risk, FP retryable / reversible). | |
| </p> | |
| <p>F1 is helpful when you have extreme class imbalance in your data and both a false positive and false negative error is similar in cost.</p> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment