-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
52 lines (46 loc) · 3.08 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
<!DOCTYPE html>
<html>
<head>
<title>Sleep / Wake Dashboard</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Raleway:500' rel='stylesheet' type='text/css'>
<link href="css/main.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="title">
<h1>Sleep / Home Activity Dashboard</h1>
</div>
<div class="description">
<p><em>The colorful sections in these charts signify periods of activity in my apartment. A lack of color correlates to periods of inactivity. The large swaths of white that span across the evening hours are a decent approximation of when I'm catching some shut eye.<br><br>
The data on this dashboard is generated by an Electric Imp + KeenIO device that I built. For more information, check out my <a href="//github.com/stroud109/sensitiveimp">repo</a>.</em></p>
</div>
<div>
<div id="loading">
<h3 class="loading-text">Sit tight while the chart loads :)</h3>
<img class="loading-img" alt="" src="images/threedots.gif"/>
</div>
<div class="chart" id="chart"></div>
</div>
</div>
<!-- Things necessary for Backbone ... -->
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.8/d3.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"></script>
<!-- Configure the KeenIO Javascript SDK -->
<script type="text/javascript">
var Keen=Keen||{configure:function(e){this._cf=e},addEvent:function(e,t,n,i){this._eq=this._eq||[],this._eq.push([e,t,n,i])},setGlobalProperties:function(e){this._gp=e},onChartsReady:function(e){this._ocrq=this._ocrq||[],this._ocrq.push(e)}};(function(){var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src=("https:"==document.location.protocol?"https://":"http://")+"dc8na2hxrj29i.cloudfront.net/code/keen-2.1.0-min.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})();
// Configure the Keen object with your Project ID and (optional) access keys.
Keen.configure({
projectId: "5374e56f73f4bb065b000005",
readKey: "892d4381374e5b09e61d7de3a6e654985c3cd661d37d4531bf959b1da2e94b5cd7d68df19f995fb76c220d9e07e511b8345b23908ea7594559e6c8ab6b304ed3d39ae21f0214ac99f952dc597c4602f014b551fa9842f39c2178e4fc34b5a554cf0aad2073e8faefb795239163d33024" // required for doing analysis
});
</script>
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization',
'version':'1','packages':['timeline']}]}"></script>
<!-- Finally, run my Javascript -->
<script src="js/main.js"></script>
</body>
</html>