From 3e62bba15db6dbbc83514bfcbf6cb49f0b4fe2ec Mon Sep 17 00:00:00 2001 From: karpathy Date: Thu, 18 Dec 2014 12:29:45 -0800 Subject: first commit --- src/vis.js | 88 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 88 insertions(+) create mode 100644 src/vis.js (limited to 'src/vis.js') diff --git a/src/vis.js b/src/vis.js new file mode 100644 index 0000000..d501f41 --- /dev/null +++ b/src/vis.js @@ -0,0 +1,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.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