TestCharacteristics/TestViz2.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
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
<!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="TestViz2style.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">


    <div class="controls-wrapper">
        <!-- Sliders -->
      <div class="slider-wrapper">
            <!-- 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 class="checkbox-container">
          <label for="relativePopulationSize">Show relative population size:</label>
          <input type="checkbox" id="relativePopulationSize" />
      </div>
     </div>
        <!-- Key -->

        <div class="key-wrapper">
           <!-- Population Key -->
        <div class="key"><span style="background: red;"></span>True+ve (sensitivity)</div>
        <div class="key"><span style="background: green;"></span>True-ve (specificity)</div>
        <div class="key"><span style="background: yellow;"></span>False+ve</div>
        <div class="key"><span style="background: pink;"></span>False-ve</div>
        </div>

    </div>

</div>


<div class="diagram-container">
    <div class="diagram">
        <h4>Sensitivity</h4>
        <canvas id="diseaseCanvas" width="200" height="200"></canvas>
        <div class="metrics-box">
            PPV <progress id="PPVBar" max="1" value="0"></progress> <span id="PPVValue">0</span>
        </div>
    </div>
    <div class="diagram">
        <h4>Specificity</h4>
        <canvas id="nonDiseaseCanvas" width="200" height="200"></canvas>
        <div class="metrics-box">
            NPV <progress id="NPVBar" max="1" value="0"></progress> <span id="NPVValue">0</span>
        </div>
    </div>
    <div class="roc">
        <h4>ROC</h4>
        <canvas id="ROCCanvas" width="200" height="200"></canvas>
    </div>
</div>


    <!-- Confusion Matrix -->
    <h4>Confusion Matrix</h4>
    <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 -->
    <h4>Calculations</h4>
    <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="TestViz2Script.js"></script>

</body>
</html>