https://github.com/jenlij/GAS-power-calculator
Revision 5b61fc841fe84cae2e4e239b6252fc61f1e0ca93 authored by jenlij on 07 July 2017, 14:34:05 UTC, committed by jenlij on 07 July 2017, 14:34:05 UTC
1 parent 3e73154
Tip revision: 5b61fc841fe84cae2e4e239b6252fc61f1e0ca93 authored by jenlij on 07 July 2017, 14:34:05 UTC
modifies inputs section format
modifies inputs section format
Tip revision: 5b61fc8
index.html
<!--
Genetic Association Study (GAS) Power Calculator
Copyright (C) 2016 Jennifer Li Johnson
University of Michigan School of Public Health
Department of Biostatistics Center for Statistical Genetics
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>.
-->
<!DOCTYPE html>
<html lang = "en">
<head>
<title>Home | GAS Power Calculator</title>
<!--general-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<!--jquery-->
<script type = "text/javascript" src = "jquery/jquery-1.10.2.js"></script>
<script type = "text/javascript" src = "jquery/jquery-ui.js"></script>
<!--bootstrap-->
<link rel="stylesheet" type="text/css" href="bootstrap/bootstrap-theme.css">
<link rel="stylesheet" type="text/css" href="bootstrap/bootstrap.css">
<script type = "text/javascript" src = "bootstrap/bootstrap.js"></script>
<!--bootstrap select-->
<link rel="stylesheet" type="text/css" href="bootstrap-select/bootstrap-select.css">
<script type = "text/javascript" src = "bootstrap-select/bootstrap-select.js"></script>
<!--noUiSlider-->
<script type = "text/javascript" src = "nouislider/nouislider.js"></script>
<link rel="stylesheet" type="text/css" href="nouislider/nouislider.css">
<script type = "text/javascript" src = "nouislider/wNumbUpdated6_21_15.js"></script>
<!--highcharts-->
<script type = "text/javascript" src = "Highcharts-4.2.5/highcharts.js"></script>
<script type = "text/javascript" src = "Highcharts-4.2.5/highcharts_exporting.js"></script>
<script type = "text/javascript" src = "Highcharts-4.2.5/highcharts_offline_exporting.js"></script>
<script type = "text/javascript" src = "Highcharts-4.2.5/export-csv.js"></script>
<!--favicon-->
<link href="images/favicon.png" rel="icon" type="image/x-icon" />
<style> /*home page styles*/
/*remove input box spinners*/
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
#results{ /*results section*/
min-height: 350px;
}
</style>
<style> /*all page styles*/
a.footerlink { /*footer link color*/
color: black;
}
a:hover.footerlink{ /*footer link hover color */
color: #286090;
}
.navbar-brand, .navbar-nav > li > a { /*remove navbar text shadow*/
text-shadow: none !important;
}
.navbar { /*remove navbar gradient*/
background-image: none !important;
}
</style>
<script> //google analytics tracker (from gmail account)
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-79655559-1', 'auto');
ga('send', 'pageview');
</script>
</head>
<body>
<nav class="navbar navbar-default"> <!--navigation banner-->
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html"><span><img src="images/BlockM.png" height=25px></span> GAS Power Calculator</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="index.html">Home<span class="sr-only">(current)</span></a></li>
<li><a href="about.html">About</a></li>
<li><a href="tutorial.html">Tutorial</a></li>
<li><a href="reference.html">Reference</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="container-fluid"> <!--body of webpage-->
<div class="row">
<div class="col-md-12">
<div class="panel panel-default" id="about">
<div class="panel-heading"><h3 class="panel-title">About GAS Power Calculator</h3></div>
<div class="panel-body">
This Genetic Association Study (GAS) Power Calculator is a simple interface that can be used to
compute statistical power for large one-stage genetic association studies.
The underlying method is derived from the <a href="http://csg.sph.umich.edu//abecasis/CaTS/index.html">CaTS </a>power calculator for two-stage association studies (2006).
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6"><!--inputs section-->
<div class="panel panel-default" id="inputs">
<div class="panel-heading"><h3 class="panel-title">Inputs</h3></div>
<div class="panel-body">
<div class="row" style="margin-bottom: 10px;">
<div class="col-md-2"></div>
<div class="col-md-6 col-sm-8 col-xs-7"><h4>Sample Size</h4></div>
<div class="col-md-4 col-sm-4 col-xs-5"><div id="casesControlsRatio">Cases/Controls = 1.000</div></div>
</div>
<div class="row" style="margin-bottom: 10px;">
<div class="col-md-2">Cases</div>
<div class="col-md-6 col-sm-8 col-xs-7"><div id="cases_slider"></div></div>
<div class="col-md-4 col-sm-4 col-xs-5"><input id="cases_input" type="number" class="form-control input-sm"></div>
</div>
<div class="row" style="margin-bottom: 10px;">
<div class="col-md-2">Controls</div>
<div class="col-md-6 col-sm-8 col-xs-7"><div id="controls_slider"></div></div>
<div class="col-md-4 col-sm-4 col-xs-5"><input id="controls_input" type="number" class="form-control input-sm"></div>
</div>
<div class="row" style="margin-bottom: 10px;">
<div class="col-md-2"></div>
<div class="col-md-6 col-sm-8 col-xs-7"><h4>Study Design</h4></div>
<div class="col-md-4 col-sm-4 col-xs-5"></div>
</div>
<div class="row" style="margin-bottom: 10px;">
<div class="col-md-2">Significance Level</div>
<div class="col-md-6 col-sm-8 col-xs-7"><div id="sig_slider"></div></div>
<div class="col-md-4 col-sm-4 col-xs-5"><input id="sig_input" type="number" class="form-control input-sm"></div>
</div>
<div class="row" style="margin-bottom: 10px;">
<div class="col-md-2"></div>
<div class="col-md-6 col-sm-8 col-xs-7">
<h4>Disease Model
<select class="selectpicker" id="disease_model" data-width="fit">
<option value="Multiplicative">Multiplicative</option>
<option value="Additive">Additive</option>
<option value="Dominant">Dominant</option>
<option value="Recessive">Recessive</option>
</select></h4>
</div>
<div class="col-md-4 col-sm-4 col-xs-5"></div>
</div>
<div class="row" style="margin-bottom: 10px;">
<div class="col-md-2">Prevalence</div>
<div class="col-md-6 col-sm-8 col-xs-7"><div id="prev_slider"></div></div>
<div class="col-md-4 col-sm-4 col-xs-5"><input id="prev_input" type="number" class="form-control input-sm"></div>
</div>
<div class="row" style="margin-bottom: 10px;">
<div class="col-md-2">Disease Allele Frequency</div>
<div class="col-md-6 col-sm-8 col-xs-7"><div id="allele_slider"></div></div>
<div class="col-md-4 col-sm-4 col-xs-5"><input id="allele_input" type="number" class="form-control input-sm"></div>
</div>
<div class="row">
<div class="col-md-2">Genotype Relative Risk</div>
<div class="col-md-6 col-sm-8 col-xs-7"><div id="rr_slider"></div></div>
<div class="col-md-4 col-sm-4 col-xs-5"><input id="rr_input" type="number" class="form-control input-sm"></div>
</div>
</div>
</div>
</div>
<div class="col-md-6"> <!--graphs section-->
<div class="panel panel-default" id="graphs">
<div class="panel-heading"><h3 class="panel-title">Graph</h3></div>
<div class="panel-body">
<div class="text-center" id="graph-title">Statistical Power vs.
<select class="selectpicker" id="x_graph" data-width="fit">
<optgroup label="Sample Size">
<option value="Cases">Cases</option>
<option value="Controls">Controls</option>
<option value="Cases + Controls">Cases + Controls</option>
</optgroup>
<optgroup label="Study Design">
<option value="Significance level">Significance level</option>
</optgroup>
<optgroup label="Disease Model">
<option value="Prevalence">Prevalence</option>
<option value="Disease Allele Frequency">Disease Allele Frequency</option>
<option value="Genotype Relative Risk">Genotype Relative Risk</option>
</optgroup>
</select>
</div>
<div id="highcharts_graph" style="width:100%; height:450px;"></div>
</div>
</div>
</div>
<div class="row"> <!--results section-->
<div class="col-md-12">
<div class="panel panel-default" id="results">
<div class="panel-heading"><h3 class="panel-title">Results</h3></div>
<div class="panel-body"><div id="output"></div>
<div class="col-md-4"><h5>Expected <strong>power</strong> for a one-stage study</h5></div>
<div class="col-md-8">
<div class="progress">
<div id="power_progress" class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 99.5%;">0.995</div>
</div>
</div>
<div class="col-md-12"><h5><strong>Expected disease allele frequency</strong></h5></div>
<div class="col-md-4">Cases</div>
<div class="col-md-8">
<div class="progress">
<div id="cases_progress" class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">0.600</div>
</div>
</div>
<div class="col-md-4">Controls</div>
<div class="col-md-8">
<div class="progress">
<div id="controls_progress" class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 48.9%;">0.489</div>
</div>
</div>
<div class="col-md-12"><h5><strong>Probability of disease</strong></h5></div>
<div class="col-md-4">Genotype A/A [with frequency <span id="AA_freq">0.250</span>]</div>
<div class="col-md-8">
<div class="progress">
<div id="AA_progress" class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 14.4%;">0.144</div>
</div>
</div>
<div class="col-md-4">Genotype A/B [with frequency <span id="AB_freq">0.500</span>]</div>
<div class="col-md-8">
<div class="progress">
<div id="AB_progress"class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 9.6%;">0.096</div>
</div>
</div>
<div class="col-md-4">Genotype B/B [with frequency <span id="BB_freq">0.250</span>]</div>
<div class="col-md-8">
<div class="progress">
<div id="BB_progress"class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 6.4%;">0.064</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p class="text-center">© 2016 <a class="footerlink" href="https://github.com/jenlij">Jennifer Li Johnson</a> | <a class="footerlink" href="http://umich.edu/">University of Michigan</a></p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p class="text-right">Visitors:
<!-- Start of StatCounter Code-->
<script type="text/javascript">
var sc_project=11101742;
var sc_invisible=0;
var sc_security="bdd16301";
var sc_text=2;
var scJsHost = (("https:" == document.location.protocol) ?
"https://secure." : "http://www.");
document.write("<sc"+"ript type='text/javascript' src='" +
scJsHost+
"statcounter.com/counter/counter.js'></"+"script>");
</script>
<noscript><div class="statcounter"><a title="shopify site
analytics" href="http://statcounter.com/shopify/"
target="_blank"><img class="statcounter"
src="//c.statcounter.com/11101742/0/bdd16301/0/"
alt="shopify site analytics"></a></div></noscript>
<!-- End of StatCounter Code-->
</p>
</div>
</div>
</body>
<script type = "text/javascript" src = "gas_power_calculator.js"></script>
</html>
Computing file changes ...
