-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathindex.html
65 lines (60 loc) · 2.47 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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Assignment 3</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" />-->
<link href="//api.tiles.mapbox.com/mapbox.js/v1.6.1/mapbox.css" rel="stylesheet" />
<link rel="stylesheet" href="styles/bootstrap.min.css" />
<link rel="stylesheet" href="styles/bootstrap-theme.min.css" />
<link rel="stylesheet" href="styles/main.css">
</head>
<body>
<div class="container-fluid main-container">
<div class="row">
<div class="col-lg-7 col-md-12 col-xs-12">
<h1>
<form class="form-inline" role="form">
<label class="control-label" for="inputSuccess4">Explore a day in your life:</label>
<select class="form-control input-lg">
<option value="volvo">July 5 2013</option>
</select>
</form>
</h1>
<p>
This visualization shows the heart rate over the course of a day. In addition to that, you can see the steps walked and the number of floors that were moved up. Brush a certain region or click on the locations in the chart or the map to limit the view to part of the day. You can interact with either the chart or the map.
</p>
</div>
</div>
<div class="row">
<div class="col-lg-9 col-md-8">
<div id="plot"></div>
</div>
<div class="col-lg-3 col-md-4">
<h2>Summary</h2>
<h5>Time Span: </h5><span id="range_summary"></span>
<br/>
<h5>Steps Walked: </h5><span id="step_summary">0</span>
<br/>
<h5>Average Heart Rate: </h5><span id="heart_summary">0</span>
<h2>Legend</h2>
<div id="legend"></div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div id="map"></div>
</div>
</div>
</div>
<a href="https://github.com/CSE512-14W/a3-depstein-domoritz"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub"></a>
<script src="//code.jquery.com/jquery.js"></script>
<script src="scripts/bootstrap.min.js"></script>
<script src="scripts/d3.v3.min.js" charset="utf-8"></script>
<script src="scripts/sprintf.min.js" charset="utf-8"></script>
<script src="//cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
<script src="scripts/utils.js" charset="utf-8"></script>
<script src="scripts/map.js" charset="utf-8"></script>
<script src="scripts/chart.js" charset="utf-8"></script>
</body>
</html>