Difference between revisions of "Polynomial regression I"

From JSXGraph Wiki
Jump to navigationJump to search
 
(40 intermediate revisions by the same user not shown)
Line 11: Line 11:
 
     data[i] = (parseFloat(data[i])-450.0);  
 
     data[i] = (parseFloat(data[i])-450.0);  
 
}
 
}
   
+
 
var brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-2, 100, data.length+2, -70], grid: false, axis:true});
 
var brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-2, 100, data.length+2, -70], grid: false, axis:true});
  
Line 18: Line 18:
 
var deg = brd.create('slider',[[10,90],[80,90],[1,1,10]],{name:'degree',snapWidth:1});     
 
var deg = brd.create('slider',[[10,90],[80,90],[1,1,10]],{name:'degree',snapWidth:1});     
  
var curve = brd.create('curve',[[],[]],{strokeColor:'gray',dash:2});    
+
var curve = brd.create('curve',[[],[]],{strokeColor:'gray',strokeWidth:2, dash:2});
 
curve.updateDataArray = function() {
 
curve.updateDataArray = function() {
 
     var i, len = data.length;
 
     var i, len = data.length;
Line 26: Line 26:
 
     }
 
     }
 
}
 
}
curve.update().updateRenderer();
+
curve.update(); // Needed for correct glider position
  
 
var regressionPolynomial = JXG.Math.Numerics.regressionPolynomial(deg, datax, curve.dataY);
 
var regressionPolynomial = JXG.Math.Numerics.regressionPolynomial(deg, datax, curve.dataY);
var reg = brd.create('functiongraph',[regressionPolynomial],{strokeColor:'black'});     
+
var reg = brd.create('functiongraph',[regressionPolynomial],{strokeColor:'blue', strokeWidth:4});     
 
brd.create('glider',[100,30,reg],{strokeColor:'black'});     
 
brd.create('glider',[100,30,reg],{strokeColor:'black'});     
  
Line 38: Line 38:
  
 
brd.unsuspendUpdate();
 
brd.unsuspendUpdate();
//brd.update();
 
 
</jsxgraph>
 
</jsxgraph>
  
Line 55: Line 54:
 
var s = brd.create('slider',[[10,70],[80,70],[0,1,1]],{name:'scale'});     
 
var s = brd.create('slider',[[10,70],[80,70],[0,1,1]],{name:'scale'});     
 
var deg = brd.create('slider',[[10,90],[80,90],[1,1,10]],{name:'degree',snapWidth:1});     
 
var deg = brd.create('slider',[[10,90],[80,90],[1,1,10]],{name:'degree',snapWidth:1});     
var curve = brd.create('curve',[[],[]],{strokeColor:'gray',dash:2});   
 
 
curve.updateDataArray = function() {
 
curve.updateDataArray = function() {
 
     var i, len = data.length;
 
     var i, len = data.length;
 
     this.dataX = datax.slice(0,len);  
 
     this.dataX = datax.slice(0,len);  
     for(i=0;i<len;i++) this.dataY[i] = s.Value()*data[i];  
+
     for (i=0; i<len; i++) {
 +
      this.dataY[i] = s.Value()*data[i];  
 +
    }
 
}
 
}
 +
curve.update(); // Needed for correct glider position
 +
 
var regressionPolynomial = JXG.Math.Numerics.regressionPolynomial(deg, datax, curve.dataY);
 
var regressionPolynomial = JXG.Math.Numerics.regressionPolynomial(deg, datax, curve.dataY);
 
+
var reg = brd.create('functiongraph',[regressionPolynomial],{strokeColor:'blue', strokeWidth:4});     
var reg = brd.create('functiongraph',[regressionPolynomial],{strokeColor:'black'});     
 
 
brd.create('glider',[100,30,reg],{strokeColor:'black'});     
 
brd.create('glider',[100,30,reg],{strokeColor:'black'});     
  

Latest revision as of 18:04, 21 November 2013

Through the points defining the dashed line the regression polynomial of degree 'degree' is computed and displayed. The points can be scaled by adjusting the slider 'scale'. The degree of the regression polynomial can be changed by using the slider 'degree'.

The underlying JavaScript code

var data = "406.60 428.50 429.30 426.30 434.70 415.90 ... many points ... 521.80 524.40 526.80";
data = data.split(' ');
var datax = [];
for (i = 0; i < data.length; i++)  { 
    data[i] = (parseFloat(data[i])-450.0); 
    datax[i] = i;
}
    
var brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-2, 100, data.length+2, -70], grid: false, axis:true});
brd.suspendUpdate();
var s = brd.create('slider',[[10,70],[80,70],[0,1,1]],{name:'scale'});     
var deg = brd.create('slider',[[10,90],[80,90],[1,1,10]],{name:'degree',snapWidth:1});     
curve.updateDataArray = function() {
    var i, len = data.length;
    this.dataX = datax.slice(0,len); 
    for (i=0; i<len; i++) {
       this.dataY[i] = s.Value()*data[i]; 
    }
}
curve.update(); // Needed for correct glider position

var regressionPolynomial = JXG.Math.Numerics.regressionPolynomial(deg, datax, curve.dataY);
var reg = brd.create('functiongraph',[regressionPolynomial],{strokeColor:'blue', strokeWidth:4});     
brd.create('glider',[100,30,reg],{strokeColor:'black'});     

t = brd.create('text',[20,40,
            function(){ return "r(x) = " + regressionPolynomial.getTerm();}
            ],
            {strokeColor:'black',fontSize:18});     
brd.unsuspendUpdate();