gallery/linear-regression.js

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