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
|
// contains various utility functions
var Rvis = (function(exports){
// can be used to graph loss, or accuract over time
var Graph = function(options) {
var options = options || {};
this.step_horizon = options.step_horizon || 1000;
this.pts = [];
this.maxy = -9999;
this.miny = 9999;
}
Graph.prototype = {
// canv is the canvas we wish to update with this new datapoint
add: function(step, y) {
var time = new Date().getTime(); // in ms
if(y>this.maxy*0.99) this.maxy = y*1.05;
if(y<this.miny*1.01) this.miny = y*0.95;
this.pts.push({step: step, time: time, y: y});
if(step > this.step_horizon) this.step_horizon *= 2;
},
// elt is a canvas we wish to draw into
drawSelf: function(canv) {
var pad = 25;
var H = canv.height;
var W = canv.width;
var ctx = canv.getContext('2d');
ctx.clearRect(0, 0, W, H);
ctx.font="10px Georgia";
var f2t = function(x) {
var dd = 1.0 * Math.pow(10, 2);
return '' + Math.floor(x*dd)/dd;
}
// draw guidelines and values
ctx.strokeStyle = "#999";
ctx.beginPath();
var ng = 10;
for(var i=0;i<=ng;i++) {
var xpos = i/ng*(W-2*pad)+pad;
ctx.moveTo(xpos, pad);
ctx.lineTo(xpos, H-pad);
ctx.fillText(f2t(i/ng*this.step_horizon/1000)+'k',xpos,H-pad+14);
}
for(var i=0;i<=ng;i++) {
var ypos = i/ng*(H-2*pad)+pad;
ctx.moveTo(pad, ypos);
ctx.lineTo(W-pad, ypos);
ctx.fillText(f2t((ng-i)/ng*(this.maxy-this.miny) + this.miny), 0, ypos);
}
ctx.stroke();
var N = this.pts.length;
if(N<2) return;
// draw the actual curve
var t = function(x, y, s) {
var tx = x / s.step_horizon * (W-pad*2) + pad;
var ty = H - ((y-s.miny) / (s.maxy-s.miny) * (H-pad*2) + pad);
return {tx:tx, ty:ty}
}
ctx.strokeStyle = "red";
ctx.beginPath()
for(var i=0;i<N;i++) {
// draw line from i-1 to i
var p = this.pts[i];
var pt = t(p.step, p.y, this);
if(i===0) ctx.moveTo(pt.tx, pt.ty);
else ctx.lineTo(pt.tx, pt.ty);
}
ctx.stroke();
}
}
exports = exports || {};
exports.Graph = Graph;
return exports;
})(typeof module != 'undefined' && module.exports); // add exports to module.exports if in node.js
|
