OptimalScanTimeCalculator/index.html at main · ThomasYeoLab/OptimalScanTimeCalculator · 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
145
146
147
148
149
150
<!DOCTYPE html>
<html lang="en">

<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ooi2025 Optimal Scan Time Calculator</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Barlow&display=swap">
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <!-- Menu -->
    <div class="menu-bar">
        <ul>
            <li><a onclick="jumpToSection('about')">About</a></li>
            <li><a onclick="jumpToSection('budgetcalc')">Budget and Scan Billing Calculator</a></li>
            <li><a onclick="jumpToSection('formula')">Formula</a></li>
            <!--
            <li><a onclick="jumpToSection('acccalc')">Accuracy Calculator</a></li>
            -->
        </ul>
    </div>

    <!-- Section 1: Introduction -->
    <section id="about">
        <div class="container" id="container1">
            <h1>Ooi2025 Optimal Scan Time Calculator</h1>
            <h2>Citation</h2>
            <hr class="section-divider">
            <p> Ooi LQR*, Orban C*, Zhang S*, Nichols TE, ..., Yeo BTT. <a
                    href="https://www.nature.com/articles/s41586-025-09250-1"> Longer scans boost prediction and cut
                    costs in brain-wide association studies</a>. <strong><em>Nature</em></strong>, 2025.
            </p>
            <p> Code for this study is publicly available in the <a href="https://github.com/ThomasYeoLab/CBIG">GitHub
                    repository</a> maintained by the <a href="https://sites.google.com/view/yeolab">Computational Brain
                    Imaging Group</a>. Code specific to the analyses in this study can be found <a
                    href="https://github.com/ThomasYeoLab/CBIG/tree/master/stable_projects/predict_phenotypes/Ooi2024_ME">here</a>.
            </p>
            <h2>Description</h2>
            <hr class="section-divider">
            <p> A pervasive dilemma in neuroimaging is whether to prioritize sample size or scan duration given fixed
                resources. Here, we provide a tool that calculates the achievable individual-level prediction accuracy
                with different combinations of fMRI sample size and scan durations, after taking into account other
                related costs. This tool was built on 6 diverse datasets spanning phenotypic domains (cognition,
                personality, physical attributes, mental health, PET measures, etc), scanners (Siemens, GE and Philips),
                acquisition protocols (single-echo-single-band, single-echo-multi-band, multi-echo-multi-band),
                continents (North America and East Asia), health status (healthy, psychiatric disorders, mild cognitive
                impairment, Alzheimer's disease), age groups (children, young adults, elderly), as well as resting-state
                and task-state functional connectivity. Our study found that the optimal scan time range was largely
                consistent across datasets, indicating that this calculator is likely to be applicable to a wide range
                of use cases.
                <br><br>
                <img src="README_Figure.png" alt="README Figure">
            </p>

            <!-- Interative Figure 6A -->
            <h2>Prediction accuracy given sample size N and scan duration T</h2>
            <hr class="section-divider">
            <div id="plot"></div>
            <div class="contour-slider-container">

                <div class="contour-slider-row">
                    <span class="contour-slider-label">Sample size (N): </span>
                    <input type="range" id="ySlider" min="0" max="499" step="1" value="167">
                    <span id="yValueDisplay">1000 </span>
                </div>

                <div class="contour-slider-row">
                    <span class="contour-slider-label">Scan duration (T):</span>
                    <input type="range" id="xSlider" min="1" max="200" step="1" value="30">
                    <span id="xValueDisplay">30</span>
                </div>
                % max prediction accuracy (r) <button class="popup-button">
                    <div class="popup-wide">The fraction of maximum accuracy computed under a 10-fold cross-validation
                        setup
                        and averaged across 123
                        phenotypes from 6 datasets. For example, a value of 80 means that the prediction model is
                        expected to achieve, on average, 80% of the theorectially highest possible accuracy across the
                        phenotypes considered.</div><span class="question-icon"><i
                            class="fas fa-circle-question"></i></span>
                </button> : <div class="inline-div" , id="zValueDisplay"></div>
            </div>

            <h2>Enter your own N and T</h2>
            <div id="N_T">
                Sample size (N):
                <input type="number" id="sample_size" name="sample_size" value="1000">
                Scan time (T/min):
                <input type="number" id="scan_time" name="scan_time" value="30">

                <div class="button-container">
                    <button class="calculate-acc-button" id="calculateAcc" onclick="calculate_acc()">Calculate
                        prediction accuracy</button>
                </div>
                % max prediction accuracy (r) <button class="popup-button">
                    <div class="popup-wide"> The fraction of maximum accuracy computed under a 10-fold cross-validation
                        setup
                        and averaged across 123
                        phenotypes from 6 datasets. For example, a value of 80 means that the prediction model is
                        expected to achieve, on average, 80% of the theorectially highest possible accuracy across the
                        phenotypes considered. </div><span class="question-icon"><i
                            class="fas fa-circle-question"></i></span>
                </button> : <div class="inline-div" , id="acc"></div>

            </div>


            <h2>Updates</h2>
            <hr class="section-divider">
            <p> v0.01 (05/11/2024): Initial release of web app <br><br>
                <b>Bugs and questions:</b> Please contact Leon Ooi (leonooiqr@gmail.com), Shaoshi Zhang
                (0zhangshaoshi0@gmail.com) or Thomas Yeo (yeoyeo02@gmail.com).
            </p>
        </div>
    </section>


    <!-- Include Sheetjs to read xlsx -->
    <script src="https://cdn.jsdelivr.net/npm/xlsx@0.17.0/dist/xlsx.full.min.js"></script>
    <!-- Include Plotly.js for graph plotting -->
    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
    <script src="index.js"></script>
    <!-- Script for navigating pages -->
    <script>
        function jumpToSection(containerId) {
            // Check the containerId and redirect to the appropriate page
            if (containerId === 'formula') {
                window.location.href = 'formula.html';
            } else if (containerId === 'budgetcalc') {
                window.location.href = 'budgetcalc.html';
            } else if (containerId === 'about') {
                window.location.href = 'index.html';
            }
        }
    </script>
    <!-- Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-R33XW8PFE9"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag() { dataLayer.push(arguments); }
        gtag('js', new Date());
        gtag('config', 'G-R33XW8PFE9');
    </script>

</body>

</html>