-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
68 lines (63 loc) · 2.65 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
<!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>
<div class="container">
<div class="row">
<div class="col-md-12 jumbotron text-center", style="background-image: url('http://robdunnlab.com/wp-content/uploads/microbes-sem.jpg');">
<h1 style="color: white">Belly Button Biodiversity Dashboard</h1>
<p style="color: yellow">Use the interactive charts below to explore the dataset</p>
</div>
</div>
<div class="row">
<div class="col-md-12">
<h2 style="color: purple; font-size:35px">Project Overview</h2>
<p style="color: indigo; font-size:25px">This project collected a demographic information of bacteria data from volunteers' belly button. Base on these data,
we created a interactive dashboard to visulize each volunteer's belly button biodiversity. <br><br>
By selecting Test Subject ID number from the dropdown menu, the individual's demographic information table and following three charts will dynamically response.
The horizontal bar chart identifys the subject's top 10 bacterial species in their navel. The gauge chart reveals reveals how often does the subject clean his belly button.
The bubble chart displays bacteria culture test result for each sample.
<br></p>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-2">
<div class="well">
<h5>Test Subject ID No.:</h5>
<!-- <select id="selDataset"></select> -->
<select id="selDataset" onchange="optionChanged(this.value)"></select>
</div>
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Demographic Info</h3>
</div>
<div id="sample-metadata" class="panel-body" style="color: blue; background-color: cornsilk"></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>
<hr>
<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="plots.js"></script> -->
<script src="charts.js"></script>
</body>
</html>