TestCharacteristics/TestViz1.html at main · MDMarikar/TestCharacteristics · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Medical Metrics Visualizer</title>
   <link rel="stylesheet" href="style.css">

</head>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-N42X7CRPXB"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-N42X7CRPXB');
</script>
<body>


<!-- Wrapping the header section in a div with class "header" -->
    <div class="header">
        <h3>Test Characteristics</h3>

        <!-- Sliders and Values -->
        <div class="slider-container">
            <label>Prevalence:</label>
            <input type="range" min="1" max="99" value="50" id="prevalenceRange">
            <span id="prevalenceValue">50</span>%
        </div>
        <div class="slider-container">
            <label>Sensitivity:</label>
            <input type="range" min="1" max="100" value="80" id="sensitivityRange">
            <span id="sensitivityValue">80</span>%
        </div>
        <div class="slider-container">
            <label>Specificity:</label>
            <input type="range" min="1" max="100" value="80" id="specificityRange">
            <span id="specificityValue">80</span>%
        </div>
    </div>

  <h3>Population Diagrams</h3>
  <div class="key"><span style="background: red;"></span>True Positives or False Positives</div>
    <div class="key"><span style="background: green;"></span>True Negatives or False Negatives</div>
    <!-- Population Diagrams and PPV, NPV visualizations -->
    <div class="diagram-container">
        <div class="diagram">
            <h3>Sensitivity</h3>
            <canvas id="diseaseCanvas" width="200" height="200"></canvas>
            PPV: <progress id="PPVBar" max="1" value="0"></progress> <span id="PPVValue">0</span>
        </div>
        <div class="diagram">
            <h3>Specificity</h3>
            <canvas id="nonDiseaseCanvas" width="200" height="200"></canvas>
            NPV: <progress id="NPVBar" max="1" value="0"></progress> <span id="NPVValue">0</span>
        </div>
      <!-- Key -->


    </div>

    <!-- ROC Curve Visualization -->
    <h3>ROC</h3>
    <canvas id="ROCCanvas" width="200" height="200"></canvas>

    <!-- Confusion Matrix -->
    <h3>Confusion Matrix</h3>
    <table border="1">
        <tr>
            <td></td>
            <td>Has Disease</td>
            <td>No Disease</td>
            <td>Total</td>
        </tr>
        <tr>
            <td>Test Positive</td>
            <td id="truePositive">4000</td>
            <td id="falsePositive">2000</td>
            <td id="totalPositive">6000</td>
        </tr>
        <tr>
            <td>Test Negative</td>
            <td id="falseNegative">1000</td>
            <td id="trueNegative">3000</td>
            <td id="totalNegative">4000</td>
        </tr>
        <tr>
            <td>Total</td>
            <td id="totalDisease">5000</td>
            <td id="totalNoDisease">5000</td>
            <td>10000</td>
        </tr>
    </table>


      <!-- Metrics Calculation -->
    <h3>Calculations</h3>
    <table id="calculations" border="1">
        <tr>
            <td colspan="2">
                TP = True Positive, FP = False Positive, TN = True Negative, FN = False Negative
            </td>
        </tr>
    </table>

    <br>

    Developed by D Marikar, <a href="https://twitter.com/MDMarikar">Feedback here</a>


    <!-- Your JavaScript code here -->
   <!-- JavaScript code remains the same -->
  <script src="script.js"></script>

</body>
</html>