-
Notifications
You must be signed in to change notification settings - Fork 31
/
index.html
138 lines (124 loc) · 5.75 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
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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ASAP Demo</title>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<script src="ASAP-optimized.js" type="application/javascript"></script>
<div class="container">
<div class="jumbotron" style="margin-top: 20px; padding-top: 10px; padding-bottom: 10px;">
<h2>ASAP: Automatic Smoothing for Attention Prioritization in Time Series</h2>
<div class="lead">
<p>ASAP automatically smoothes time series plots to remove short-term noise while retaining large-scale deviations.</p>
<p>A little smoothing can go a long way: try ASAP below!</p>
<p>Empirically, ASAP can improve accuracy by up to 38.4% while reducing response times by up to 44.3%.</p>
<p>Check out our <a href="https://arxiv.org/pdf/1703.00983.pdf">paper</a> and the Monitorama <a href="https://vimeo.com/221062931">talk</a> for details.
[<a href="https://speakerdeck.com/futuredata/automating-dashboard-displays-with-asap">slides</a>] [<a href="#code">code</a>] [<a href="http://dawn.cs.stanford.edu/2017/08/07/asap/">blog post</a>]
</p>
</div>
</div>
<h3>Demo</h3>
<ul>
<li style="font-size:18px"> Examples:
<button class="btn btn-primary" id="data0" onclick="plotExample(0)">Taxi Trips
</button>
<button class="btn btn-primary" id="data1" onclick="plotExample(1)">Temperature
</button>
<button class="btn btn-primary" id="data2" onclick="plotExample(2)">Power Consumption
</button>
</li> <br>
<li style="font-size:18px; margin-bottom: 10px;"> Try on your own:
<ul style="margin-bottom: 10px;">
<li style="padding-top: 2px;padding-bottom: 5px;font-size:16px">Select CSV File <span style="font-size: 80%">(e.g., <a href="Taxi.csv">1</a>, <a href="Temp.csv">2</a>, <a href="Power.csv">3</a>)</span>:  <input id="csv" type="file" style="display:inline"/></li>
<li style="font-size:16px">Target resolution: <input type="text" id="pixels" value="1000"> pixels </li>
</ul>
<button type="button" class="btn btn-primary" onclick="plot()">Smooth!</button>
</li>
</ul>
<div id="original" style="width:1000px;height:250px;"></div>
<div id="smoothed" style="width:1000px;height:250px;"></div>
<hr>
<h3 id="code" style="margin-bottom: 10px;">Code:</h3>
<ul>
<li style="margin-bottom: -10px;"><p style="font-size:16px"><a href="https://github.com/stanford-futuredata/ASAP/blob/master/ASAP-simple.js">Javascript (simple grid search)</a></p></li>
<li style="margin-bottom: -10px;" ><p style="font-size:16px"><a href="https://github.com/stanford-futuredata/ASAP/blob/master/ASAP-optimized.js">Javascript (optimized search from paper)</a></p></li>
<li><p style="font-size:16px"><a href="https://github.com/kexinrong/macrobase/blob/ASAP-mb/contrib/src/main/java/macrobase/analysis/summarize/ASAP.java">MacroBase operator</a></p></li>
</ul>
<hr style="margin-bottom: 10px;">
<p style="text-align: right;">From <a href="https://kexinrong.github.io/">Kexin Rong</a>, <a href="http://futuredata.stanford.edu">Stanford Future Data Systems</a>. </p>
</div>
<script>
var examples = [
"https://raw.githubusercontent.com/stanford-futuredata/ASAP/master/Taxi.csv",
"https://raw.githubusercontent.com/stanford-futuredata/ASAP/master/Temp.csv",
"https://raw.githubusercontent.com/stanford-futuredata/ASAP/master/Power.csv"
];
var fileInput = document.getElementById("csv");
var resolution = document.getElementById("pixels");
var reader = new FileReader();
var layout = {
xaxis: { fixedrange: true },
yaxis: { fixedrange: true },
margin: { t: 30 }
};
read = function (reader) {
var data = [];
var allTextLines = reader.result.split(/\r\n|\n/);
for (var i = 1; i < allTextLines.length; i++) {
var cell = allTextLines[i].split(',');
data.push(parseFloat(cell[cell.length - 1]))
}
return data;
}
plotExample = function (id) {
var request = new XMLHttpRequest();
request.open('GET', examples[id], true);
request.responseType = 'blob';
request.onload = function() {
reader.readAsBinaryString(request.response);
reader.onload = function () {
var data = read(reader);
layout.title = 'Original (Raw Series)';
Plotly.newPlot( document.getElementById('original'), [{
x: Array.apply(null, Array(data.length)).map(function (_, i) {return i;}),
y: data }], layout );
layout.title = 'ASAP (Smoothed Series)';
var y = smooth(data, 1000);
Plotly.newPlot( document.getElementById('smoothed'), [{
x: Array.apply(null, Array(y.length)).map(function (_, i) {return i;}),
y: y }], layout);
};
};
request.send();
};
plot = function () {
reader.readAsBinaryString(fileInput.files[0]);
var pixels = resolution.value;
reader.onload = function () {
var data = read(reader);
layout.title = 'Original (Raw Series)';
Plotly.newPlot( document.getElementById('original'), [{
x: Array.apply(null, Array(data.length)).map(function (_, i) {return i;}),
y: data }], layout );
layout.title = 'ASAP (Smoothed Series)';
var y = smooth(data, pixels);
Plotly.newPlot( document.getElementById('smoothed'), [{
x: Array.apply(null, Array(y.length)).map(function (_, i) {return i;}),
y: y }], layout );
};
};
$(".btn").click(function() {
$(":button").removeClass("active");
$(this).addClass("active");
});
$( window ).on( "load", function() {
$("#data0").addClass("active");
plotExample(0);
});
</script>
</body>
</html>