gallery/linear-regression.js

   1 /*global Gallery,Dygraph,data */
   2 Gallery.register(
   3   'linear-regression',
   4   {
   5     name: 'Linear Regressions',
   6     title: 'Linear Regression Demo',
   7     setup: function(parent) {
   8       parent.innerHTML = [
   9         "<p>Click the buttons to generate linear regressions over either data ",
  10         "series. If you zoom in and then click the regression button, the regression ",
  11         "will only be run over visible points. Zoom back out to see what the local ",
  12         "regression looks like over the full data.</p> ",
  13         "<div id='demodiv' style='width: 480px; height: 320px;'></div>",
  14         "<div style='text-align:center; width: 480px'>",
  15         "<button style='color: green;' id='ry1'>Regression (Y1)</button> ",
  16         "<button style='color: blue;' id='ry2'>Regression (Y2)</button> ",
  17         "<button id='clear'>Clear Lines</button>",
  18         "</div>"].join("\n");
  19     },
  20     run: function() {
  21       var g, regression, clearLines;  // defined below
  22       document.getElementById("ry1").onclick = function() { regression(1); };
  23       document.getElementById("ry2").onclick = function() { regression(2); };
  24       document.getElementById("clear").onclick = function() { clearLines(); };
  25
  26       var data = [];
  27       for (var i = 0; i < 120; i++) {
  28         data.push([i,
  29                    i / 5.0 + 10.0 * Math.sin(i / 3.0),
  30                    30.0 - i / 5.0 - 10.0 * Math.sin(i / 3.0 + 1.0)]);
  31       }
  32
  33       // coefficients of regression for each series.
  34       // if coeffs = [ null, [1, 2], null ] then we draw a regression for series 1
  35       // only. The regression line is y = 1 + 2 * x.
  36       var coeffs = [ null, null, null ];
  37       regression = function(series) {
  38         // Only run the regression over visible points.
  39         var range = g.xAxisRange();
  40
  41         var sum_xy = 0.0, sum_x = 0.0, sum_y = 0.0, sum_x2 = 0.0, num = 0;
  42         for (var i = 0; i < g.numRows(); i++) {
  43           var x = g.getValue(i, 0);
  44           if (x < range[0] || x > range[1]) continue;
  45
  46           var y = g.getValue(i, series);
  47           if (y === null || y === undefined) continue;
  48           if (y.length == 2) {
  49             // using fractions
  50             y = y[0] / y[1];
  51           }
  52
  53           num++;
  54           sum_x += x;
  55           sum_y += y;
  56           sum_xy += x * y;
  57           sum_x2 += x * x;
  58         }
  59
  60         var a = (sum_xy - sum_x * sum_y / num) / (sum_x2 - sum_x * sum_x / num);
  61         var b = (sum_y - a * sum_x) / num;
  62
  63         coeffs[series] = [b, a];
  64         if (typeof(console) != 'undefined') {
  65           console.log("coeffs(" + series + "): [" + b + ", " + a + "]");
  66         }
  67
  68         g.updateOptions({});  // forces a redraw.
  69       };
  70
  71       clearLines = function() {
  72         for (var i = 0; i < coeffs.length; i++) coeffs[i] = null;
  73         g.updateOptions({});
  74       };
  75
  76       function drawLines(ctx, area, layout) {
  77         if (typeof(g) == 'undefined') return;  // won't be set on the initial draw.
  78
  79         var range = g.xAxisRange();
  80         for (var i = 0; i < coeffs.length; i++) {
  81           if (!coeffs[i]) continue;
  82           var a = coeffs[i][1];
  83           var b = coeffs[i][0];
  84
  85           var x1 = range[0];
  86           var y1 = a * x1 + b;
  87           var x2 = range[1];
  88           var y2 = a * x2 + b;
  89
  90           var p1 = g.toDomCoords(x1, y1);
  91           var p2 = g.toDomCoords(x2, y2);
  92
  93           var c = Dygraph.toRGB_(g.getColors()[i - 1]);
  94           c.r = Math.floor(255 - 0.5 * (255 - c.r));
  95           c.g = Math.floor(255 - 0.5 * (255 - c.g));
  96           c.b = Math.floor(255 - 0.5 * (255 - c.b));
  97           var color = 'rgb(' + c.r + ',' + c.g + ',' + c.b + ')';
  98           ctx.save();
  99           ctx.strokeStyle = color;
 100           ctx.lineWidth = 1.0;
 101           ctx.beginPath();
 102           ctx.moveTo(p1[0], p1[1]);
 103           ctx.lineTo(p2[0], p2[1]);
 104           ctx.closePath();
 105           ctx.stroke();
 106           ctx.restore();
 107         }
 108       }
 109
 110       g = new Dygraph(
 111               document.getElementById("demodiv"),
 112               data,
 113               {
 114                 labels: ['X', 'Y1', 'Y2'],
 115                 underlayCallback: drawLines,
 116                 drawPoints: true,
 117                 drawAxesAtZero: true,
 118                 strokeWidth: 0.0
 119               }
 120           );
 121     }
 122   });