Difference between revisions of "Polynomial regression I"

From JSXGraph Wiki
Jump to: navigation, search
Line 36: Line 36:
 
<source lang="xml">
 
<source lang="xml">
 
<jsxgraph width="700" height="500">
 
<jsxgraph width="700" height="500">
 
+
var data = "406.60 428.50 429.30 426.30 434.70 415.90 ... many points ... 521.80 524.40 526.80";
    data = "406.60 428.50 429.30 426.30 434.70 415.90 ... many points ... 521.80 524.40 526.80";
+
data = data.split(' ');
    data = data.split(' ');
+
var datax = [];
    datax = [];
+
for (i = 0; i < data.length; i++)  {  
    for (i = 0; i < data.length; i++)  {  
+
    data[i] = (parseFloat(data[i])-450.0);  
        data[i] = (parseFloat(data[i])-450.0);  
+
    datax[i] = i;
        datax[i] = i;
+
}
        }
 
 
      
 
      
 
+
var brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-2, 100, data.length+2, -70], grid: false, axis:true});
brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-2, 100, data.length+2, -70], grid: false, axis:true});
+
brd.suspendUpdate();
s = brd.createElement('slider',[[10,70],[80,70],[0,1,1]],{name:'scale'});     
+
var s = brd.create('slider',[[10,70],[80,70],[0,1,1]],{name:'scale'});     
deg = brd.createElement('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});     
curve = brd.createElement('curve',[datax,[]],{strokeColor:'gray',dash:2});     
+
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;
     for(i=0;i<len;i++) { this.dataY[i] = s.Value()*data[i]; }
+
    this.dataX = datax.slice(0,len);
 +
     for(i=0;i<len;i++) this.dataY[i] = s.Value()*data[i];  
 
}
 
}
regressionPolynomial = JXG.Math.Numerics.regressionPolynomial(deg,datax,curve.dataY);  // generateFunction();
+
var regressionPolynomial = JXG.Math.Numerics.regressionPolynomial(deg,datax,curve.dataY);
  
reg = brd.createElement('functiongraph',[regressionPolynomial],{strokeColor:'black'});     
+
var reg = brd.create('functiongraph',[regressionPolynomial],{strokeColor:'black'});     
brd.createElement('glider',[100,30,reg],{strokeColor:'black'});     
+
brd.create('glider',[100,30,reg],{strokeColor:'black'});     
  
t = brd.createElement('text',[20,40,
+
t = brd.create('text',[20,40,
 
             function(){ return "r(x) = " + regressionPolynomial.getTerm();}
 
             function(){ return "r(x) = " + regressionPolynomial.getTerm();}
 
             ],
 
             ],
 
             {strokeColor:'black',fontSize:'14px'});     
 
             {strokeColor:'black',fontSize:'14px'});     
 
+
brd.unsuspendUpdate();
 
</jsxgraph>
 
</jsxgraph>
 
</source>
 
</source>
  
 
[[Category:Examples]]
 
[[Category:Examples]]

Revision as of 15:13, 29 September 2010

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

<jsxgraph width="700" height="500">
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,curve.dataY);

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:'14px'});     
brd.unsuspendUpdate();
</jsxgraph>