-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathlab.html
170 lines (150 loc) · 8.54 KB
/
lab.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
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
<!DOCTYPE html>
<html lang="en">
<head>
<title>BBVA Physics Data Lab - Feel the data at your hands!</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<link rel="stylesheet" href="css/lab.css"/>
</head>
<body>
<div id="header">
<h1>BBVA Physics Data Lab</h1>
<h2>Feel the data at your hands!</h2>
</div>
<div id="controls">
<div id="choose-zipcode">
<p class="choose-header"><span class="icon-map icon"></span> Choose zipcode</p>
<select id="zipcodeSelect" onChange="selectZipcode()">
<option value="">Choose one zip...</option>
<option value="64700">Instituto Tecnológico de Monterrey</option>
<option value="44130">Ciudad Creativa Digital de Guadalajara</option>
<option value="11529">Museo Soumaya de Mexido DF</option>
</select>
</div>
<div id="choose-period">
<p class="choose-header"><span class="icon-calendar icon"></span> Choose period</p>
<div>
<input id="button-period-0" type="button" value="Nov 2013" onClick="selectPeriod(0)">
<input id="button-period-1" type="button" value="Dec 2013" onClick="selectPeriod(1)">
<input id="button-period-2" type="button" value="Jan 2014" onClick="selectPeriod(2)"><br/>
<input id="button-period-3" type="button" value="Feb 2014" onClick="selectPeriod(3)">
<input id="button-period-4" type="button" value="Mar 2014" onClick="selectPeriod(4)">
<input id="button-period-5" type="button" value="Apr 2014" onClick="selectPeriod(5)">
</div>
</div>
<div id="info">
<a href="#" id="start-button" onClick="toggleAnalysis()"><span class="icon-play"></span> Launch</a>
<a href="#" id="pause-button" onClick="toggleAnalysis()"><span class="icon-pause"></span> Pause</a>
<div class="arrow_box" id="summary">
<p>
You are about to analyze card payments that took place on <em><span id="monthInfo"></span></em> at <em><span id="zipcodeInfo"></span></em>.
</p>
<p>
Payments are depicted as 3D spheres and they fall inside a transparent box at the pace they were carried out.
</p>
<p>
Each sphere corresponds with a group of upto 150 payments on an specific
day made by people in the same age group and gender.
</p>
<p>
The sphere radius is proportional to the average payment and its color
represents the commercial category following this legend:
</p>
<ul id="legend">
<li><span class="mx_barsandrestaurants color"></span> bars/restaurants</li>
<li><span class="mx_food color"></span> food</li>
<li><span class="mx_services color"></span> services</li>
<li><span class="mx_office color"></span> office</li>
<li><span class="mx_car color"></span> car</li>
<li><span class="mx_auto color"></span> auto</li>
<li><span class="mx_travel color"></span> travel</li>
<li><span class="mx_sport color"></span> sport</li>
<li><span class="mx_beauty color"></span> beauty</li>
<li><span class="mx_health color"></span> health</li>
<li><span class="mx_fashion color"></span> fashion</li>
<li><span class="mx_leisure color"></span> leisure</li>
</ul>
</div>
</div>
</div>
<div id="tools">
<ul>
<li>
<a id="inspectorBtn" class="tool-item" href="#" onclick="toggleInspector()">
<span class="icon-target icon"></span><br/>
<span class="tool-text">Object Inspector</span>
</a>
</li>
<li>
<a id="filterBtn" class="tool-item" href="#" onclick="toggleFiltersInfo()">
<span class="icon-magnet icon"></span><br/>
<span class="tool-text">Magnetic Fields</span>
</a>
</li>
<li>
<a id="statsCubeBtn" class="tool-item" href="#" onclick="toggleStatsCubeInfo()">
<span class="icon-stats icon"></span><br/>
<span class="tool-text">Stats Cube</span>
</a>
</li>
</ul>
<ul class="github">
<li>
<a class="tool-item" href="https://github.com/luque/BBVA-Physics-Data-Lab">
<span class="icon-github icon"></span><br/>
<span class="tool-text">Source Code</span>
</a>
</li>
</ul>
</div>
<div id="inspectorInfo">
<div class="subtoolbar-header">Object Inspector</div>
<p class="subtoolbar-info">You can point and click over any sphere to inspect the data it represents.</p>
<div class="content"></div>
</div>
<div id="filtersInfo">
<div class="subtoolbar-header">Magnetic Fields</div>
<p>You can create several magnetic fields (a.k.a. filters) to take apart the spheres matching given criteria out of the transparent box</p>
<a href="#" class="showMore" onclick="toggleMoreFilterInstructions()">show instructions</a>
<div id="moreFilterInstructions">
<p>You can use the following <em>data variables</em> in your filter expressions: <code>$date</code>, <code>$category</code>, <code>$num_payments</code>, <code>$avg_payment</code>, <code>$gender</code> and <code>$age_range</code>.</p>
<p>Filter expressions support the following <em>comparison operators</em>: <code>==</code> (equals to), <code>!=</code> (not equals to), <code>></code> (greater than), <code>>=</code> (greater than or equals to), <code><</code> (less than), <code><=</code> (less than or equals to); and the <em>logical operators</em>: <code>&&</code> (and), <code>||</code> (or) and <code>!</code> (not).</p>
<p>Examples:</p>
<dl>
<dt>Payments by men and average payment greater than or equals to 2,500:</dt><dd class="code">($gender == 'M') && ($avg_payment >= 2500)</dd>
<dt>Payments in mx_office category between 20131101 and 20131110:</dt>
<dd><code>($category == 'mx_office') && ($date >= '20131101') && ($date <= 20131110')</code></dd>
</dl>
</p>
</div>
<div class="content">
<div id="newFilter" class="filter">
<div class="filter-header">Add New Filter</div>
<div class="filter-contents">
<input type="text" id="newFilterName" placeholder="Give me a name"></input>
<textarea id="newFilterExpression" placeholder="Your filter expression here. E.g:"></textarea>
<a href="#" onclick="createFilter()" title="Add a new filter"><span class="icon-add"></span></a>
</div>
</div>
</div>
</div>
<div id='lab'></div>
<div id="dayInfo"></div>
<footer>
© 2014 by <a href="http://twitter.com/rafael_luque">@rafael_luque</a> for <a href="">BBVA Innova Challenge MX</a>.
<a href="https://twitter.com/share" class="twitter-share-button" data-text="Feel the data at your hands with BBVA Physics Data Lab" data-via="rafael_luque" data-hashtags="bbvainnovachallenge" data-size="medium" data-url="http://luque.github.io/BBVA-Physics-Data-Lab/lab.html">Tweet</a>
</footer>
<script src="js/three.min.js"></script>
<script src="js/navigation.js"></script>
<script src="js/Oimo.js"></script>
<script src="js/Detector.js"></script>
<script src="js/helvetiker_regular.typeface.js"></script>
<script src="js/dataset/monterrey_tech.js"></script>
<script src="js/dataset/guadalajara_ccd.js"></script>
<script src="js/dataset/mexico_soumaya_museum.js"></script>
<script src="js/lab.js"></script>
<script type="text/javascript">
window.twttr=(function(d,s,id){var t,js,fjs=d.getElementsByTagName(s)[0];if(d.getElementById(id)){return}js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);return window.twttr||(t={_e:[],ready:function(f){t._e.push(f)}})}(document,"script","twitter-wjs"));
</script>
</body>
</html>