Skip to content

Commit fa55283

Browse files
rljacobsonrljacobson
committed
Major refactor. Which test protocol the bottom pane refers to is now selectable.
1 parent b8b31a8 commit fa55283

File tree

6 files changed

+378
-116
lines changed

6 files changed

+378
-116
lines changed

‎BayesTesting.html

Lines changed: 34 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323
<a href="https://github.com/rljacobson/BayesTesting/watchers/"><img src="https://camo.githubusercontent.com/c4a95f8295a39056927edc7eec5a9d1b341453be/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f77617463686572732f726c6a61636f62736f6e2f426179657354657374696e672e7376673f7374796c653d736f6369616c266c6162656c3d5761746368266d61784167653d32353932303030" alt="GitHub watchers" data-canonical-src="https://img.shields.io/github/watchers/rljacobson/BayesTesting.svg?style=social&amp;label=Watch&amp;maxAge=2592000" style="max-width:100%;"></a>
2424
<a href="https://github.com/rljacobson?tab=followers"><img src="https://camo.githubusercontent.com/c48b0d33bd59711449b85b7283e2057971c260e7/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f666f6c6c6f776572732f726c6a61636f62736f6e2e7376673f7374796c653d736f6369616c266c6162656c3d466f6c6c6f77266d61784167653d32353932303030" alt="GitHub followers" data-canonical-src="https://img.shields.io/github/followers/rljacobson.svg?style=social&amp;label=Follow&amp;maxAge=2592000" style="max-width:100%;"></a>
2525
</p>
26-
<h1 id="page-heading">Comparison Between Naïve Testing and Sample Pooling for Whole Populations</h1>
26+
<h1 id="page-heading">Comparison Between Individual Testing and Sample Pooling for Whole Populations</h1>
2727

2828

2929
<div id="center_content">
@@ -37,10 +37,6 @@ <h1 id="page-heading">Comparison Between Naïve Testing and Sample Pooling for W
3737
<input type="number" min="100" max="1000000000" step="10"
3838
value="2500" id="people_count_slider"
3939
oninput="sliderUpdate(value, '#people_count_slider')"/>
40-
<!--div id="people_count_label" class="slider-labels">Number of
41-
People:
42-
<div id="people_count" class="slider-labels">2500</div>
43-
</div-->
4440
</div>
4541
<div id="people_dots_group" class="column-item row-container">
4642
<div id="people_dots" class="row-item"></div>
@@ -87,6 +83,15 @@ <h1 id="page-heading">Comparison Between Naïve Testing and Sample Pooling for W
8783
max="0.2" step="any" value="0.05" oninput="sliderUpdate(value,
8884
'#infection_rate')"/>
8985
</div>
86+
87+
<div id="cost_per_test_group" class="column-item slider-labels">
88+
<label for="cost_per_test_slider" id="cost_per_test_label">
89+
Cost Per Test: <span id="cost_per_test"></span>
90+
</label>
91+
<input type="number" min="1" max="200" step="1"
92+
value="100" id="cost_per_test_slider"
93+
oninput="sliderUpdate(value, '#cost_per_test_slider')"/>
94+
</div>
9095
</div>
9196

9297
<div id="naive-testing" class="row-item column-container">
@@ -96,11 +101,11 @@ <h1 id="page-heading">Comparison Between Naïve Testing and Sample Pooling for W
96101
<div class="data-metric-def">
97102
<dl>
98103
<dt>Total Cost</dt>
99-
<dd>at $22 per test</dd>
104+
<dd>at <span id="naive_cost_per_test_out"></span> per test</dd>
100105
</dl>
101106
</div>
102107
<div class="answer-equals">$$=$$</div>
103-
<div id="total_cost" class="answer-value"></div>
108+
<div id="naive_total_cost" class="answer-value"></div>
104109
</div>
105110
<div class="data-metric">
106111
<div class="data-metric-def">
@@ -110,7 +115,7 @@ <h1 id="page-heading">Comparison Between Naïve Testing and Sample Pooling for W
110115
</dl>
111116
</div>
112117
<div class="answer-equals">$$=$$</div>
113-
<div id="tests_used" class="answer-value"></div>
118+
<div id="naive_tests_used" class="answer-value"></div>
114119
</div>
115120
<hr class="row-line">
116121
<div class="data-metric">
@@ -121,7 +126,7 @@ <h1 id="page-heading">Comparison Between Naïve Testing and Sample Pooling for W
121126
</dl>
122127
</div>
123128
<div class="answer-equals">$$=$$</div>
124-
<div id="true_positive_count" class="answer-value"></div>
129+
<div id="naive_true_positive_count" class="answer-value"></div>
125130
</div>
126131
<div class="data-metric">
127132
<div class="data-metric-def">
@@ -131,7 +136,7 @@ <h1 id="page-heading">Comparison Between Naïve Testing and Sample Pooling for W
131136
</dl>
132137
</div>
133138
<div class="answer-equals">$$=$$</div>
134-
<div id="true_negative_count" class="answer-value"></div>
139+
<div id="naive_true_negative_count" class="answer-value"></div>
135140
</div>
136141
<div class="data-metric">
137142
<div class="data-metric-def">
@@ -146,7 +151,7 @@ <h1 id="page-heading">Comparison Between Naïve Testing and Sample Pooling for W
146151
</dl>
147152
</div>
148153
<div class="answer-equals">$$=$$</div>
149-
<div id="false_positive_count" class="answer-value"></div>
154+
<div id="naive_false_positive_count" class="answer-value"></div>
150155
</div>
151156
<div class="data-metric">
152157
<div class="data-metric-def">
@@ -157,7 +162,7 @@ <h1 id="page-heading">Comparison Between Naïve Testing and Sample Pooling for W
157162
</dl>
158163
</div>
159164
<div class="answer-equals">$$=$$</div>
160-
<div id="false_negative_count" class="answer-value"></div>
165+
<div id="naive_false_negative_count" class="answer-value"></div>
161166
</div>
162167

