Polynomial regression I: Difference between revisions

From JSXGraph Wiki
No edit summary
No edit summary
Line 15: Line 15:
brd.suspendUpdate();
brd.suspendUpdate();
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'});     
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',dash:2});     
curve.updateDataArray = function() {
curve.updateDataArray = function() {
Line 22: Line 23:
     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];  
}
}
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:'black'});     
brd.create('glider',[100,30,reg],{strokeColor:'black'});     
brd.create('glider',[100,30,reg],{strokeColor:'black'});     
Line 55: Line 56:
     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];  
}
}
var regressionPolynomial = JXG.Math.Numerics.regressionPolynomial(deg,datax,curve.dataY);
var regressionPolynomial = JXG.Math.Numerics.regressionPolynomial(deg, datax, data);


var reg = brd.create('functiongraph',[regressionPolynomial],{strokeColor:'black'});     
var reg = brd.create('functiongraph',[regressionPolynomial],{strokeColor:'black'});     

Revision as of 10:18, 7 August 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});     
var curve = brd.create('curve',[[],[]],{strokeColor:'gray',dash:2});     
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]; 
}
var regressionPolynomial = JXG.Math.Numerics.regressionPolynomial(deg, datax, data);

var reg = brd.create('functiongraph',[regressionPolynomial],{strokeColor:'black'});     
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();