-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
160 lines (153 loc) · 7.27 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
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Forecast. Analyze and predict univariate timeseries | StatSim</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link type="text/css" rel="stylesheet" href="https://statsim.com/port/css/port.css" media="screen"/>
<link rel="icon" type="image/png" href="https://statsim.com/app/images/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="https://statsim.com/app/images/favicon-16x16.png" sizes="16x16">
<link type="text/css" rel="stylesheet" href="https://statsim.com/assets/common.css" media="screen"/>
<style>
a { color: #19BCB0 }
a:hover { color: #089C90 }
#run { color: white }
.status-bar { background: #f5f5f5 }
.grey-bar { background: #f5f5f5 }
</style>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-7770107-2"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-7770107-2');
</script>
</head>
<body>
<div class="status-bar">
<div class="container">
<div class="row">
<div class="col s11" style="font-size: 14px;">
<div id="menu"></div>
<a href="https://statsim.com/">StatSim</a> → <b>Forecast</b>
<span class="version">Version: 0.1.0</span>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div id="port-container"></div>
</div>
</div>
<div id="description" class="grey-bar">
<div class="container">
<div class="row">
<div class="col m12">
<h1>Time-series forecasting in the browser</h1>
<h2>Analyze and predict univariate time-series online using the ARIMA model</h2>
<p>
Predicting the future is one of the fundamental problems in science, business, and human life in general. Ancient people asked magicians to get some hints about future events. Nowadays, we try to be more scientific and use statistical and machine learning models for forecasting. ARIMA is probably the most robust and popular of such models. StatSim Forecast makes it possible to use ARIMA online, in the browser, without writing code.</p>
</div>
</div>
<div class="row features">
<div class="col m6 feature">
<h3>
Forecast uncertainty estimation
</h3>
<p>
Real-world data is almost always noisy. That means it's impossible to estimate the exact rule that governs the data generating process. So we can't be 100% sure about the predicted results if what we have is only a point estimate. To deal with real-world complexity and noise, models should predict a range of the most probable values. Luckily ARIMA is one of those models.
</p>
</div>
<div class="col m6 feature">
<h3>
Client-side analysis and forecasting
</h3>
<p>
ARIMA is based on a native C++ library called "ctsa" ported to WebAssembly and wrapped in this web application. When you load a dataset, it's preprocessed using Javascript libraries then passed to a virtual machine running WebAssembly in your browser. That means no single byte of your data is leaving a device that runs this web app.
</p>
</div>
</div>
<div class="row">
<div class="col m12">
<small>
All processing and visualization happens in the browser. We don't see, collect or sell data <br>
Based on <a href="https://github.com/statsim/port">port</a> and npm packages:
<a href="https://www.npmjs.com/package/csv-parse">csv-parse</a>,
<a href="https://www.npmjs.com/package/arima">arima</a>,
<a href="https://www.npmjs.com/package/plotly.js">plotly.js</a> and <a href="https://github.com/statsim/vis/blob/master/package.json">other</a>
</small>
<p>
<a class="github-button" href="https://github.com/statsim/forecast" data-icon="octicon-star" data-show-count="true" aria-label="Star statsim/forecast on GitHub">Star</a>
<a class="github-button" href="https://github.com/statsim/forecast/issues" data-icon="octicon-issue-opened" data-show-count="true" aria-label="Issue statsim/forecast on GitHub">Issue</a>
</p>
</div>
</div>
<div class="row products">
<div class="col m12 product">
<small>Check also:</small>
<h5><a href="https://statsim.com/spurious-correlation/">Spurious Correlation</a></h5>
<p>Spurious correlation between non-related time series can often trick analysts and data scientists. Generate multiple random walks and check how correlated they are. </p>
</div>
</div>
</div>
</div>
<script async defer src="https://buttons.github.io/buttons.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="https://statsim.com/port/dist/port.js"></script>
<script src="https://statsim.com/assets/common.js"></script>
<script>
var port = new Port({
portContainer: document.getElementById('port-container'),
schema: {
"model": {
"name": "Process",
"method": "run",
"type": "class",
"url": "process.js",
"worker": true,
},
"render": {
"name": "Render",
"method": "render",
"type": "class",
"url": "render.js"
},
"design": {
"layout": "sidebar",
"colors": "light"
},
"inputs": [
{ "type": "file", "name": "file", "reactive": true },
{ "type": "select", "name": "column" },
{ "type": "select", "name": "method", "options": ["Maximum Likelihood", "Conditional", "Box-Jenkins"], "default": "Maximum Likelihood" },
{ "type": "select", "name": "parameters", "options": ["Auto", "Manual"], "default": "Auto", "onchange": (value) => {
if (value === 'Auto') {
return {
'p': {'className': 'hidden'},
'd': {'className': 'hidden'},
'q': {'className': 'hidden'},
'iterations': {'className': ''}
}
} else {
return {
'p': {'className': ''},
'd': {'className': ''},
'q': {'className': ''},
'iterations': {'className': 'hidden'}
}
}
}},
{ "type": "int", "name": "timesteps", "default": 20},
{ "type": "int", "name": "p", "default": 1},
{ "type": "int", "name": "d", "default": 0},
{ "type": "int", "name": "q", "default": 1},
{ "type": "int", "name": "iterations", "default": 50}
]
}
})
</script>
</body>
</html>