163168
<hr class="row-line">
@@ -182,7 +187,7 @@ <h1 id="page-heading">Comparison Between Naïve Testing and Sample Pooling for W
182187
</dl>
183188
</div>
184189
<div class="answer-equals">$$=$$</div>
185-
<div id="sensitivity" class="answer-value"></div>
190+
<div id="naive_sensitivity" class="answer-value"></div>
186191
</div>
187192
<div class="data-metric">
188193
<div class="data-metric-def">
@@ -202,32 +207,32 @@ <h1 id="page-heading">Comparison Between Naïve Testing and Sample Pooling for W
202207
</dl>
203208
</div>
204209
<div class="answer-equals">$$=$$</div>
205-
<div id="specificity" class="answer-value"></div>
210+
<div id="naive_specificity" class="answer-value"></div>
206211
</div>
207212

208213
<div class="slider-group column-item">
209214
<label class="slider-labels" for="true_positive_rate_slider">
210215
Sensitivity (True Positive Rate): </label>
211-
<output for="true_positive_rate_slider" id="true_positive_rate"
212-
class="slider-labels">41.00%
216+
<output for="true_positive_rate_slider" id="naive_true_positive_rate"
217+
class="slider-labels">85.00%
213218
</output>
214219
<br>
215220
<input type="range"
216221
id="true_positive_rate_slider" class="slider-widget" min="0.0"
217-
max="1.0" step="any" value="0.41" oninput="sliderUpdate(value,
222+
max="1.0" step="any" value="0.85" oninput="sliderUpdate(value,
218223
'#true_positive_rate')"/><br>
219224

220225
<label class="slider-labels" for="true_negative_rate_slider">
221226
Specificity (True Negative Rate):
222227
</label>
223-
<output for="true_negative_rate_slider" id="true_negative_rate"
228+
<output for="true_negative_rate_slider" id="naive_true_negative_rate"
224229
class="slider-labels">
225-
94.00%
230+
100.00%
226231
</output>
227232
<br>
228233
<input type="range"
229234
id="true_negative_rate_slider" class="slider-widget" min="0.30"
230-
max="1.0" step="any" value="0.94"
235+
max="1.0" step="any" value="1.0"
231236
oninput="sliderUpdate(value, '#true_negative_rate')"/><br>
232237
</div>
233238

@@ -240,7 +245,7 @@ <h1 id="page-heading">Comparison Between Naïve Testing and Sample Pooling for W
240245
<div class="data-metric-def">
241246
<dl>
242247
<dt>Total Cost</dt>
243-
<dd>at $22 per test</dd>
248+
<dd>at <span id="pooling_cost_per_test_out"></span> per test</dd>
244249
</dl>
245250
</div>
246251
<div class="answer-equals">$$=$$</div>
@@ -355,12 +360,14 @@ <h1 id="page-heading">Comparison Between Naïve Testing and Sample Pooling for W
355360
<hr id="pane-separator">
356361

357362
<div id="bottom_pane" class="">
358-
<!-- Tab 1 -->
359-
<input type="radio" name="tabset" id="naive-tab" aria-controls="Individual Testing" checked>
360-
<label for="naive-tab">Individual Testing</label>
361-
<!-- Tab 2 -->
362-
<input type="radio" name="tabset" id="pooling-tab" aria-controls="Sample Pooling">
363-
<label for="pooling-tab">Sample Pooling</label>
363+
<div class="tabset">
364+
<!-- Tab 1 -->
365+
<input type="radio" name="tabset" id="naive-tab" aria-controls="Individual Testing" value="naive" checked>
366+
<label for="naive-tab">Individual Testing</label>
367+
<!-- Tab 2 -->
368+
<input type="radio" name="tabset" id="pooling-tab" aria-controls="Sample Pooling" value="sample_pooling">
369+
<label for="pooling-tab">Sample Pooling</label>
370+
</div>
364371

365372
<div class="data-metric">
366373
<div class="data-metric-def">

‎README.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,3 +9,7 @@
99
This demo compares individual testing with sample pooling for COVID-19. See it live here:
1010

1111
https://www.robertjacobson.dev/BayesTesting/BayesTesting.html
12+
13+
It is possible to set default values with parameters in the URL:
14+
15+
https://www.robertjacobson.dev/BayesTesting/BayesTesting.html?specificity=0.99&infection_rate=0.01&people_count=1500&pool_size=25

‎bayestesting.css

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,14 +34,31 @@ body {
3434
align-items: flex-start;
3535
}
3636

37+
#top_pane{
38+
z-index: 10;
39+
position: relative;
40+
background-color: white;
41+
/*display: flex;*/
42+
/*flex-flow: row wrap;*/
43+
/*justify-content: space-around;*/
44+
/*align-items: flex-start;*/
45+
}
46+
3747
#bottom_pane{
48+
z-index: 0;
49+
position: relative;
3850
display: flex;
3951
flex-flow: row wrap;
4052
justify-content: space-around;
4153
align-items: flex-start;
4254
}
4355

4456
#pane-separator {
57+
z-index: 10;
58+
position: relative;
59+
/*background-color: white;*/
60+
margin-top: 0;
61+
/*margin-bottom: 0;*/
4562
height: 12px;
4663
border: 0;
4764
box-shadow: inset 0 12px 12px -12px rgba(0, 0, 0, 0.5);

0 commit comments

Comments
 (0)