UNPKG

11.5 kBHTMLView Raw
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <meta name="viewport" content="width=device-width, initial-scale=1">
7 <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
8 <meta name="description" content="">
9 <meta name="author" content="">
10 <link rel="icon" href="http://getbootstrap.com/favicon.ico">
11
12 <title>Rlab IDE</title>
13
14 <!-- Bootstrap core CSS -->
15 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
16
17 <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
18 <link href="http://getbootstrap.com/assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet">
19
20 <!-- Custom styles for this template -->
21 <link href="web/rlab.css" rel="stylesheet">
22
23 <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
24 <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
25 <script src="http://getbootstrap.com/assets/js/ie-emulation-modes-warning.js"></script>
26
27 <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
28 <!--[if lt IE 9]>
29 <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
30 <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
31 <![endif]-->
32
33 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.18.2/codemirror.css">
34
35 <link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.css" rel="stylesheet"/>
36
37 <link href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.16.1/vis.css" rel="stylesheet"/>
38
39 </head>
40
41 <body>
42<!-- Modal -->
43<div class="modal fade" id="bigChartModal" tabindex="-1" role="dialog" aria-labelledby="bigChartModalLabel">
44 <div class="modal-dialog" role="document">
45 <div class="modal-content">
46 <div class="modal-header">
47 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
48 <h4 class="modal-title" id="myModalLabel">Chart(Big)</h4>
49 </div>
50 <div id="bigChart2" class="modal-body chart-big">
51 </div>
52 <div class="modal-footer">
53 <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
54 <button type="button" class="btn btn-primary">Save changes</button>
55 </div>
56 </div>
57 </div>
58</div>
59
60 <nav class="navbar navbar-inverse navbar-fixed-top">
61 <div class="container">
62 <div class="navbar-header">
63 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
64 <span class="sr-only">Toggle navigation</span>
65 <span class="icon-bar"></span>
66 <span class="icon-bar"></span>
67 <span class="icon-bar"></span>
68 </button>
69 <a class="navbar-brand" href="#">Rlab = (R + Matlab).js</a>
70 </div>
71 <div id="navbar" class="navbar-collapse collapse">
72 <ul class="nav navbar-nav navbar-right">
73 <li class="active"><a href="#console">Console</a></li>
74 <li><a href="#canvas">Canvas</a></li>
75 <li class="dropdown">
76 <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Help<span class="caret"></span></a>
77 <ul class="dropdown-menu">
78 <li><a href="#aboutRlab">About Rlab</a></li>
79 <li><a href="#">User Guide</a></li>
80 <li><a href="#">Rlab API</a></li>
81 <li role="separator" class="divider"></li>
82 <li><a href="#">More</a></li>
83 </ul>
84 </li>
85 </ul>
86 <form class="navbar-form">
87 <label class="btn btn-primary btn-file">
88 File <input id="fileButton" type="file" style="display: none;">
89 </label>
90 <label class="btn btn-primary">
91 Run <input id="runButton" type="button" style="display: none;">
92 </label>
93 </form>
94 </div><!--/.navbar-collapse -->
95 </div>
96 </nav>
97
98 <div class="container">
99 <div class="row">
100 <div class="col-md-6">
101 <div class="form-group">
102 <textarea class="form-control" rows="10" id="codeBox" wrap="soft">
103function hist(x,k) {
104 var mk = x.fillVM(k,x.length/k);
105 return mk.colSum().hist();
106}
107
108var centralLimit = function(x) {
109 print('hist(x,1)=', x.hist());
110 print('hist(x,2)=', hist(x,2).str(0));
111 print('hist(x,10)=', hist(x,10).str(0));
112 print('hist(x,20)=', hist(x,20).str(0));
113}
114
115var x = R.samples([0,1], 100000, {replace:true});
116centralLimit(x);
117
118var xu = R.runif(100000, 0, 10);
119centralLimit(xu);
120 </textarea>
121 </div>
122 </div>
123 <div class="col-md-6">
124 <div class="form-group">
125 <textarea class="form-control" rows="14" id="consoleBox"></textarea>
126 </div>
127 </div>
128
129 </div>
130
131 <div id="bigChartPanel">
132 <div id="bigChart" class="chart-big"></div>
133 </div>
134
135 <!-- Example row of columns -->
136 <div class="row">
137 <div class="col-md-4">
138 <p><a class="btn btn-default" href="#" role="button">View 1 &raquo;</a></p>
139 <div id="chart1" class="chart"></div>
140 </div>
141 <div class="col-md-4">
142 <p><a class="btn btn-default" href="#" role="button">View 2 &raquo;</a></p>
143 <div id="chart2" class="chart"></div>
144 </div>
145 <div class="col-md-4">
146 <p><a class="btn btn-default" href="#" role="button">View 3 &raquo;</a></p>
147 <div id="chart3" class="chart"></div>
148 </div>
149 </div>
150 <div class="row">
151 <div class="col-md-4">
152 <p><a class="btn btn-default" href="#" role="button">View 4 &raquo;</a></p>
153 <div id="chart4" class="chart"></div>
154 </div>
155 <div class="col-md-4">
156 <p><a class="btn btn-default" href="#" role="button">View 5 &raquo;</a></p>
157 <div id="chart5" class="chart"></div>
158 </div>
159 <div class="col-md-4">
160 <p><a class="btn btn-default" href="#" role="button">View 6 &raquo;</a></p>
161 <div id="chart6" class="chart"></div>
162 </div>
163 </div>
164 <div class="row">
165 <div class="col-md-4">
166 <p><a class="btn btn-default" href="#" role="button">View 7 &raquo;</a></p>
167 <div id="chart7" class="chart"></div>
168 </div>
169 <div class="col-md-4">
170 <p><a class="btn btn-default" href="#" role="button">View 8 &raquo;</a></p>
171 <div id="chart8" class="chart"></div>
172 </div>
173 <div class="col-md-4">
174 <p><a class="btn btn-default" href="#" role="button">View 9 &raquo;</a></p>
175 <div id="chart9" class="chart"></div>
176 </div>
177 </div>
178
179 <hr>
180
181 <footer>
182 <p>Rlab = (R+Matlab).js in MIT License</p>
183 </footer>
184 </div> <!-- /container -->
185 <!-- Bootstrap core JavaScript
186 ================================================== -->
187 <!-- Placed at the end of the document so the pages load faster -->
188 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
189 <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
190 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
191 <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
192 <script src="http://getbootstrap.com/assets/js/ie10-viewport-bug-workaround.js"></script>
193 <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.18.2/codemirror.js"></script>
194 <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.18.2/mode/javascript/javascript.js"></script>
195 <script src="
196https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.js"></script>
197 <script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.js"></script>
198 <script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.16.1/vis.js"></script>
199 <script src="web/rlab.js"></script>
200 <script src="web/glab.js"></script>
201
202<script>
203var R = rlab;
204var codeBox = document.getElementById('codeBox');
205var consoleBox = document.getElementById('consoleBox');
206var fileButton = document.getElementById('fileButton');
207var runButton = document.getElementById('runButton');
208var fileName;
209
210require=function() { return R; }
211
212clear=function() { consoleBox.value = ''; }
213
214print=function() {
215 var args = [].slice.apply(arguments);
216 console.log.apply(console, args);
217 var logStr = "";
218 for (var i=0; i<args.length; i++) {
219 logStr += args[i] + " ";
220 }
221 consoleBox.value += logStr+"\n";
222}
223
224var editor = CodeMirror.fromTextArea(codeBox, {
225 lineNumbers: true,
226 mode:'javascript',
227});
228
229function handleFileSelect(evt) {
230 console.log('handleFileSelect');
231 editor.getDoc().setValue('');
232 codeBox.value = "";
233 var reader = new FileReader();
234 reader.onload = function(e) {
235 console.log('reader.onload');
236 editor.getDoc().setValue(reader.result);
237// codeBox.value = reader.result;
238// E.editor.setValue(codebox.value);
239// run();
240 };
241 fileName = evt.target.files[0].name;
242 reader.readAsText(evt.target.files[0]);
243}
244
245fileButton.addEventListener('change', handleFileSelect, false);
246$("#runButton").click(function() {
247 var code = editor.getDoc().getValue();
248 clear();
249 eval(code);
250});
251
252function showChart(i) {
253 return function() {
254 G.show('#bigChart', G.dgMap['#chart'+i]);
255 }
256}
257
258$(document).ready(function() {
259 for (var i=1; i<=9; i++) {
260 $('#chart'+i).click(showChart(i));
261 }
262});
263
264// $('#bigChartModal').modal('show');
265</script>
266
267<script>
268G.chart2D('#chart1', function(g) {
269 dt = R.dt;
270 G.curve(g, "dt(3)" , (x)=>dt(x,3) );
271 G.curve(g, "dt(10)", (x)=>dt(x,10));
272 G.curve(g, "dt(25)", (x)=>dt(x,25));
273});
274
275G.chart2D('#chart2', function(g) {
276 var x = R.rnorm(10000, 3, 2);
277 G.hist(g, "x", x, 'bar', -10, 10, 0.3);
278// G.curve(g, "N(5,2)", (x)=>R.dnorm(x, 3, 2)*1000);
279});
280
281G.chart2D('#chart3', function(g) {
282 Ax = R.rnorm(100, 10, 1);
283 Ay = R.rnorm(100, 0, 0.5);
284 Bx = R.rnorm(100, 0, 1);
285 By = R.rnorm(100, 0, 0.5);
286 G.plot(g, "A", Ax, Ay);
287 G.plot(g, "B", Bx, By);
288});
289
290function hist(g,name,x,k) {
291 var mk = x.fillVM(k,x.length/k);
292 var xbar = mk.colSum();
293 G.ihist(g, name, xbar, 'bar');
294}
295
296var x = R.samples([0,1], 100000, {replace:true});
297G.chart2D('#chart4', (g)=>hist(g,'x1bar', x,1));
298G.chart2D('#chart5', (g)=>hist(g,'x2bar', x,2));
299G.chart2D('#chart6', (g)=>hist(g,'x10bar', x,10));
300G.chart2D('#chart7', (g)=>G.pie(g, {A:30, B:40, C:20, D:10}));
301G.chart2D('#chart8', (g)=>G.timeSeries(g, [
302 ['x','2013-01-01','2013-01-02','2013-01-03','2013-01-04','2013-01-05'],
303 ['data1', 30, 200, 100, 400, 150],
304 ['data2', 130, 340, 200, 500, 250]
305]));
306
307G.chart3D('#chart9', 'surface', function(x, y) {
308 return (Math.sin(x/50) * Math.cos(y/50) * 50 + 50);
309});
310
311// c3.js 可以 resize，參考：http://c3js.org/samples/api_resize.html
312
313</script>
314
315 </body>
316</html>
\No newline at end of file