-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
84 lines (76 loc) · 4.59 KB
/
index.html
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
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.css">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<!-- <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.7/css/dataTables.bootstrap5.min.css"> -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/css/bootstrap5-toggle.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css">
<link rel="stylesheet" type="text/css" href="styles.css">
<script type="text/javascript" charset="utf8" src="https://code.jquery.com/jquery-3.7.0.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.13.7/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
<!-- <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.13.7/js/dataTables.bootstrap5.min.js"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.3.0/papaparse.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/js/bootstrap5-toggle.jquery.min.js"></script>
</head>
<body>
<div class="intro">
<h1 class="text-center my-4">TEAPEE table</h1>
<p class="lead text-center mx-auto" style="max-width: 800px;">Tracker of EAA Associations with Phenotype & Environmental Exposure (TEAPEE) is an interactive web platform for users to explore the associations between epigenetic clocks and various factors</p>
</div>
<table id="myTable" class="table table-striped" style="width:100%">
<thead>
<tr>
<th>Topic</th>
<th>Category</th>
<th>Factor Group</th>
<th>Factor</th>
<th>Clock</th>
<th>N total</th>
<th>Tissue</th>
<th>Race/Ethnicity</th>
<th>Sex</th>
<th>Twin study</th>
<th>Cohort</th>
<th>Link</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<div class="card">
<div class="card-header">
Reference
</div>
<div class="card-body">
<p class="card-title">TEAPEE web app is an interactive reduced version of a table provided and described in</p>
<p class="card-text"><cite>Olga Chervova, Kseniia Panteleeva, Elizabeth Chernysheva, Tyas Arum Widayati, Žan Baronik, Natálie Hrbková, Jadesada Schnider, Martin Bobak, Stephan Beck, and Vitaly Voloshin. "Breaking new ground on human health and well-being with epigenetic clocks". Ageing Research Reviews, vol. 102, 2024, p. 102552. <a href=https://doi.org/10.1016/j.arr.2024.102552 target="_blank">https://doi.org/10.1016/j.arr.2024.102552</a>.</cite>
</p>
</div>
</div>
<div class="card">
<div class="card-header">
Supplementary Data from the paper
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item"><a href="paper_data/main_table.xlsx" target='_blank'>Main table, main_table.xlsx</a></li>
<li class="list-group-item"><a href="paper_data/new_clocks.csv" target='_blank'>Full table with novel clocks, new_clocks.csv</a></li>
<li class="list-group-item"><a href="paper_data/publications_info.csv" target='_blank'>List of the reviewed papers with links, publications_info.csv</a></li>
<li class="list-group-item"><a href="paper_data/meta_hr_plots.pdf" target='_blank'>Hazard ratio meta-analysis figures, meta_hr_plots.pdf</a></li>
<li class="list-group-item"><a href="paper_data/meta_beta_plots.pdf" target='_blank'>Regression coefficients meta-analysis figures, meta_beta_plots.pdf</a></li>
</ul>
</div>
<div class="card">
<div class="card-header">
TEAPEE Interactive web app code
</div>
<div class="card-body">
<div class="card-text">
<a href="https://github.com/ucl-medical-genomics/TEAPEE" target="_blank">See the code and data at <img src="github-mark.png" height=20><img src="GitHub_Logo.png" height=20></a>
</div>
</div>
</div>
<script src="table.js"></script>
</body>
</html>