-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
137 lines (72 loc) · 3.95 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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Bellybutton Biodiversity</title>
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body style="background-color:rgb(255, 255, 255);">
<body>
<div class="container">
<div class="row">
<div class="col-md-12 jumbotron text-center" style="background-image: url(https://img.webmd.com/dtmcms/live/webmd/consumer_assets/site_images/article_thumbnails/video/incremental_bacterial_and_viral_infections_video/650x350_incremental_bacterial_and_viral_infections_video.jpg);">
<font color="white">
<h1>Belly Button Biodiversity Dashboard</h1>
<p>Use the interactive charts below to explore the dataset</p>
</font>
</div>
</div>
<div class="row">
<div class="col-md-2">
<div style="border-color: black;" class="well">
<h5>Test Subject ID No.:</h5>
<select id="selDataset" onchange="optionChanged(this.value)"></select>
</div>
<div style="border-color: black;" class="panel panel-primary">
<div style="background-color:rgb(75, 0, 121);" class="panel-heading" >
<h3 class="panel-title">Demographic Info</h3>
</div>
<div id="sample-metadata" class="panel-body"></div>
</div>
</div>
<div class="col-md-5">
<div id="bar"></div>
</div>
<div class="col-md-5">
<div id="gauge"></div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div id="bubble"></div>
</div>
</div>
</div>
<div class="relative max-w-screen-xl px-4 py-12 mx-auto sm:px-6 lg:px-8 lg:py-16"><div class="md:ml-auto md:w-1/2 md:pl-10"><h2 class="mt-2 text-3xl font-extrabold leading-9 tracking-tight text-white sm:text-4xl sm:leading-10">
About the proyect
</h2> <p class="mt-3 leading-7 text-primary-50 text-md">
The skin of an average human houses trillions of individual bacteria representing
hundreds or even thousands of phylotypes. Most of these phylotypes or “species”
(acknowledging that bacterial species definitions are vague), are not yet named,
and are often difficult to cultivate so are known only based on their nucleotide sequence.
Studies have begun to characterize consistent differences in the composition of bacterial
taxa across the geography of our bodies, for example, between wet (e.g., armpit) and dry
(e.g., forearm) habitats. It is still not clear, however, how the diversity in such habitats
is structured and, in particular, what makes some phylotypes common and others rare.
Commonness might be the result of historically contingent or even chance processes,
in which common phylotypes might be expected to differ among individual humans or human
populations in unpredictable ways. Alternatively, common phylotypes might be predictably
common, because they are from lineages with adaptations that predispose them to predictable
success in the environment in which they are common.
</p> <p class="mt-3 leading-7 text-primary-50 text-md">
Use the interactive charts above to explore the dataset
</p></div></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.5.0/d3.js"></script>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script src="charts.js"></script>
</body>
</html>