-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
75 lines (75 loc) · 3.56 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="UCB-VIRT-DATA-ANALYTICS Module 13, Parto Tandjoeng">
<meta http-equiv="X-UA-Compatible" content="ie=edge, chrome=1">
<title>Belly Button Biodiversity</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="static/css/style.css">
</head>
<body>
<div class="wrapper">
<nav class="navbar navbar-toggleable-md navbar-inverse navbar-fixed-bottom">
<ul class="nav navbar-nav">
<li class="nav-item active"><a class="navbar-brand" href="index.html" title="Belly Button Biodiversity Home" style="font-size:30px; text-align:center;">⌂</a></li>
<li class="nav-item"><a class="navbar-brand" href="#selDataset" title="Jump to ID No Selector">ID Selector</a></li>
<li class="nav-item"><a class="navbar-brand" href="#aboutBar" title="Jump to Bar Plots">Bar Plots</a></li>
<li class="nav-item"><a class="navbar-brand" href="#aboutGauge" title="Jump to Indicator Gauge">Indicator Gauge</a></li>
<li class="nav-item"><a class="navbar-brand" href="#aboutBubble" title="Jump to Bubble Plots">Bubble Plots</a></li>
</ul>
</nav>
</div>
<div class="container">
<div class="row">
<div class="col-md-12 jumbotron">
<h1 id="ffFan"><b>Belly Button Biodiversity Dashboard</b></h1>
<p class="fs2x">Use the interactive charts below to explore the dataset</p>
</div>
<div class="col-md-12" id="fsFan">
<hr>
<p>Welcome to the Belly Button Biodiversity visualization dashboard! It includes an interactive panel and visual charts for efficiently exploring demographic information and bacterial data of the collected samples. The demographic panel and bar plots provide an effortless way to identify the top 10 bacterial species in the sampled belly button data from hundreds of volunteers. The other dashboards also provide insightful information about the outcomes of our study that can be efficiently used by users to understand the washing frequency trends and types of bacteria cultures per sample.</p>
<hr>
</div>
</div>
<div class="row">
<div class="col-md-2">
<div class="well">
<h5><b>Test Subject ID No.:</b></h5>
<select class="arrowUD" 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" onchange="this.parentNode.style.backgroundColor=this.value"></div>
</div>
</div>
<div class="col-md-5">
<div id="aboutBar"></div>
<div id="bar"></div>
<a href="#top" title="Return to Top">⌂</a>
</div>
<div class="col-md-5">
<div id="aboutGauge"></div>
<div id="gauge"></div>
<a href="#top" title="Return to Top">⌂</a>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div id="aboutBubble"></div>
<div id="bubble"></div>
<a href="#top" title="Return to Top">⌂</a>
</div>
</div>
</div>
<hr>
<div id="footer"></div>
<script src="https://d3js.org/d3.v7.min.js"></script>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script src="static/js/charts.js"></script>
<script src="static/js/add_p.js"></script>
</body>
</html>